You see a src attribute thousands of characters long and wonder what on earth it is. Or your CSS breaks and someone says "escape the hash" with no explanation. Data URIs are a small, old standard that behaves in a few surprising ways.
What Is a Data URI? The Short Answer
A data URI puts the file inside the URL instead of pointing at one.
A normal URL is an address. The browser reads it, makes a request, and fetches the file. A data URI skips all of that — the bytes are already there.
One fewer network request, at the cost of a much longer document. The standard is RFC 2397, published in 1998 and unchanged since.
Need to make one? Our image to Base64 converter outputs a ready-to-paste data URI.
Data URI Syntax, Piece by Piece
Four parts, and only the scheme is mandatory.
data:[<mediatype>][;base64],<data>A real one:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...- data: — the scheme, exactly like http: or mailto:.
- image/png — the MIME type telling the browser how to read it.
- ;base64 — says the payload is Base64 rather than percent-encoded text.
- , — the separator. Everything after it is the file.
Leave the media type out and the spec defaults to text/plain;charset=US-ASCII. That is almost never what you meant.
Worse is an empty type — data:;base64, — which happens when a tool reads a file the browser could not identify. Most browsers refuse to render it. Our file to Base64 encoder fills the type in from the extension for exactly this reason.
Data URI vs Base64: Not the Same Thing
Base64 is an encoding. A data URI is a container that may or may not use it.
People use the terms interchangeably and it causes real confusion. You can write a data URI with no Base64 at all:
data:text/plain,Hello%20World
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E...Drop the ;base64 marker and the payload is percent-encoded instead — the same escaping used everywhere else in URLs.
For SVG that is the better choice. Base64 charges a flat 33% on everything, while percent-encoding only escapes the handful of unsafe characters, typically landing 20 to 30% shorter.
Our SVG to Base64 encoder produces both and measures the difference on your actual file.
Data URL Size Limits That Actually Bite
The spec sets no maximum, but browsers impose limits in specific places.
- Address bar navigation is blocked. Chrome and Firefox refuse to load a data: URL typed or linked at the top level. That was an anti-phishing decision, not a size cap.
- Parsing slows down. Very long strings inside CSS measurably delay stylesheet parsing.
- Memory doubles. The encoded string and the decoded bytes both sit in memory.
Our practical rule: under 2 KB inline freely, 2 to 10 KB think about it, above 10 KB use a real file. That has less to do with hard limits than with what your visitors will feel.
The MIME Type Mistakes We See Most
A wrong type is more dangerous than a missing one, because it often still works.
| Mistake | What happens |
|---|---|
| image/jpg | Not a real type. The correct one is image/jpeg. |
| Missing charset on text | Non-ASCII characters render as mojibake. |
| image/svg without +xml | Some browsers refuse to render it. |
| Wrong type entirely | Usually renders anyway, so the bug hides for months. |
That last row is the one that costs time. Browsers sniff content and forgive a mislabelled image, so a server bug can sit unnoticed until something stricter rejects it.
The CSP Rule Nobody Warns You About
A default Content-Security-Policy blocks every data URI on the page.
Content-Security-Policy: img-src 'self'That policy silently kills every inline image you carefully created. The console reports a CSP violation, not a broken image, so the first instinct is to blame the encoding.
Allow the scheme explicitly:
Content-Security-Policy: img-src 'self' data:Do it only where you need it. Allowing data: in script-src or object-src opens a genuine hole, and copying the pattern across directives is how that happens.
Where Data URIs Earn Their Place
Four cases where we still use them:
- Tiny critical icons needed before the first paint.
- Single-file HTML — reports and exports that must work offline.
- Generated one-off images such as QR codes and charts.
- Blurred placeholders shown while the real image downloads.
And the cost, stated plainly: an inlined image cannot be cached separately, so changing one CSS rule re-downloads every image in that file.
Converting a whole stylesheet? The CSS data URI converter does it in one pass and warns when a file is too large to inline safely.
Wrapping Up
A data URI is a file living inside a URL. Four parts, one comma, and a MIME type that matters more than it looks.
Use it for small, urgent, stable assets. Escape your hash characters, name the media type correctly, and check your CSP before blaming the encoding.
More depth in Base64 images in CSS and HTML and in the fundamentals piece on what Base64 encoding is.