Image to Base64 and back
Convert images to data URIs for embedding and decode Base64 back to an image. All local.
To detect the type when decoding Base64 without a prefix, the header bytes are read (PNG, JPEG, GIF, WebP, BMP, ICO). A Base64 data URI is roughly 33% larger than the original binary file.
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
Embedding a small image as a data URI saves an HTTP request and simplifies a snippet, but Base64 is about 33% larger than the original binary, so it pays to know how much it weighs before deciding. This tool converts any image to its data URI, shows the exact overhead and lets you copy either just the Base64 or the full value with the data: prefix. In the other direction, it turns Base64 strings back into a downloadable image, detecting the format from the first bytes when there is no prefix, which is common when copying from JSON or a database.
Features
- ✓Image to Base64 data URI in one click
- ✓Option to copy only the Base64, without the data: prefix
- ✓Stats for original size, Base64 size and percentage overhead
- ✓Decode a data URI or raw Base64 without a prefix
- ✓Format detection from header bytes (PNG, JPEG, GIF, WebP, BMP, ICO) and image download
How do I convert an image to Base64 and decode it back?
- 1
Choose the direction
Image to Base64 to embed, or Base64 to image to recover it.
- 2
Load or paste the content
Select an image or paste a Base64 string or data URI.
- 3
Copy or download
Copy the data URI for your CSS/HTML or download the decoded image.
- 4
Mind the overhead
Check the extra percentage before embedding large images.
Frequently asked questions
When should I embed an image as Base64?
For very small images (icons, logos under a few KB) used in CSS or an email, where saving a request matters. For large images it backfires: Base64 is 33% bigger, is not cached separately and blocks HTML rendering.
Why is Base64 larger than the original file?
Because it encodes every 3 binary bytes into 4 ASCII characters, with padding at the end. That gives a theoretical 33.3% growth, which is the overhead shown.
How does it detect the format if I paste only the Base64?
It decodes the first bytes and looks for known signatures: PNG (89 50 4E 47), JPEG (FF D8 FF), GIF (47 49 46), WebP (RIFF…WEBP), BMP (42 4D) and ICO (00 00 01 00). If it recognizes none, it reports that the input is not a supported image.
Are my images uploaded?
No. Conversion and decoding use the File API and local browser functions. Nothing leaves your device.
Related tools
Embed Image to Base64 on your site
Add Image to Base64 to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/base64-image"
width="100%"
height="700"
frameborder="0"
title="Image to Base64 — miguelacm.es"
></iframe>