Image to Base64 data URI converter
Convert an image into a Base64 data URI, with ready-to-paste CSS and HTML snippets. Runs locally, so private images stay private.
Runs entirely in your browser — nothing is uploaded.
All processing happens in your browser. Your file is never uploaded.
Base64 inflates data by about 33%, so inlining is only worth it for small images — under roughly 5 KB. Larger ones are better served as separate files that the browser can cache independently.
How to use
- Drop in an image. Format and quality can be adjusted first to keep the string small.
- Copy the data URI. Or take the prepared CSS or HTML snippet instead.
- Watch the size. The encoded length is shown — Base64 adds about a third.
Questions
When is inlining an image worth it?
For small assets — icons, tiny background patterns, roughly under 5 KB — where saving an HTTP request outweighs the size penalty. Above that, a separate file is better because the browser can cache it independently of the page.
Why is the Base64 string bigger than the file?
Base64 represents three bytes as four characters, so it inflates data by about 33%. That is the cost of making binary safe to embed in text.
Does inlining hurt performance?
It can. Inlined images cannot be cached separately, so they are re-downloaded with every change to the CSS or HTML that contains them. They also block rendering of that file while it parses.
Can I use this for SVG?
You can, but you usually should not — SVG is text already, so inlining it directly in your markup or CSS is smaller and lets you style it with CSS.