Image to Base64 Converter — Data URL Generator

Base64 makes images larger and uncacheable

Base64 encodes 3 bytes into 4 characters, so the encoded form is 4/3 of the original — about a 33% increase before you add the data URI prefix. Concretely, a 6 KB icon becomes roughly 8 KB of text.

That much is well known and usually treated as the whole trade-off. It is not; the size penalty is the smaller of the two costs.

Caching stops working when you embed the image

An external image file is fetched once and cached by the browser, then reused on every page that references it. A data URI is not a separate resource — it is part of the HTML document or the stylesheet that contains it, so it is re-downloaded with every one of those documents and cannot be cached independently.

Embed a logo used across fifty pages and you ship that logo fifty times. This is what inverts the calculation: the 33% penalty applies once per delivery, and a shared image is delivered many times. Any image appearing on more than one page is almost certainly better as a file.

Where Base64 wins

• Very small, single-use images — an icon under a kilobyte or two, a spacer, a tiny repeating pattern — where saving one HTTP round trip outweighs 33% of a small number.
• Genuinely self-contained files — an emailed HTML report, an offline page, a bug reproduction you need someone else to open. Here the point is not performance at all; it is that a single file with no sibling assets cannot arrive broken.
• Critical-path CSS — a background image in a stylesheet that blocks first paint, where an extra request would delay rendering.
• Places you cannot host a file — a CMS field, a chat integration, or a template system that accepts markup but not uploads.

Where Base64 loses

Photographs and anything beyond a few kilobytes. Anything used on more than one page. Anything you might want to replace later without redeploying markup.

The failure worth naming specifically: a large data URI inflates the HTML document itself, and the document sits on the critical rendering path. The browser cannot render the page until it has parsed the markup, so embedding a big image delays first paint — you can make a page measurably slower while believing you optimised it. An external image, by contrast, loads in parallel and can be lazy-loaded.

The data URI format

A data URI has four parts: the data: scheme, the MIME type, the ;base64 marker, and the payload. So a PNG begins data:image/png;base64, followed by the encoded bytes. It is used directly wherever a URL is expected:

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

.logo { background-image: url("data:image/png;base64,iVBORw0KGgo..."); }

The tool encodes locally with readAsDataURL, so nothing is uploaded, and it outputs both forms — the plain data URI for an img tag and a ready-made CSS background-image rule. It also reports the before and after sizes, which is the number that should actually decide whether to use it.

Embedding an image as base64 makes the file about a third larger, so it is worth shrinking the image before encoding rather than after. The image optimizer does that.