What a data URI is
It’s a way of putting a file inside the code itself instead of linking to it: data:image/png;base64,iVBORw0….
The browser reads it as if it were a URL, so it works anywhere an image address would go: the src of an
<img>, a CSS url() or a field in a JSON file.
When it’s worth it (and when it isn’t)
Base64 is 33% larger than the original file and can’t be cached separately: if the image lives in your CSS, it’s downloaded again every time the CSS changes. It’s worth it for:
- Small icons and decorations, under a few KB, used on every page.
- HTML emails and single-file documents, where you can’t link to external resources.
- Tiny previews (LQIP) shown while the real image loads.
- Tests and prototypes that have to work offline.
For photos and any large image, a normal file is better, with loading="lazy" and in WebP or AVIF.
SVG: better without Base64
An SVG is text, so it can go into the data URI almost as it is, escaping only a few characters. That “URL-encoded” version is noticeably smaller than Base64 and stays readable. When you convert an SVG, the tool lets you choose.
Privacy
The conversion uses the browser’s FileReader API: the image isn’t uploaded to any server. The test button
downloads a placeholder from the ximg.es generator, such as
https://ximg.es/64x64/2563eb/fff, and converts it just as if it were yours.