Base64 to Image Converter
Paste base64 text — raw, wrapped in a data: URI, or loaded from a file — and get the image back with format, dimensions and size shown.
The string is decoded locally with atob. Nothing is uploaded and the preview is built in memory.
How It Works
This is the decoder half of the image pipeline: it takes text and turns it back into pixels. The input is cleaned (whitespace, quotes and stray wrappers removed), decoded with the browser's built-in atob into raw bytes, and sniffed for a format before a <img> preview is rendered from an in-memory data URI. Nothing is uploaded — every step is local string and byte handling.
- Data URI anatomy
- A complete data URI is
data:<mime>;base64,<payload>. If the prefix is present, the declared MIME type is trusted first and only the payload after the comma is decoded. If you paste the payload alone, the MIME type is inferred instead — both forms produce the same image. - MIME sniffing by magic bytes
- Without a declared type, the decoded bytes are checked against known signatures:
/9j/-prefixed bytes (FF D8 FF) mean JPEG,iVBOR(89 50 4E 47) means PNG,R0lGODmeans GIF,UklGRstarting a RIFF chunk with WEBP at offset 8 means WebP, andQk0(42 4D) means BMP. Unmatched data is reported as unknown but still downloadable. - Whitespace and padding
- Base64 that arrives wrapped in code often contains newlines, indentation or surrounding quotes. The cleaner strips whitespace and validates the remaining alphabet (
A-Z a-z 0-9 + / =); missing=padding is restored before decoding, and a string that still failsatobis flagged as invalid rather than half-decoded.
Frequently Asked Questions
Why does base64 make the image bigger?
Base64 encodes every 3 raw bytes as 4 ASCII characters, so the text is roughly 33% larger than the binary file. A 90 KB JPEG becomes about a 120 KB string. That overhead is the price of embedding binary data in text formats like CSS, JSON or HTML.
Should I embed images as data URIs or serve them as files?
As a rule: small icons and sprites that must appear with the first paint inline well, saving a round trip. Anything larger is usually better as a real file — separate caching, no 33% bloat in your stylesheet, and data URIs inside CSS are not compressed as efficiently as the original binary by typical gzip/Brotli pipelines.
The preview did not render — what is wrong?
Either the string is not actually an image (wrong bytes after decoding) or it is a format the browser cannot display. The decoder still shows the byte count and lets you download the raw result with a .bin name so you can inspect it with other tools. Re-check that you pasted the whole payload and that a data: prefix, if present, is intact.
Which extension does the download use?
Whichever the format detection chooses: .jpg, .png, .gif, .webp or .bmp, based on the data URI prefix when present or the magic bytes otherwise. If the format is not recognized the file downloads as image.bin — rename it once you know what it is.
Is anything uploaded to a server?
No. Decoding uses the browser built-in atob, and the preview is rendered from an in-memory data URI. Your base64 string never leaves the tab, and the tool works with the network disconnected.