How do I turn a Base64 string back into an image?
Paste the string into this decoder and click Convert. It accepts a complete data URL such as data:image/jpeg;base64,/9j/... or bare Base64 with no prefix. Either way the tool looks at the decoded bytes to identify the format, labels the result with the right media type, and checks that your browser can actually draw it. The image appears in the preview, and Download saves it with the matching file extension.
Base64 is a way of writing binary data with 64 printable characters, defined in RFC 4648. Every 3 bytes of the image become 4 characters of text, which is why an encoded image is about a third larger than the original file. A data URL, specified in RFC 2397, adds a short header naming the media type so a browser knows what it's looking at.
Steps
- Copy the string from wherever you found it: a CSS
url(), an HTMLsrcattribute, a JSON API response or an email source. - Paste it into the input box. Line breaks and spaces are fine, in bare Base64 or inside a data URL; they're stripped before checking.
- Click Convert. The data URL appears in the output box and the picture shows underneath. If the data isn't an image, you get an error instead.
- Click Download to save it, or Copy to copy the full data URL.
A worked example
This 92-character string is a complete 1 × 1 pixel PNG (68 bytes once decoded):
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=
Paste it and the output is the same text with data:image/png;base64, in front. The preview is a single pixel, which makes it a handy test that the tool and your clipboard are working before you try a long string.
Recognising the format from the first characters
Image files start with fixed "magic" bytes, and those bytes always encode to the same leading Base64 characters. That's how the decoder identifies a string with no prefix, and you can do the same by eye:
| Starts with | Format | Underlying bytes |
|---|---|---|
iVBORw0KGgo |
PNG | \x89PNG signature |
/9j/ |
JPEG | FF D8 FF start-of-image marker |
R0lGOD |
GIF | GIF87a or GIF89a |
UklGR |
WebP | RIFF container |
PHN2Zy |
SVG | an opening svg tag |
PD94bWw |
SVG or other XML | an XML declaration |
Qk |
BMP | BM |
The decoder also recognises AVIF (an ftyp box with the avif brand) and ICO icons, and finds an SVG's opening tag after an XML declaration, comments or a doctype. TIFF, HEIC and other formats browsers can't display aren't accepted.
Mislabelled data URLs get corrected
The label in a data URL is only a claim. If you paste data:image/png;base64,/9j/..., the bytes are really a JPEG, so the output becomes data:image/jpeg;base64,/9j/... and the download is image.jpg. Browsers would often display the mislabelled version anyway, because the WHATWG MIME Sniffing standard lets them identify raster images from their leading bytes, but SVG isn't covered by that sniffing, and code that trusts the label (or a file named .png holding JPEG bytes) can trip over it. Copying the corrected data URL avoids both problems.
What the decoder rejects
| Input | Error or result | Fix |
|---|---|---|
data:text/plain;base64,... or another non-image type |
"Enter a valid image data URL" | Use an image/... type if it really is an image |
A URL-encoded SVG like data:image/svg+xml,%3Csvg... |
"Enter a valid image data URL", since there's no ;base64, part |
Decode it with the URL decoder and save the SVG text directly |
URL-safe Base64 using - and _ |
Rejected | Swap - for + and _ for / |
Valid Base64 that decodes to something other than an image, such as aGVsbG8gd29ybGQ= ("hello world") |
"The decoded data isn't a recognised image..." | Check you copied the right string, from its very first character |
| An image whose start is intact but whose end is missing | "...your browser couldn't decode it", or a partly drawn preview if the browser can show the part that's there | Copy the whole string again; it was cut short |
Padding characters (=) are allowed only at the end, which is where valid Base64 puts them.
Things worth knowing
The Download link names the file after the detected format, so a JPEG saves as image.jpg and a WebP as image.webp. The contents aren't converted: you get exactly the bytes that were encoded. If you actually want a PNG from a JPEG, save it here, then run it through the JPG to PNG converter.
Decoding happens entirely in your browser. Very long strings (several megabytes of text) can make the text box sluggish, but there's no size cap in the code.
For the reverse job, turning a file into a data URL for CSS or HTML, use Image to Base64. If the string you have isn't an image at all, the general Base64 decoder shows it as text.
Last updated