What is a Base64 image?
Base64 is a way to write binary data, such as the bytes of a picture, using only plain text characters. A Base64 image placed in a data URI looks like data:image/png;base64 followed by a long string. A browser can display that text directly as an image, with no separate file to download.
That makes data URIs useful for tiny icons in HTML or CSS, images inside email templates, single-file HTML pages, JSON payloads and places where you cannot link to a file.
How to convert an image to Base64
- Drop an image onto the box or click to choose one. Files up to 5 MB are accepted.
- Check the preview and the size comparison between the file and its Base64 text.
- Copy the format you need: the full data URI, only the Base64 string, an img tag or a CSS background rule.
- Paste it into your HTML, CSS or code.
- To reverse it, paste Base64 into the decoder at the bottom to preview and download the image.
The size trade-off
Base64 text is about one third larger than the original file, because every three bytes become four characters. A 30 KB image becomes roughly 40 KB of text. Embedded images also cannot be cached on their own, so they are downloaded again each time the page or stylesheet is downloaded.
For that reason data URIs are best for very small images. For larger pictures, a normal image file, ideally compressed with the Image Compressor and served with caching, is almost always faster.
Good uses and bad uses
- Good: small icons, simple logos, background patterns and placeholder images under a few kilobytes.
- Good: HTML email templates and offline single-file pages where external images may be blocked.
- Good: sending a small image inside a JSON API request.
- Bad: large photos, which slow down the page and bloat your CSS.
- Bad: images that appear on many pages, because a shared file can be cached once.
Tips
- Compress and resize the image first, then convert it, to keep the text short.
- SVG icons are often better inlined as SVG code than encoded as Base64.
- Include the right MIME type in the data URI, such as image/png or image/jpeg. This tool does it for you.
- Your image is read in your browser and is never uploaded.
Example: a small icon in CSS
A 1 KB icon can be placed straight into a stylesheet with a rule such as background-image: url(data:image/png;base64,...). The browser reads it with the stylesheet, so there is no extra request and no flash of a missing image. If the stylesheet is cached, the icon is cached with it. This works well for one or two tiny icons, but dozens of data URIs make a stylesheet large and slow, so keep them for the cases where they really help.
When to use a data URI
| Situation | Recommendation |
|---|---|
| Icon under about 5 KB | A data URI is fine |
| Image 5 to 20 KB | Consider a normal file unless you need to avoid a request |
| Image over 20 KB | Use a normal image file |
| Image in an HTML email | Prefer hosted images, but data URIs work in some clients |
Frequently Asked Questions
How do I convert an image to Base64?
Choose the image and copy the Base64 string or data URI that the tool creates.
How do I convert Base64 back to an image?
Paste the Base64 text or data URI into the decoder and download the image.
Why is the Base64 text bigger than the image?
Base64 uses four characters for every three bytes, so it is about 33 percent larger.
Which image types are supported?
PNG, JPG, GIF, WebP, SVG and BMP.
Is there a size limit?
Files up to 5 MB are accepted, but small images work best as Base64.
Does it hurt page speed?
It can, for large images. Use it for small images only.
Is my image uploaded?
No. It is read in your browser and stays on your device.