Image to Base64
Fetch an image Uniform Resource Locator (URL) and convert it to a Base64 data Uniform Resource Identifier (URI) for embedding directly in Cascading Style Sheets (CSS) or HyperText Markup Language (HTML).
Max 512 KB. Supports JPEG, PNG, GIF, SVG, WebP, etc.
Monitor this automatically
NetTests can run this check on a schedule, preserve historical results, compare changes over time, and alert you the moment something breaks.
Start monitoring free → See all monitoring productsFrequently Asked Questions
What is a Base64 data URI for images?
A data Uniform Resource Identifier (URI) embeds file content directly in HyperText Markup Language (HTML) or Cascading Style Sheets (CSS) as a Base64-encoded string: data:image/png;base64,iVBOR.... This eliminates an HyperText Transfer Protocol (HTTP) request for the image. Common uses: small icons in CSS (to avoid extra requests), email HTML (many clients block external images but render embedded ones), and self-contained single-file HTML documents.
When should I use inline Base64 images?
Best for small images (icons, logos under ~2–3 KB) where the Base64 overhead is outweighed by saving an HyperText Transfer Protocol (HTTP) round-trip. Avoid it for large images — Base64 encoding increases file size by ~33%, and the encoded data can't be cached separately by the browser. For most production images, a Content Delivery Network (CDN)-served image with proper caching headers is preferable.
How do I use the output in CSS?
background-image: url('data:image/png;base64,iVBOR...'); — paste the full data Uniform Resource Identifier (URI) as the url() value. In HyperText Markup Language (HTML): <img src="data:image/png;base64,...">. The data URI must include the data:image/...;base64, prefix, which this tool includes automatically.