Image to Base64 Converter

Image to Base64 Converter

Convert images to Base64 encoded strings for embedding in HTML/CSS. Support for PNG, JPEG, GIF, WebP. Free online image to data URI converter

Inlining an image as Base64 inside HTML or CSS turns a separate file request into zero HTTP requests — useful for tiny icons, email templates that must not depend on external images, and embedding logos in SVG. The catch: Base64 increases file size by ~33% and bloats your CSS/HTML. Use it for icons under ~4KB; switch to separate files (or sprites) for anything larger. This tool converts PNG/JPEG/GIF/WebP/SVG to Base64 data URIs and shows the resulting size delta.

When inlining as Base64 makes sense

  • Tiny icons (under 4KB raw) — the HTTP request overhead is bigger than the size penalty. Inline.
  • Email templates — many email clients block external image loading. Inline images appear immediately, no security prompt.
  • Embedding in SVG — referencing an external image from inside an SVG element only works in some contexts. Inline as data URI for portability.
  • Privacy / offline — image is part of the document, no external host needed.
  • Single-file HTML deliverables — for documents that need to be one file (legal contracts, archived reports), inline all images.

When inlining is the wrong answer

  • Large images (> 10KB) — the 33% Base64 overhead is significant. Browser cache cannot help inlined images.
  • Images repeated across many pages — every page loads the full image inline, defeating cache.
  • Frequently-changing images — every change requires re-deploying the HTML/CSS, not just the asset.
  • High-resolution photos — Base64-ing a 500KB JPEG produces a 670KB data URI string. Awkward in any source file.
  • When you have HTTP/2 — multiplexed requests make the "save a request" argument weaker. Bundlers like Webpack default to inlining only assets under 4-8KB for this reason.

Working example

Input

A 256-byte transparent PNG (1x1 pixel)

Output

Raw file:        256 bytes
Base64 encoded:  344 bytes (34% overhead)
With data URI header:
  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

Usage in HTML:
  <img src="data:image/png;base64,iVBORw0KGgo..." alt="">

Usage in CSS:
  background-image: url("data:image/png;base64,iVBORw0KGgo...");

Usage in SVG:
  <image href="data:image/png;base64,iVBORw0KGgo..." width="100" height="100"/>

The "data:image/png;base64," prefix is the data URI scheme (RFC 2397). Without it, the browser does not know how to interpret the Base64 string. Always include the MIME type — image/png, image/jpeg, image/svg+xml, image/webp.

Size math

Base64 encodes 3 bytes of input as 4 characters of output. Theoretical overhead: 33.33%. With the data URI prefix (~30 bytes for "data:image/png;base64,") plus minor padding, real overhead is 35-40% for small images.

  • 1 KB raw → ~1.4 KB inlined (34% overhead).
  • 4 KB raw → ~5.4 KB inlined.
  • 10 KB raw → ~13.5 KB inlined.
  • 100 KB raw → ~135 KB inlined.
  • 1 MB raw → ~1.36 MB inlined.

When to reach for this tool

  • You need to embed a small icon directly in CSS without a separate file request.
  • You are creating an email template and need images that render without external loads.
  • You are testing an idea in a sandbox (CodePen, jsfiddle) where uploading assets is awkward.
  • You are debugging "the image is not loading" by inlining it to rule out path / CORS / permissions issues.

What this tool will not do

  • It will not minify or optimize the image before encoding. The Base64 string is exactly your input file in encoded form. For smaller output, compress the source image first.
  • It will not host the Base64 string. Once generated, paste it into your HTML/CSS yourself.
  • It will not handle very large files efficiently. Browser memory limits inlining of multi-megabyte images. For large images, keep them as separate files.

Conversion happens in your browser via the File API. Source images stay local; the resulting Base64 string is yours to paste wherever needed.

Frequently asked questions

Should I inline all my images for performance?

No. Inlining small icons (< 4KB) often improves performance. Inlining anything larger usually hurts performance — the file becomes uncacheable, the page is larger to download initially, and browsers cannot lazy-load inline data URIs. The Webpack `url-loader` default of 8KB is reasonable; below that inline, above that separate file.

Does inlining work in emails?

Mostly yes. Gmail, Outlook, Apple Mail, Yahoo Mail support `<img src="data:...">`. Some corporate Outlook installations strip Base64 images as part of attachment policies. CSS background-image data URIs are less universally supported — many clients strip CSS entirely.

Can I inline SVG without Base64?

Yes — SVG can be inlined as XML directly. `<svg>...</svg>` inside HTML works without encoding. For CSS, you can use `url("data:image/svg+xml;utf8,<svg ...></svg>")` with URL-encoded angle brackets, no Base64. This is more efficient than Base64-encoding SVG.

Why is my Base64 image not showing?

Common causes: (1) missing MIME type in the data URI prefix; (2) line breaks or whitespace inside the Base64 string (some places preserve linebreaks, some do not); (3) the source was not properly Base64-encoded (binary corruption). Test the data URI in a separate `<img>` tag isolation.

Does inlining bypass CORS issues?

Yes — a data URI is the same-origin as the document it appears in. Useful for fixing "image blocked by CORS" issues where you cannot configure the image host. But if you have the source file at all, you can just commit it to your own server.

How do I decode a Base64 string back to an image file?

Strip the data URI prefix ("data:image/png;base64,"), Base64-decode the rest, save as binary file with the correct extension. Most decoders / curl + base64 -d / Python's base64.b64decode handle this.

Related tools

Image Converter

Convert images between PNG, JPEG, and WebP formats. Batch conversion with quality control. Free online image format converter

Image Compressor

Compress and resize images online without losing quality. Reduce JPEG, PNG, WebP file size. Free image optimization tool with adjustable quality

Base64 Encoder & Decoder

Encode and decode Base64 strings online. Convert text, files and images to Base64 format. Free Base64 encoder/decoder tool with copy button

Favicon Generator

Generate favicons in all sizes (16x16, 32x32, 180x180) from any image. Create ICO and PNG favicons. Free online favicon maker for websites

Last updated · E-Utils editorial team