Home / Image tools / image to Base64
Developer
Image to Base64
Encodes an image as a data URI you can paste straight into a stylesheet, a template or a JSON payload. It also tells you how much bigger the string is than the file, which is the part most converters leave out.
Output
The 33% tax
Base64 represents three bytes of binary using four characters of text, so a data URI is always about a third larger than the file it encodes, plus a short prefix. A 30 KB PNG becomes roughly a 40 KB string. That cost is worth paying in exactly one situation: when avoiding a separate network request saves more than the extra bytes cost.
When inlining is a good idea
- Small icons and textures under about 4 KB, embedded in CSS, where a round trip would cost more than the payload.
- Images inside a single-file HTML document that has to work with no other assets.
- Sending an image through an API that only accepts JSON.
- Email templates, where external images are often blocked by default.
When it is a bad idea
Anything large, and anything used on more than one page. An inlined image cannot be cached separately, so every page that includes it pays the full cost again. It also blocks rendering when it sits inside a stylesheet, because the browser must parse the whole file before it can paint. Above roughly 4 KB, a normal file reference with proper cache headers wins.
Common questions
Can I convert Base64 back into an image?
Yes. Paste the data URI into a browser address bar and it will display, then save
it normally. Any string beginning data:image/ works this way.
Does it work with SVG?
It does, and SVG is one of the better candidates for inlining because it is small. For CSS use, URL-encoding an SVG is usually more compact than Base64, though Base64 is safer against stray characters.
Is my image sent anywhere to be encoded?
No. The encoding is done by the browser's own FileReader. That is also why very large files can make the tab pause for a moment.
Other image tools