Image to Base64 Converter

A Base64 image is a binary image file encoded as a string of ASCII characters. The result is a Data URL like data:image/png;base64,iVBOR... which can be embedded directly in HTML, CSS, or JSON without referencing an external file.

Use it when: you want to inline small icons in CSS to eliminate HTTP requests, embed images in HTML emails (many clients block external URLs), store images in JSON APIs or databases, or use images in sandboxed environments where file paths are unavailable.

Avoid it for large images — Base64 adds ~33% size overhead and the result cannot be cached by the browser separately from the document.

Base64 encodes every 3 bytes of binary data as 4 ASCII characters. Since 3 → 4 equals a 33.3% increase, a 100 KB PNG becomes roughly 137 KB as Base64.

On top of the size increase, Base64-inlined images cannot be cached separately by the browser — they are re-transferred on every page load as part of the HTML or CSS file. For anything larger than ~5–10 KB, a regular <img src> with HTTP caching is almost always more efficient.

HTML — use the Data URL directly as the src attribute: <img src="data:image/png;base64,iVBOR..." alt="icon" />

CSS — use it inside url(): .icon { background-image: url("data:image/png;base64,iVBOR..."); }

JavaScript — convert a File or Blob using FileReader: const reader = new FileReader(); reader.onload = (e) => console.log(e.target.result); // Data URL reader.readAsDataURL(file);

Or with the modern async approach: const dataUrl = await new Promise(resolve => { const r = new FileReader(); r.onload = e => resolve(e.target.result); r.readAsDataURL(file); });

In JavaScript — fetch the Data URL as a Blob and trigger a download: const res = await fetch(dataUrl); const blob = await res.blob(); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'image.png'; a.click();

In Python — strip the header and decode: import base64 data = base64.b64decode(b64_string.split(',')[1] if ',' in b64_string else b64_string) open('out.png', 'wb').write(data)

Always strip the data:image/...;base64, header before passing to a decoder.

A raw Base64 string is just the encoded bytes: iVBORw0KGgo...

A Data URL includes the MIME type header so browsers can render it inline: data:image/png;base64,iVBORw0KGgo...

Use the raw string when an API or library handles the MIME type separately. Use the full Data URL in HTML src attributes, CSS url(), email templates, or anywhere a browser needs to render the image without a separate file.

It depends on the email client. Gmail strips embedded Base64 images from the HTML and does not display them. Outlook on Windows supports them in some versions but not reliably. Apple Mail and most mobile clients handle them fine.

The recommended approach for HTML emails is CID (Content-ID) embedding, where the image is attached to the email as a MIME part and referenced with cid:image1 in the src. Base64 inline works as a fallback for simple cases but should not be the primary strategy for broad email compatibility.

The ~33% overhead is constant regardless of format — it is a property of the encoding algorithm, not the image. So the real question is: which format produces the smallest binary file?

For photos: WebP is typically 25–35% smaller than JPEG. For icons and logos: SVG is often a few hundred bytes and embeds cleanly. For images with transparency: WebP beats PNG significantly. For animations: WebP or AVIF beat GIF substantially.

Convert to the most efficient format first, then Base64 encode the result. Our tool supports PNG, JPG, WebP, SVG, GIF, BMP, ICO, and AVIF.