Image ⇄ Base64 Converter

What the image & Base64 Converter does

A data URI is a whole file written directly into a URL. Instead of src="logo.png", which makes the browser fetch a separate file, you write src="data:image/png;base64,iVBORw0KGgo..." and the image travels inside the HTML or CSS itself. Base64 is the encoding that makes that possible: it represents arbitrary binary data using only characters that are safe in a URL.

The trade-off is size. Base64 uses four characters for every three bytes, so an encoded image is about 33% larger than the file it came from, plus a small header. That is fine for something tiny and terrible for something large. The practical rule is to inline images under roughly 4 KB — small icons, a spinner, a texture, a placeholder — where saving an entire HTTP request outweighs the extra bytes, and to leave anything larger as a normal file that the browser can cache and load in parallel.

The encoder here gives you the output in four shapes: the bare data URI, a ready-made CSS background-image rule, a complete HTML <img> tag, or the raw Base64 payload without the data: prefix — that last one is what APIs and JSON fields usually expect. The decoder works in reverse: paste a data URI you have found in a stylesheet or an API response and get back a viewable, downloadable image.

Because encoding and decoding both happen in your browser, you can safely inspect data URIs that came out of internal systems without sending them anywhere.

How to use it

1. On the Image → Base64 tab, drop in the image you want to inline.
2. Choose the output shape: a plain data URI, a CSS rule, an HTML tag, or the raw payload for an API.
3. Check the overhead figure — if the result is much over 4 KB, an ordinary image file is usually the better choice.
4. To go the other way, switch tabs, paste a data URI and press Decode to preview and download it.

A worked example

A 620-byte SVG-derived PNG icon encodes to an 856-character data URI, a 38% increase. Inlined as CSS it becomes:

.icon-check {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…');
  background-size: 16px 16px;
}

That saves one HTTP request on every page load, which on a high-latency mobile connection is worth more than the extra 236 bytes. Now compare a 180 KB hero photograph: encoded it becomes roughly 240 KB of text embedded in your HTML, it cannot be cached separately, it blocks the HTML from finishing, and it has to be re-downloaded on every page. That one stays a file.

Frequently asked questions