Image & Photo

Image to Base64

Data URIs for CSS and HTML, and decoding back.

What it does. A data URI embeds an image directly in HTML or CSS as Base64 text, removing a network request. The cost is roughly 33% size inflation and the loss of separate caching — the image is re-downloaded with every page load that includes it.

Runs in your browserNothing uploadsNo signupWorks offline

How to use Image to Base64

Drop in an image.
Copy as a raw string, CSS background or an img tag.
Check the size penalty before using it.

When a data URI is the right call

Very small icons under about 2 KB, where a request costs more than the bytes.
Critical above-the-fold images that must not wait for a second round trip.
Single-file deliverables — an HTML email, a self-contained report.
Offline documents that must work with no external files.
Avoiding a CORS problem where an external image cannot be loaded.

Outside those, it is usually the wrong trade. Modern HTTP/2 and HTTP/3 multiplex requests, so the round-trip saving that justified data URIs a decade ago is much smaller than it was.

The costs, stated plainly

Base64 encodes three bytes as four characters, so the encoded form is about 33% larger than the file. Add the data URI prefix and it is a little more.

The bigger cost is caching. A separate image file is cached once and reused across every page. An inlined one is part of the HTML or CSS, so it is transferred again on every page that contains it and cannot be cached independently.

For a 40 KB image inlined into a stylesheet loaded on fifty pages, the arithmetic is comprehensively against you. That is the case worth checking before inlining anything above a couple of kilobytes.

SVG has a better option

For SVG, URL-encoding rather than Base64 produces a smaller result — SVG is text, so Base64 inflates it needlessly while percent-encoding leaves most characters as they are.

Better still, inline the SVG markup directly in the HTML, which allows CSS to style it.

Base64 for SVG is one of the most common avoidable size mistakes in front-end code, and it also throws away the ability to change the icon colour from CSS.

Frequently asked questions

When should I use a data URI?

For icons under about 2 KB, critical above-the-fold images, single-file deliverables like HTML email, and offline documents. Outside those the caching loss usually outweighs the saved request.

How much bigger does Base64 make an image?

About 33%, since three bytes become four characters, plus the URI prefix. The larger cost is usually caching rather than size.

Why is caching a problem with data URIs?

An inlined image is part of the HTML or CSS, so it is re-transferred on every page containing it and cannot be cached separately. A normal image file is fetched once and reused everywhere.

Should I Base64 an SVG?

No. SVG is text, so Base64 inflates it needlessly. Percent-encoding is smaller, and inlining the markup directly is better still because CSS can then style it.

Is there a size limit?

Browsers handle multi-megabyte data URIs, but you should not. Past a few kilobytes the caching and transfer costs make a normal image file the better choice.