Base64 to Image

Decode base64 data into an image.

A long block of text starting with something like data:image/png;base64, is actually a complete image hiding in plain text form. This tool decodes that string back into a real, viewable and downloadable image file.

Unpacking a data URI back into its original binary form

When an image gets Base64-encoded — whether for embedding in CSS, sending through a JSON API, or storing in a text-only database field — it needs to be decoded back into raw binary image data before it can be displayed, saved as a standalone file, or edited by any typical image tool, since none of those workflows understand or expect a long text string in place of actual pixel data.

How the decoding works

The tool takes your Base64 text (with or without the leading data:image/...;base64, prefix that data URIs typically include, which specifies the image's MIME type) and reverses the encoding process, converting each group of 4 Base64 characters back into the corresponding 3 bytes of original binary image data, reconstructing the exact original image file byte-for-byte.

Where decoding Base64 back to an image is genuinely useful

  • Extracting an image from a JSON API response — some APIs return image data directly embedded as a Base64 string within a JSON payload, and decoding it is necessary to view or save the actual image.
  • Recovering an image embedded in CSS or HTML source — pulling a data-URI-embedded icon or graphic out of a stylesheet or webpage's source code to save it as a standalone, separately editable image file.
  • Debugging image data stored in a database — inspecting or exporting an image that was stored as Base64 text in a database column, to view it directly or migrate it to proper file-based storage.
  • Working with email templates that embed images — extracting and saving images that were embedded as Base64 data URIs within an HTML email template's source.

Frequently asked questions

Do I need to remove the "data:image/png;base64," prefix before decoding? Most decoding tools, including this one, automatically detect and strip that prefix if present, since it's technically metadata describing the MIME type rather than part of the actual encoded image data itself — but the tool works correctly whether you paste the full data URI or just the raw Base64 string.

Will the decoded image be identical to the original, before it was encoded? Yes, exactly — Base64 encoding and decoding is a fully lossless, reversible process with no data loss at any stage, so the decoded image file is byte-for-byte identical to whatever image was originally encoded.

How can I tell what image format a Base64 string represents? If the string includes its data URI prefix (like data:image/jpeg;base64,...), the MIME type right after "data:" tells you the format directly; without that prefix, you'd generally need to decode the data and examine the resulting file's header bytes, which most image tools and operating systems can identify automatically.

Further reading