Image to Base64
Encode image to base64.
Loading tool…
What is Base64, and why encode an image with it?
Base64 represents binary data using 64 printable characters, so that bytes can travel safely through channels designed for text — email bodies, JSON payloads, HTML attributes, CSS files. Every three bytes become four characters, which means the encoded form is about 33 per cent larger than the original file.
An encoded image is usually written as a data URI: data:image/png;base64, followed by the payload. Embed that in an <img> tag or a CSS background and the image needs no separate HTTP request, because it is already in the document. That is the whole appeal, and also the limit — the inflated size is inlined into every page or stylesheet that uses it, so the technique suits small icons and single-pixel spacers, not photographs.
Why we built this tool
Developers encode images to inline small assets in emails where external images are blocked by default, to embed icons in a self-contained HTML file, to store a picture inside a JSON record, or to avoid an extra request for a tiny asset.
The pictures involved are often unreleased assets or internal screenshots, and encoding is pure local arithmetic with no reason to involve a server. Ours reads the file with the browser's FileReader API and encodes it in the tab, so nothing is transmitted and no copy is retained. There is no size limit beyond your own memory, and because the work is local, encoding a large file does not mean waiting on an upload.
Tips and common mistakes
- Base64 adds about 33 per cent to the file size, so inline only small assets such as icons.
- Data URIs cannot be cached separately from the document that contains them, which hurts on repeat visits.
- Compress the image before encoding; the string length follows the file size directly.
- Inline images are useful in HTML email, where external images are blocked by default.
Quick start: using Image to Base64
- Load the image you want to encode.
- Run the encoding to produce the Base64 string.
- Copy it as a complete data URI if you are pasting it into HTML or CSS.
- Check the resulting length — anything much beyond a few kilobytes is usually better as a normal file.
- Paste it into your document, stylesheet, or payload.
Decode in the other direction with Base64 to Image, and shrink the source first using Compress Image to keep the string manageable.