Understanding data URLs
Files, smuggled into a string.
A whole image, font, or stylesheet inlined in one line — when to use it, when not to.
What a data URL is.
A data URL is a URL whose body is the resource itself. It starts with data:, names a MIME type, optionally says ;base64, and then carries the bytes — either percent-encoded or Base64-encoded. Browsers, image decoders and most HTML/CSS pipelines treat a data URL exactly the same as any other URL; the resource simply doesn't go over the network.
data:[mediatype][;base64],<data>
A worked example.
A 1×1 transparent PNG is 67 bytes raw. Encoded as a data URL it becomes a 96-character string you can paste into a CSS background-image or an HTML src attribute. No second HTTP request, no race with the page load.
A 1×1 PNG, inlined
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEA…
The Base64 wrapper inflates the file by ≈33%, but it travels as text.
67 bytes → ≈90 ASCII characters
= One self-contained line
When inlining helps.
Inlining a resource avoids one round-trip and one entry in the waterfall. For tiny critical assets — a sub-kilobyte SVG icon used immediately, a CSS background that has to be there before the page paints — that can be the difference between a snappy first paint and a visible flash. CSS preprocessors and bundlers all expose a "below this size, inline; above it, emit a file" knob for the same reason.
When inlining hurts.
Anything bigger than a few kilobytes is better off as a regular asset. Inlined bytes can't be cached separately — every page that uses the same logo redownloads it as part of the HTML. They also can't be parallelised; the browser is already chewing through the document while the rest of the page wants to start. And Base64 inflates the bytes by a third, which on slow connections is real cost.
Three places they shine.
Email — many clients block external images, but inline data URLs paint immediately. Self-contained HTML — a single file you can email, archive, or open offline. Tooling — code that generates a downloadable file in the browser builds a data URL (or a Blob URL) and sets it as the href of an anchor tag. That's how nearly every "download CSV" button on a static page works.
Watch the limits.
Browsers used to limit data URLs to a few kilobytes; modern ones go much higher (Chrome and Firefox accept multi-megabyte URLs), but server-side parsers, log lines and database fields may not. A data URL inside a query string is asking for trouble — they're long, they break log truncation, and they can push a request past path-length limits. Inline data URLs live happily in HTML attributes, CSS files and email signatures; everywhere else, prefer a real link.
Read next