A data URI embeds a file directly in the document — the image travels inside the HTML or CSS rather than as a separate request. It was a standard optimisation for years, and the reasoning behind it has largely expired.
What it costs
Base64 encodes three bytes as four characters, so the encoded form is about 33% larger than the file. That is inherent to the encoding rather than an implementation detail: it uses 64 printable characters to represent arbitrary bytes, and 64 is 2⁶, so six bits go into each character that could have held eight.
The larger cost is caching. A separate image file is downloaded once and reused on every page that references it. An embedded one is part of the document, so it is re-downloaded with every page and re-decoded every time.
For a logo on one page that is nothing. For a logo on every page of a site it is strictly worse than a separate file.
Why the benefit shrank
Under HTTP/1.1 browsers opened about six connections per host and requests queued behind each other. Removing a request genuinely helped, and techniques like sprite sheets and inlining existed for that reason.
HTTP/2 and HTTP/3 multiplex many requests over one connection. The cost of a second file is now small, and the calculation that justified inlining mostly does not hold.
When it is still the right call
| Situation | Why |
|---|---|
| Small icon in a CSS file | avoids a request for a few hundred bytes |
| HTML email | external images are blocked by default |
| Single self-contained file | no assets to ship alongside |
| Critical placeholder | renders before anything else loads |
A rough threshold from practice: under about 4 KB it is usually worth embedding, over about 10 KB it usually is not, and in between it depends on how often the page is loaded and whether the image repeats.
The SVG exception
For SVG specifically, skip Base64. An SVG is text, so URL-encoding it in CSS produces a smaller result than Base64 of the same file — percent-encoding only expands the characters that need escaping, while Base64 expands everything by a third.
It is also readable in the stylesheet afterwards, which occasionally matters.
Questions people ask
Does encoding recompress the image? It should not. Encoding the original bytes gives a byte-identical image; going through a canvas would re-encode it.
Can I use data URIs in an img tag? Yes, and in CSS url(), and in an SVG image element.
Do they work in email? Mostly not — Gmail and Outlook strip or refuse them. That is the one case where the answer is an attachment.
Is there a size limit? Browsers accept several megabytes, but a data URI that large makes the containing file unparseable by hand and slow to process.
The image to Base64 tool encodes the original bytes and gives you the CSS or HTML form, and base64 encode and base64 decode handle text.