Image to Base64
Turn a small image into a data URI you can paste straight into HTML or CSS — and see what it costs you in size.
Free · No sign-up · Your file never leaves your computer
How to use it
- 1
Choose an image. Small ones only — see below.
- 2
Pick raw, a CSS rule, or an HTML tag.
- 3
Copy the result.
When you would use this
A data URI is an image written out as text, so it can live inside an HTML or CSS file instead of sitting next to it. The browser needs no second request: the picture is already there in the markup.
It always makes things bigger. Base64 turns every three bytes into four characters, so the text is roughly a third larger than the file it came from. Every tool that does this presents it as a free win; it is not, and that is the single most useful thing to know before using it. A 2 MB photograph becomes 2.7 MB of characters sitting in the middle of your HTML.
The trade is a request against a cache. Embedding saves one network round trip, which genuinely matters for a tiny icon on a page that is otherwise fast. But an embedded image cannot be cached on its own — it is re-downloaded with the page every single time, and it sits inside the HTML that must arrive before anything at all can render. A linked file is fetched once and then served from cache to every page after it.
So the rule is about size. Under about 5 KB — an icon, a bullet, a small logo — embedding is usually worth it. Above about 20 KB it almost never is. In between, measure.
The other real use is email. Some mail clients block linked images until the reader clicks “show images”, and an embedded one sidesteps that. Some clients strip data URIs entirely — Gmail and most webmail are unreliable here, Apple Mail is usually fine. It is worth a test send before you build a campaign on it.
Questions
- Why is the text bigger than my file?
- Base64 encodes three bytes into four characters, so it is about a third larger than the file. That overhead is the price of embedding, and it is why this is only worth doing for small images.
- When should I actually use this?
- Icons, small logos, and images inside an HTML email where an external file would be blocked. Under about 5 KB it saves a request and is worth it. Above about 20 KB it is almost always the wrong call.
- Why not use it for everything?
- An embedded image cannot be cached separately, so it is re-downloaded with the page every time, and it bloats the HTML that must arrive before anything renders. A linked file is cached once and serves every page after.
- Does it work in email?
- In some clients. Gmail and most webmail strip or refuse data URIs in images; Apple Mail generally accepts them. Test before relying on it for anything that matters.
- Is my image uploaded?
- No. It is read and encoded inside your browser and never sent anywhere.
Related tools
Inlining assets because there is nowhere to put them
Ofivio hosts your project files, drawings and photographs where the people who need them can reach them, so nothing has to be embedded to travel.
See Ofivio