What you are trading
A data URI puts the image inside the document, so the browser never makes a second request for it. That removes a round trip, which is worth something for a tiny icon above the fold.
The cost is that base64 is about 33% larger than the binary it encodes, and an inlined image cannot be cached separately — it is re-downloaded with every copy of the page or stylesheet that contains it, and it changes only when the whole file does.
When it is the right call
Small and stable: icons under a few kilobytes, a placeholder that appears while a real photograph loads, a logo in an HTML email where external images are blocked by default. Also anywhere a file simply cannot be referenced — a single-file report, a JSON payload, a bookmarklet.
Not for photographs, and not for anything reused across pages. An SVG icon inlined as markup usually beats the same icon as a base64 PNG on both size and sharpness.
Using it
In CSS: background-image: url(data:image/png;base64,…). In HTML the same string goes in src. Both forms are given ready to copy.
The string has no line breaks, because a line break inside a CSS URL breaks it. Some older email clients cap the length of a single line, which is another reason to keep inlined images small.
Frequently asked questions
Does base64 make the image smaller?
The opposite — about a third larger. What it saves is a network request, not bytes. Compress the image first if size matters.
When should I inline an image?
Small, rarely-changing images: icons, placeholders, logos in HTML email. Not photographs, and not anything shared across several pages, which would be cached once as a file and re-sent every time as a data URI.
Why is my CSS broken after pasting it?
Usually a line break inside the URL. The string produced here is one continuous line; keep it that way, and quote it if your build tool is fussy.
Is my image uploaded?
No — the encoding happens in your browser, so an unreleased asset does not leave your machine.
Something wrong with this tool, or an idea for it? Tell us