Base64 to Image

What this tool does

Base64 to Image reverses the Base64 encoding process: you paste a Base64 string or a full data: URI and the tool decodes the bytes, renders a live image preview, and offers a download button. It accepts either form of input — with or without the data:image/...;base64, header — and detects the image format automatically. If the input is malformed or does not decode to a valid image, a descriptive error explains what went wrong.

Why you might need it

Base64-encoded images appear in many places. API responses from AI vision services, image generation APIs, and data export endpoints often return image data as a Base64 string rather than as a file. Configuration files and SVG sources sometimes embed thumbnail images as data URIs. Debug logs, JSON payloads, and clipboard data can all contain Base64 images that need to be inspected or saved.

Previously, recovering the image from a Base64 string required writing a small script or finding a command-line tool. This tool lets you paste the string and immediately see what the image looks like, which is especially useful when troubleshooting an API that returns unexpected or garbled image data.

How to use it

1. Paste your Base64 string or data URI into the text area. The input can be of any length — long strings will scroll inside the textarea.
2. Click Decode & Preview. The tool decodes the bytes and renders the image.
3. Check the preview. The caption shows the detected format and the decoded file size.
4. Click Download to save the image as a file with the correct extension.
5. Click Clear to reset the tool and start with a new input.

Common pitfalls

The most common problem is extra whitespace. Some tools split Base64 output across multiple lines at 76-character intervals. The tool strips all whitespace before decoding, so line-wrapped Base64 is handled automatically.

Another common issue is a truncated string. If the Base64 data was copied from a log file or JSON viewer that truncated long values, the decoded image will be incomplete or the decoder will fail. Make sure you copy the full string, including any trailing = padding characters.

A data URI that contains data:application/octet-stream;base64,... instead of data:image/...;base64,... may decode to binary that is actually an image, but the MIME type mismatch can confuse validators. In that case, paste only the Base64 portion after the comma and let the tool detect the format from the magic bytes.

Tips for best results

When working with AI API responses that return image bytes as Base64, look for the field that contains the string value — it is often named b64_json, data, or image_data depending on the API. Copy the value of that field (without any surrounding quotes) and paste it directly. The tool accepts it without a prefix.

To verify that a Base64 image in an HTML file is rendering correctly, extract the portion after base64, in the src attribute value and paste it here. If the preview looks correct, the encoding is good. If the preview is broken, the issue is in the Base64 data itself rather than in the HTML markup.

For large Base64 strings generated by encoding high-resolution photographs or raw format files, the preview may take a moment to appear because the browser needs to allocate memory for a large Blob. This is normal — the tool validates and displays the image as soon as the browser’s image decoder has finished.