Image to Base64

Image to Base64 (data URI): when to inline, when not to

The structure of a data URI

The conversion result is a data URI, structured as:

data:[media type][;base64],data

It can appear anywhere a URL is accepted: <img src="...">, CSS background-image, a favicon, even as a fetch() argument. The browser treats it as an inlined resource and fires no extra request.

Cost 1 — size grows about 33%

Base64 uses 4 characters to carry 3 bytes, so the encoded size is 4/3 ≈ 133% of the original. A 100 KB image becomes about 133 KB of text.

If the server enables gzip or brotli, the Base64 content inside HTML/CSS compresses by roughly 25%–30% (Base64's alphabet is limited), so the real transfer overhead is below 33% — but it is still larger than sending the binary image directly.

Cost 2 — you lose independent caching

This is the bigger problem, and the easiest to overlook:

So inlining buys "fewer requests" at the cost of "coarser cache granularity and duplication across pages". Under HTTP/2, multiple requests reuse one connection and transfer concurrently, so the "fewer requests" benefit has shrunk a lot — the main reason inlining is recommended less often today than a decade ago.

Cost 3 — no responsive images

Once inlined there is no separate resource URL, so these capabilities all vanish:

• srcset and sizes: no way to serve different images at different resolutions; mobile downloads the desktop-sized copy too.
• <picture> and format negotiation: no way to pick WebP/AVIF by browser support.
• Lazy loading (loading="lazy"): inlined resources arrive with the document, no room to defer.
• CDN image optimization (auto compress, crop, format convert).

Together these mean: valuable for small above-the-fold icons, a clear regression for content images.

When to inline

An extra trick for SVG

SVG is text, so it does not have to be base64 — URL-encoding it (escaping only a few characters like # < >) usually yields a shorter result, because base64 turns 3 bytes into 4 characters while plain text leaves most characters unescaped.

But note: in the URL-encoded form the # must become %23 (otherwise it is read as a fragment identifier), and quotes need handling too. That is the usual cause of "my inlined SVG does not show".

How the tool works

Drag an image in or choose a file to get a copyable data URI; below, paste a Base64 string back to restore and preview the image. When restoring a bare Base64 string (no data: prefix), the tool auto-adds data:image/png;base64, then previews — but this assumes PNG. If the original was JPEG or WebP, the restored image may still display yet carry the wrong MIME type, and the downloaded extension will not match. Keep the full prefix for an exact restore.

The whole conversion runs locally; the image is not uploaded — necessary when handling client assets, internal screenshots or pictures with personal information.