Data URIs: when inlining an asset helps and when it hurts

A data URI embeds a file directly in the document that references it. No separate request, no round trip. That sounds like a straightforward win, and for very small assets it is.

What it costs

• Base64 inflates the payload by about a third before compression.
• The asset can no longer be cached separately. Change one byte of your CSS and the browser re-downloads every image inside it.
• It cannot be fetched in parallel — it is part of a file that must be parsed serially.
• It blocks rendering if it is in a stylesheet, because the stylesheet must be fully downloaded before anything paints.
• It cannot be served in a modern format via content negotiation. You have inlined one format for everyone.

The break-even point

The saving is one HTTP request. Over HTTP/1.1 with six connections per host, that was significant. Over HTTP/2 and HTTP/3, where requests are multiplexed on one connection, an extra request costs very little — so the arithmetic has shifted heavily against inlining since the technique became popular.

As a rule of thumb: under about a kilobyte and used on every page, inlining is defensible. Above a few kilobytes it is almost always a loss. Anything over 10 KB is a mistake worth undoing.

The worst case is a large hero image inlined into a stylesheet. It delays first paint for every visitor and is re-downloaded on every deploy.

Where it genuinely helps

• Tiny SVG icons in CSS — a chevron or a checkmark, a few hundred bytes each.
• A single-file HTML deliverable that must work with no external assets.
• Email templates, where external images are blocked by default anyway.
• Avoiding a flash of missing content for something above the fold and smaller than the request overhead.

SVG does not need base64

SVG is text. It can be embedded directly with percent-encoding instead, which avoids the 33 per cent penalty entirely and compresses far better than base64 does:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…");

Only the characters that would break the CSS need escaping — the quotes, the hash, the angle brackets. Everything else stays readable, which also makes the value editable later.

Measuring rather than guessing

Before inlining, check the compressed size of the document with and without. Base64 compresses poorly because it destroys the byte patterns the compressor was going to exploit, so the real cost is often larger than the 33 per cent figure suggests.