What is a data URI?
Normally a URL is an address that points to a resource: a browser reads it, then goes and fetches the file. A data URI turns that idea inside out — the resource is the URL. The entire contents of a small file are encoded and written directly into the link itself, so there is nothing extra to download. You will most often see one used as the src of an image or as a background image in CSS, letting a page carry its own pictures inline.
What does the syntax look like?
The structure defined by the standard is data:[mediatype][;base64],<data>. It begins with the data: scheme, followed by an optional media (MIME) type such as image/png or text/plain, then an optional ;base64 flag, a comma, and finally the data itself. A real inlined PNG therefore starts with data:image/png;base64, and is followed by a long run of Base64 characters. If you omit the media type it defaults to text/plain, and without the ;base64 flag the data is treated as plain, URL-encoded text rather than encoded binary.
How does Base64 fit in?
Images are binary, but a URL has to be safe text. That is where Base64 comes in: it re-expresses raw bytes using a 64-character alphabet of letters, digits, and a couple of symbols, so the result can sit cleanly inside markup. The ;base64 marker in the URI tells the browser to decode that text back into the original bytes before rendering. You can produce this string yourself — for example, you can convert a PNG to Base64 and paste the result into your code, or turn a Base64 string back into a PNG to recover the file.
What are the pros and cons?
The headline benefit is one fewer request: because the image travels with the document, the browser doesn't open a separate connection to fetch it, which can speed up pages built from many tiny assets. The costs are real, though. Base64 inflates the data by about 33 percent, and the inlined content can't be cached on its own — it is re-downloaded with every copy of the HTML or CSS that contains it. Large data URIs also bloat your source files and are awkward to read or update by hand.
When should you use a data URI?
Reach for one when an asset is small and stable: a tiny icon, a CSS background pattern, or an image inside an HTML email where external files may be blocked. In those cases, skipping a request outweighs the size penalty. For anything large, frequently reused across pages, or likely to change, a normal linked file wins — it can be cached once and shared everywhere. To experiment with inlining your own images, start with our free conversion tools.
Frequently asked questions
- Is a data URI the same as Base64?
- Not quite. Base64 is the encoding that turns binary data into safe text. A data URI is the wrapper around it — a full data: URL that adds the media type and the ;base64 marker so a browser knows how to decode and display the embedded content.
- Why are data URIs bigger than the original file?
- Base64 encoding uses four characters to represent every three bytes, which adds roughly 33 percent. With markup and CSS overhead on top, an inlined image is always larger than the binary file it came from.
- Can data URIs be cached by the browser?
- Not on their own. Because the data lives inside the HTML or CSS that references it, it is downloaded again every time that document loads and cannot be cached separately like a normal image file with its own URL.
- When should I use a data URI?
- They shine for small, rarely changing assets — a tiny icon, a background pattern, or an image in an email — where saving a network request outweighs the size penalty. For large or frequently reused images, a normal linked file is better.