Base64 to Image

What this decoder does that a text decoder cannot

A Base64 string that came from an image decodes to binary, not text, so a general Base64 decoder stops with “not valid UTF-8”. This page decodes the same string to bytes, reads the file signature to find out which of eight image formats it is, reads the pixel size from the header, and hands the bytes to your browser's own image decoder for the preview. The download is the original file, byte for byte, named with the extension the bytes call for.

Before decoding it repairs the ways these strings get mangled in transit: a data: prefix, the <img src="…"> or url(…) it was copied out of, JSON quotes and \/ escapes, line breaks added by an email client, percent-encoding from a query string, the URL-safe alphabet, and missing = padding. Each repair is listed under the preview so you can see why another tool rejected the same input. It does not resize, convert or optimise the image; the bytes out are the bytes in.

Example

Load sample inserts this 157 B PNG as a data URI:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZElEQVR42mNgQAOqya//0xIz4AK0thivQ+htOYYjBtQBA2U53BGjDhiSDsAFaO4AYgFNHEAqoKoDyAXDwwGUglEHjDpg6DtgtBwYFEXxoKiMBkV1PNoiGp4OGO0ZDYrO6UB2zwEFpbp3WQ7rpgAAAABJRU5ErkJggg==

The page decodes it and reports PNG · 32 × 32 px · 157 B, shows a blue square with a white dot, and enables Download image (saved as image.png). The status line reads “Cleaned up before decoding: removed the data: prefix.” Pasting only the part after the comma gives the same result with no status line.

Options explained

• Load sample inserts the data URI above, the same string the Example section shows.
• Clear empties the box and the preview.
• Preview background (Checker, Light or Dark) changes only the backdrop behind the image, not the image. Transparent PNG corners show the pattern through them; a white icon on a transparent background is invisible on Light and obvious on Dark.
• Download image saves the decoded bytes as image.png, image.jpg, image.gif, image.webp, image.svg, image.bmp, image.ico or image.avif, according to the detected format. Ctrl+Enter in the text box does the same.
• Copy data URI copies data:<type>;base64,… rebuilt from the detected type and freshly encoded bytes, so it is clean even if what you pasted had line breaks or the wrong prefix.
• Download as file anyway appears only when the Base64 decoded fine but the bytes are not an image; it saves them as .pdf, .zip, .gz or .bin.
• Decode as text instead → appears when the bytes are plain text and opens them in the Base64 Encode / Decode tool.

Edge cases and common errors

• A wrong prefix is corrected, not trusted. data:image/jpeg;base64, in front of the sample PNG decodes as a PNG and the status line says “The prefix said image/jpeg but the bytes are image/png; the download uses the real type.” image/jpg in front of a real JPEG is accepted as the common alias it is.
• Truncated strings are flagged. The first 60 characters of the sample still carry a valid PNG header, so the page reports 32 × 32 px but warns that the data stops before the PNG end-of-file marker. JPEG and GIF get the same check. If even the header is damaged, the browser's decoder fails and the page says so, with the download still available for inspection.
• Copied from JSON or a database. "data:image/png;base64,iVBORw0KGgoAAAANSU"… with its quotes, or a value where every / became \/, decodes after the quotes and escapes are removed; the status line lists “removed quotes and JSON escapes”.
• Line-wrapped or space-broken Base64 (email, PEM, a wrapped terminal) decodes as-is: whitespace inside the string is ignored.
• URL-safe alphabet and missing padding. The sample with - and _ in place of + and / and no trailing = decodes, with both repairs noted. A string that was percent-encoded for a query string (%2B, %2F, %3D) is decoded first.
• SVG data URIs are often not Base64. data:image/svg+xml,%3Csvg… and data:image/svg+xml;utf8,<svg… are percent-encoded or raw text; both are handled, and the size comes from the width/height attributes or the viewBox; the example above reports 10 × 20 px. SVG is previewed through an <img>, which does not run scripts inside it.
• Text, not an image. SGVsbG8sIHdvcmxkIQ== reports “The Base64 decodes to plain text, not an image” and offers the text decoder.
• Some other file. A Base64 PDF reports “The Base64 decodes to a PDF, not an image”; unrecognised bytes such as /w== report “The Base64 decodes to bytes that are not a PNG, JPEG, GIF, WebP, SVG, BMP, ICO or AVIF image”. Both offer Download as file anyway.
• Invalid Base64. A stray character gives “Input contains characters that are not part of the Base64 alphabet”; a length Base64 cannot produce gives “Input length is not valid for Base64 (one dangling character)”; data:image/png;base64 with nothing after it gives “The data: URI has no comma, so there is no payload after the media type”.
• Empty input shows the empty preview and no error. Multi-megabyte strings decode in well under a second; the preview is scaled to fit the box, and scrolls if you enlarge it.

Do the same thing in code

HTML and CSS

<img src="data:image/png;base64,iVBORw0KGgo…" alt="" width="32" height="32">

.icon { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

JavaScript

// Browser: bytes for a Blob or a download
const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
const blob = new Blob([bytes], { type: "image/png" });

// Node.js: write the file
import { writeFile } from "node:fs/promises";
await writeFile("image.png", Buffer.from(base64, "base64"));

Python

import base64
with open("image.png", "wb") as f:
    f.write(base64.b64decode(data))   # data = the part after the comma

Shell

echo 'iVBORw0KGgo…' | base64 -d > image.png    # Linux
echo 'iVBORw0KGgo…' | base64 -D > image.png    # macOS

To go the other way (a file into a data URI), use Image to Base64. If the Base64 came out of a JWT, the JWT decoder splits and decodes all three segments at once; if it was pasted from a URL, the URL decoder shows the un-escaped form.