Base64 to Image

Base64 to image: preview and download

The Base64 to image decoder shows you what picture is hiding inside a Base64 string. Paste a raw Base64 value or a full data:image/…;base64, URI from HTML, CSS, JSON or a database, and the tool decodes it, identifies the real image format from the file signature, shows a preview and lets you download the file.

Example

Input:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==

Output:

Type: image/png
Size: 70 B (70 bytes)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==

The Preview view then displays the image on a checkerboard background, so transparent areas are visible.

Supported formats

The format is detected from the decoded bytes; the label in the data URI is used only when the bytes match none of the signatures above. If a data URI claims to be a PNG but contains a JPEG, the download still gets the correct .jpg extension — a common issue with images saved by various tools.

How big is the image inside the string?

Base64 stores 3 bytes in 4 characters, so the encoded text is about 33% larger than the image itself. To estimate the file size before decoding, multiply the number of Base64 characters (without the data: prefix) by 3/4 and subtract one byte for each = at the end. A 1,000,000-character string therefore holds roughly 750 KB of image data.

This matters when you find inline images in HTML, CSS or JSON. Embedding makes sense for small icons and placeholders of a few kilobytes, because it saves a request. Larger photos are better served as normal files: they can be cached separately, loaded lazily and compressed by the server, while a Base64 copy is re-downloaded with every page or API response that contains it. Decode such images here, save them, and reference the file instead.

Troubleshooting

• “not a recognised image”. The data decodes, but it is not one of the formats above — perhaps a PDF, a different file, or text. Use the Base64 Decoder to inspect it.
• “Invalid Base64”. The string contains characters such as quotes, commas or \n escapes from JSON. Copy only the Base64 value itself.
• Broken or partial image. The string was truncated; very long values are often cut off by logs and database viewers.

Copying Base64 out of code

When you copy an image string from HTML, take only the value of the src attribute. From JSON, watch for escaped slashes (\/) added by some encoders — remove the backslashes first. From CSS, copy what is inside url("…"). Logs and database tools may truncate long values, so check the length if the image appears cut off.

Safety

Images are shown in an isolated preview, and SVG images displayed this way cannot run scripts. As with any file from an unknown source, be careful where you use a downloaded image. To convert images into Base64, use Image to Base64; for non-image data, the Base64 Decoder handles any file type. All decoding runs in your browser.

Convert Base64 to an image in Python

The base64 module in the standard library does the decoding: base64.b64decode() returns the image as bytes, which you write to a file opened in binary mode ("wb"). The usual mistake is passing a whole data URI. The data:image/png;base64, prefix is not part of the image, and because its letters are valid Base64 characters they are decoded as well, which ends in a padding error or a corrupt file. Split the string at the first comma and decode only what follows.

import base64

data_uri = ("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ"
            "AAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==")

# keep only the part after the comma; a raw Base64 string has no prefix
b64 = data_uri.split(",", 1)[1] if data_uri.startswith("data:") else data_uri
image_bytes = base64.b64decode(b64)

with open("pixel.png", "wb") as f:   # "wb": image data is bytes, not text
    f.write(image_bytes)

print(len(image_bytes), "bytes written")
print("PNG signature:", image_bytes[:8] == b"\x89PNG\r\n\x1a\n")

Paste the same string into the decoder above for a quick check of the image type, its size in bytes and a preview before you write the file.