When it is actually worth it
A data URI writes the whole file into the address. You save one request, the character count grows by a third, and the browser cannot cache it separately — every time that CSS file changes, the image is downloaded again with it.
| Situation | What to do |
|---|---|
| A single 2 KB icon | Data URI wins. The request costs more than the image |
| A logo inside an email | Data URI. External images are usually blocked |
| Shipping a single HTML file | Data URI. One file and you are done |
| A photo over 30 KB | Leave it as a file. Caching is worth far more |
| An image used on many pages | File. Fetched once, free thereafter |
Roughly 8 KB is the dividing line. Above it, the result says you are better off leaving it as a file.
Do not use this for SVG
SVG is text already, so Base64 costs you 33% for nothing. The percent encoding in SVG to CSS Background grows it by only 5–10% and compresses far better under gzip.
The leading bytes are trusted over the extension
A JPEG saved as .png is more common than you would think. Label it
data:image/png on the strength of the name and some browsers refuse to draw it. So
the first few bytes are read to determine the real format, and what it was read as is noted under
the result.
Is the file uploaded?
No. The browser reads the file and encodes it on this page. There is no network request at all.
How do I go the other way?
Paste it into Data URI to Image and it shows you the picture and saves it as a file.
Why 33% bigger?
Base64 writes three bytes as four characters, because it slices 8-bit values into 6-bit chunks. It exists to push binary through channels that only carry text, like addresses and email, and the growth is the price of admission.