Image to Base64 Converter

When inlining an image is worth it

A data URI embeds the image directly in your HTML, CSS or JSON instead of referencing a separate file. The benefit is one fewer HTTP request. The cost is roughly 33 per cent more bytes and the loss of independent caching.

That trade-off used to favour inlining far more than it does now. Under HTTP/1.1 each request carried real overhead, so bundling small assets was a genuine win. HTTP/2 and HTTP/3 multiplex requests over one connection, which removes most of that cost. Inlining is therefore a narrower optimisation than it was.

Where it still earns its place: very small images, under a couple of kilobytes, where the request overhead genuinely exceeds the encoding overhead; critical above-the-fold assets such as a logo, where eliminating a round trip improves perceived load; email templates, though note that Gmail strips data URIs in images, so this is less reliable than it appears; single-file deliverables such as a self-contained HTML report; and placeholders, where a tiny blurred version is inlined while the real image loads.

Why inlining large images backfires

The failure mode is specific and worth understanding, because the damage is invisible until you measure it.

Caching is destroyed. A separate image file is cached by the browser and reused across every page. Inlined in a stylesheet, it is re-downloaded whenever that stylesheet changes — and a stylesheet changes far more often than a logo does.

Rendering is blocked. CSS is render-blocking. A 200 KB image inlined into your stylesheet means the browser must download 200 KB of extra CSS before it can paint anything at all.

Parsing costs more than you would guess. Base64 must be decoded before the image can be used, and on low-end mobile devices decoding a large data URI is measurably slower than decoding the original binary.

Compression works less well. Base64 text does gzip, but a Base64-encoded JPEG compresses far worse than the JPEG did, because the encoding has already destroyed the byte patterns compression relies on.

A practical threshold: inline below about 5 KB, think carefully between 5 and 10, and do not inline above that. For anything larger, an ordinary image file with proper cache headers wins on every measure.

SVG deserves different treatment

SVG is text, so Base64-encoding it is usually the wrong move. A URL-encoded SVG data URI is both smaller than the Base64 version and remains human-readable in the source, which means you can still edit a colour without re-encoding the whole thing.

Base64 adds 33 per cent to any input. URL-encoding an SVG typically adds far less, because most of an SVG's characters need no escaping at all. For icons, which are the most commonly inlined SVGs, the difference is meaningful.

The SVG to data URI converter handles this properly, producing the minimally-escaped form and showing the saving against Base64. Use this tool for raster images and that one for SVG.

How to use the Image to Base64 Converter

1. Drop in your image

   Any format the browser can read. The file is processed locally and never uploaded.

2. Check the size cost

   The encoded size is shown against the original. If it is over about 5 KB, an ordinary image file is probably the better choice.

3. Copy the snippet you need

   HTML img, CSS background-image, the raw data URI, or a JSON-escaped string.

4. Paste it into your project

   For CSS, remember that the inlined bytes become part of a render-blocking resource.

Frequently asked questions