Base64 to Image

Base64 encoding is everywhere in web development: embedded images in HTML and CSS, API responses that return image data as strings, email attachments encoded for MIME transport, and data exported from canvas elements. When you encounter a base64 string and need the actual image file — whether to inspect it, edit it in a proper editor, or use it outside a web context — you need a decoder. Running a command-line tool for this is overkill when a single paste-and-click does the job.

The auto-detection feature is what makes this tool practical for real workflows. You might paste a full data URL like `data:image/png;base64,iVBOR...` or raw base64 bytes without any prefix. The tool examines the first bytes of the decoded output to identify whether it is dealing with a JPEG (FF D8), PNG (89 50), WebP (52 49 46), GIF (47 49 46), BMP (42 4D), SVG (text/xml), or ICO (00 00 01 00) file. This means you do not need to know or specify the format in advance.

| Format | Magic Bytes (Hex) | Data URI Prefix |

| --- | --- | --- |

| JPEG | FF D8 FF | data:image/jpeg;base64, |

| PNG | 89 50 4E 47 | data:image/png;base64, |

| WebP | 52 49 46 46 | data:image/webp;base64, |

| GIF | 47 49 46 38 | data:image/gif;base64, |

| BMP | 42 4D | data:image/bmp;base64, |

Paste a full data URL (with the `data:image/...;base64,` prefix) or raw base64 bytes into the textarea.

Click Decode to image — the bytes are parsed locally using the browser's native Image API.

Review the preview, which displays on a checkerboard background to show transparency.

Check the detected format, image dimensions, and decoded byte size.

Click Download to save the image file in its original format (PNG, JPEG, WebP, GIF, BMP, SVG, or ICO).

Create a test by encoding a small PNG to base64 using any online encoder, then paste the result into the tool. Verify that the preview matches the original image, that the format is detected as PNG, and that the dimensions are correct. Next, strip the data URL prefix and paste only the raw base64 string — the tool should still detect PNG and render the image identically. Download the decoded file and open it in a system image viewer to confirm it is a valid, uncorrupted image file.

Including trailing whitespace or newline characters in the pasted base64 string, which causes decoding failures.

Pasting base64 data that is not actually an image — the tool detects format from magic bytes and will report an error for non-image data.

Expecting a specific output format when the tool preserves the original encoded format; if the source was JPEG, the download is JPEG.

Confusing the checkerboard background with actual image content — the checkerboard indicates transparency in PNG and WebP files.

The tool supports anything the browser's native image decoder can handle, which covers PNG, JPEG, WebP, GIF, BMP, SVG, and ICO. Format detection relies on the first bytes of the decoded data rather than any file extension, so even a mislabeled or extensionless base64 string is identified correctly. The checkerboard preview background is the same convention used in Photoshop and Figma to indicate alpha transparency. If the base64 string is invalid or the decoded bytes do not match any known image signature, the tool reports a clear error message rather than producing a broken preview.

Decoding an API response that returns profile pictures as base64 strings instead of image URLs.

Extracting an embedded image from a single-file HTML document or email source.

Converting a canvas-based generated image (exported via `toDataURL`) back into a standalone file.

Inspecting base64 image data from a database dump or log file without writing a script.

Q: Do I need to include the data: prefix?

A: No. If you paste raw base64 bytes, the tool auto-detects the format from the first bytes (JPEG, PNG or WebP) and wraps it in a data URL for decoding.

Q: What formats are supported?

A: PNG, JPEG, WebP, GIF, BMP, SVG and ICO — anything the browser's image decoder can read. The format is detected from the bytes, not the file extension.

Q: Is the decoded image uploaded anywhere?

A: No. Decoding happens entirely in your browser using the native Image and fetch APIs. Nothing leaves your device.

Q: Why is the preview checkerboarded?

A: The checkerboard shows transparency — PNG and WebP with alpha display the transparent areas as grey squares, just like image editors do.

Q: What if my base64 is invalid?

A: The tool reports a clear error if decoding fails. Common causes are trailing whitespace, line breaks in the middle of the base64, or non-image data.

Q: Can I decode multiple images at once?

A: No — the tool processes one base64 string at a time. For batch decoding, you would need to split the input manually and process each one separately.

Try the Base64 to Image tool. See also Image to Base64, Image Converter, and Image Compressor.