How to use the Image to Base64 converter
Encode: drop an image onto the page or click the drop zone. The tool reads the file, converts it to Base64, and shows the result in the format you choose. Copy it into your code.
Decode: switch to the decode tab, paste a Base64 string or data URL, and click Decode. You can preview the image and download it as a file.
Everything happens in your browser. Nothing is uploaded.
What is Base64?
Base64 is a way of encoding binary data — like the bytes of an image file — as text using only 64 safe ASCII characters: A–Z, a–z, 0–9, + and /. This lets binary data travel through text-only systems like HTML, CSS, JSON, XML, and email.
A Base64 data URL looks like this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…
The part before the comma is the MIME type. The part after is the encoded image bytes.
The 33% overhead
Base64 uses 4 characters to encode every 3 bytes of data. That means a Base64-encoded file is always about 33% larger than the original binary. On top of that, the browser has to decode it before it can display the image — extra CPU work that delays rendering.
So Base64 images are not free. They're a trade-off.
When to use Base64 images
Good uses:
- Small icons and logos — under 2 KB, saves an HTTP request
- Single-file HTML reports — everything in one document, no external files
- Emails — some clients block external images, but data URLs always show
- Email signatures — logos survive forwarding
- CSS sprites for tiny decorative elements
- Favicons — can be inlined in HTML
- Config files — for tooling that expects a data URL
Bad uses:
- Large photos — a 500 KB JPEG becomes 667 KB of Base64 text, blocking HTML parsing
- Repeated images — every occurrence duplicates the data
- Images that change often — cannot be cached separately from HTML
- Photographs on content pages — bloats the page and hurts Core Web Vitals
Output formats explained
| Format | What you get |
|---|---|
| Data URL | data:image/png;base64,AAAA… — the complete string, ready to use anywhere |
| Raw Base64 | Just the encoded bytes, no prefix. Use when the context already knows the type |
| CSS | background-image: url('data:image/png;base64,…'); |
| HTML img | <img src="data:image/png;base64,…" alt=""> |
| Markdown |  |
| JSON | An object with name, type, size, dataUrl |
Common questions
What is a Base64 data URL?
A Base64 data URL is a way of embedding an image file directly in HTML, CSS or JSON. It starts with data:image/png;base64, followed by the encoded bytes of the image.
When should I use Base64 images?
Base64 is useful for tiny images (icons, logos under 2 KB) to save an HTTP request. For larger images it bloats the HTML by about 33 percent and slows down parsing, so it is not recommended.
Can I decode a Base64 string back to an image?
Yes. Paste the Base64 string or data URL into the decoder and download the resulting image file.
Does Base64 compress the image?
No. It actually makes the file about 33% larger because it uses 4 characters for every 3 bytes of data. Base64 is an encoding, not a compression.
What's the size limit for a Base64 image?
There's no hard limit, but avoid Base64 for anything over 5 to 10 KB. Beyond that, the browser pays a noticeable performance cost parsing and decoding it.
Does it work with SVG?
Yes. SVG can be Base64-encoded, though for SVG it's often better to inline the raw SVG markup instead since it's already text.
Can I use Base64 in a database?
Yes, and it's a common pattern for small images. But most databases handle binary data natively (BLOB, BYTEA), which is more efficient. Use Base64 in a database only if you have a specific reason.
Is my data uploaded?
No. Everything runs in your browser. Your images never leave your device.