About the Image to Base64 Converter

Base64 encoding converts binary data — such as an image file — into a string of printable ASCII characters. The resulting string can be embedded directly in HTML, CSS, or JSON without referencing an external file. This is commonly used for small icons in CSS files, for email attachments, and for passing images through APIs that only accept text.

How to use a Base64 image in HTML and CSS

HTML img tag — <img src="data:image/png;base64,iVBOR...">
CSS background — background-image: url("data:image/svg+xml;base64,PHN2...")
Inline SVG — encode an SVG file to avoid CORS issues when loading from another domain

When should you avoid Base64?

Base64 increases file size by approximately 33% because it uses 4 characters to represent every 3 bytes. For images above 5KB, a standard <img> tag pointing to an external URL is better — browsers cache external image files, while Base64 strings embedded in HTML or CSS cannot be cached separately.

Data URIs vs external image files

The decision to use Base64-encoded data URIs versus external image files is a performance trade-off. Data URIs eliminate an HTTP request (good for small images), but increase HTML/CSS file size, cannot be cached separately, and increase page parse time. For large images or icons used across many pages, a sprite sheet or CDN-hosted SVG file is more efficient.

Use data URIs for — small icons (<5KB), single-use images, email templates, offline apps
Avoid for — large images, images reused across many pages (cannot be cached), background patterns
SVG consideration — SVGs can be inlined directly in HTML (<svg>) rather than Base64-encoded, saving overhead
HTTP/2 effect — multiplexed connections reduce the penalty of multiple HTTP requests, making data URIs less necessary on modern stacks

Frequently Asked Questions

What is Base64 encoding?

Base64 converts binary data into a string using 64 printable characters (A-Z, a-z, 0-9, +, /). It is used wherever binary data needs to travel through systems designed for text, such as HTML attributes, JSON payloads, and email bodies.

Why does Base64 make images larger?

Base64 encodes every 3 bytes of binary data as 4 ASCII characters, adding about 33% overhead. A 100KB image becomes approximately 133KB when Base64 encoded. Combined with being non-cacheable, this makes Base64 inefficient for large images.

Can I use Base64 images in CSS?

Yes. Use a data URI as the background-image value: background-image: url("data:image/png;base64,..."). This is useful for small icons in CSS frameworks or email templates where external file references may be blocked.

What image formats work with Base64?

Any format works — PNG, JPEG, GIF, WebP, SVG, ICO. For SVG you can also use URL encoding instead of Base64: url("data:image/svg+xml,%3Csvg..."), which produces a slightly smaller result and stays human-readable.

How do I decode Base64 back to an image?

Copy the Base64 string (without the data:image/...;base64, prefix), paste it into a Base64 decoder, and download the result. In Python: import base64; open("out.png","wb").write(base64.b64decode(data)).