How to Embed an Image Directly in Your HTML or CSS
An image normally lives in its own file and the page fetches it. A data URI puts the image data inside the HTML or CSS itself, so there is no separate file and no separate request. The Base64 Image Encoder produces the string you paste in.
What you are trading
The gain is one fewer request. For a tiny icon that is a real saving, because the overhead of asking for a 300-byte file is larger than the file.
The costs are three, and they are easy to underestimate. Size: Base64 adds about a third, so a 3 KB icon becomes 4 KB of text inside your stylesheet. Caching: a separate image file is cached once and reused on every page; an embedded one is re-downloaded with every copy of the HTML or CSS that contains it. Readability: a few thousand characters of Base64 in the middle of a stylesheet is something no one can read past.
When it is worth it
Small, decorative, used everywhere: a 1 KB icon, a tiny repeating texture, an SVG arrow in a stylesheet. These are the clear wins.
HTML email is the other genuine case, because many clients block linked images by default while an embedded one displays. And a single self-contained HTML file - a report or an invoice you are emailing - has no other way to carry its pictures.
Above roughly 5 KB, stop. Beyond that the size penalty and the lost caching outweigh the saved request, and a normal image file is simply better.
Practical points
Compress before you encode, not after: Base64 is not compression, so a photo that is already too big becomes a third bigger. Run it through the Bulk Image Compressor first.
A data URI in CSS does not need quoting around the string, but it does need the correct media type at the front, and the whole thing must be on one line - a line break inside it breaks the URI. If your stylesheet now contains several of these, minifying it with the CSS Minifier at least keeps the file tidy.
And prefer a plain inline SVG over an encoded one where you can. SVG is already text, so embedding it directly costs nothing extra and stays editable.
Common questions
Does an embedded image hurt page speed?
For a small icon it helps. For anything large it hurts twice - a bigger initial download and nothing cached for next time.
Can Google index an embedded image?
Not usefully. An image you want found in image search needs to be a real file with a URL and alt text.
Does it work in email?
Better than a linked image in many clients, though a few strip data URIs. Test in the clients that matter to you.
Is my image uploaded to produce the string?
No. The encoding happens in your browser.
Need the string to paste in?