Base64 to PNG

How to convert Base64 to PNG

1. Paste the Base64 or the full data:image/png;base64,... URI into the box. A .txt file with the string can be opened or dropped instead.
2. Check the status line: it should say Valid Base64 and Detected PNG. The preview shows the image and its pixel size.
3. Change File name if needed. Extension is already png.
4. Press Download file.

If the data turns out to be another format, a note appears above the preview, for example “This looks like JPEG, not PNG”, with a Download as .jpg button. Renaming does not convert anything, so saving under the real extension is usually the better choice.

Where PNG Base64 comes from

PNG is the default output of many tools that hand you images as text:

• canvas.toDataURL() in browsers returns a PNG data URI unless you ask for another type. Signature pads, drawing apps and chart libraries that export images build on it.
• Browser automation: Selenium’s get_screenshot_as_base64() and Puppeteer’s page.screenshot({ encoding: "base64" }) return PNG screenshots as bare Base64, without a prefix. Test reports often embed them in JSON or HTML.
• APIs for QR codes, barcodes, captchas, maps and image generation commonly return PNGs in a JSON field.
• HTML and CSS with inline icons, and single-file exports of reports and notebooks.

All of these paste straight in. Line breaks, a missing = at the end and URL-safe characters are tolerated; the status line notes when padding was added.

Reading the PNG header

A PNG starts with an 8-byte signature followed by the IHDR chunk, which holds the image’s basic properties. Press Show hex dump to see them. For a 120×40 image with transparency the first two lines are:

00000000  89 50 4e 47 0d 0a 1a 0a  00 00 00 0d 49 48 44 52  |.PNG........IHDR|
00000010  00 00 00 78 00 00 00 28  08 06 00 00 00 35 ea 3e  |...x...(.....5.>|

The color type tells you what kind of PNG you have: 00 grayscale, 02 RGB, 03 palette (indexed), 04 grayscale with alpha, 06 RGB with alpha. A palette PNG from an optimizer is often much smaller than an RGBA one, which is good to know when the Base64 has to be short.

If the dimensions look absurd, such as a width of several million pixels, the bytes after the signature are damaged and the preview will fail.

Check a PNG in code

The same header fields can be read in a few lines of Python without any image library. The split on the comma makes it work for bare Base64 and data URIs alike:

import base64, struct

def png_info(b64: str) -> dict:
    data = base64.b64decode(b64.split(",", 1)[-1])
    if data[:8] != b"\x89PNG\r\n\x1a\n":
        raise ValueError("not a PNG")
    width, height, depth, color_type = struct.unpack(">IIBB", data[16:26])
    return {"width": width, "height": height, "bit_depth": depth, "color_type": color_type}

To write the file in Node.js, fs.writeFileSync("shot.png", Buffer.from(b64, "base64")) is enough. Node’s Base64 decoder skips line breaks and also accepts URL-safe characters. More in Base64 in Python and Base64 in Node.js.

When the PNG will not decode or display

• “Invalid character” error. Something other than Base64 is in the string: a JSON escape such as \/, an HTML entity, or the rest of a log line. The error gives the position, and Repair Base64 cleans the usual suspects.
• The image is partly drawn or missing. The string was truncated. A complete PNG ends with an IEND chunk; compare the Size with the original file if you know it.
• “Doesn’t look like PNG”. The bytes do not start with the PNG signature at all. This is typical of encrypted data, a different encoding such as hex, or Base64 that was encoded twice, in which case Decode again appears.
• The preview works, but another program rejects the file. Compare the SHA-256 shown here with the hash of the file the program received. If they match, the decoded file is correct and the program is at fault.

To go the other way and encode a PNG, use PNG to Base64.

FAQ