> base64 | decode | PNG <
// Decode Base64 strings and data URIs back to PNG images — alpha preserved, instant preview, one-click download
Decoded PNG will appear here
Bit-Perfect
Decoded PNG is byte-identical to the original — alpha, palette, and color profile all round-trip intact.
Local Decode
The Base64 payload is decoded in your browser with atob(). No server upload, no logging of your PNG bytes.
Live Preview
See the decoded image, its dimensions, and approximate file size instantly before downloading.
// ABOUT BASE64 TO PNG
What This Tool Accepts
- >Data URI: data:image/png;base64,iVBORw0KGgo…
- >Raw PNG Base64 payload (starts with iVBORw0KGgo)
- >Base64 with embedded whitespace / newlines
- >Standard RFC 4648 alphabet (+/, optional = padding)
- >URL-safe Base64 (-_) — auto-normalised on decode
- >Unicode-aware paste — BOMs are stripped
Common Use Cases
- >Saving a screenshot from a DOM inspector's data URI
- >Extracting a logo from a data-uri CSS background
- >Recovering an image from a JSON API response
- >Restoring an image from a database TEXT column
- >Recovering a PNG from an email MIME part
- >Inspecting an icon embedded inside an inline SVG
- >Debugging a broken <img src="data:image/png;base64,…"> tag
How Base64 → PNG Decoding Works
The decoder strips any data URI prefix, normalises whitespace and URL-safe characters, then calls atob() to convert each 4-character group back into 3 binary bytes. The byte array is wrapped in a Blob with MIME type image/png, given an object URL, and rendered in an <img> element. Because Base64 is bijective with binary, the output is bit-identical to the original PNG — a SHA-256 of the decoded file matches the original.
Example PNG Data URI:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
Performance & Compatibility
- >Decode is O(n) on payload length — handles 100 MB+ without issue
- >Uses the native browser atob() — no heavy JS shim
- >Supports multi-frame APNG when the viewer supports it
- >Works in all modern browsers (Chrome, Firefox, Safari, Edge)
- >Mobile-responsive preview with pinch-to-zoom
- >Download uses a Blob URL — no intermediate server round-trip
// HOW TO DECODE BASE64 TO PNG
Step 1: Paste
Paste the Base64 string or the full data URI into the input field
Step 2: Decode
Click [DECODE] — the PNG is rendered in the preview instantly
Step 3: Inspect
Check dimensions, file size, and alpha channel before saving
Step 4: Download
Click [DOWNLOAD .png] to save a bit-identical PNG to disk
// CODE EXAMPLES — BASE64 TO PNG
JavaScript (Browser)
// Decode Base64 → PNG Blob → download link
const b64 = 'iVBORw0KGgoAAAANSUhEUg...';
const bin = atob(b64);
const arr = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
const blob = new Blob([arr], { type: 'image/png' });
const url = URL.createObjectURL(blob);
window.open(url);Decode a raw Base64 payload into a Blob and open it. For a full data URI, the <img> tag accepts it directly.
Node.js
const fs = require('fs');
const b64 = 'iVBORw0KGgoAAAANSUhEUg...';
fs.writeFileSync('out.png', Buffer.from(b64, 'base64'));One-liner using Node's built-in Buffer to decode Base64 and write a PNG file.
Python
import base64
with open('out.png', 'wb') as f:
f.write(base64.b64decode('iVBORw0KGgoAAAANSUhEUg...'))Standard library only — decode Base64 text back to PNG bytes.
PHP
<?php
file_put_contents('out.png', base64_decode('iVBORw0KGgoAAAANSUhEUg...'));One-liner using the built-in base64_decode() and file_put_contents().
Shell (macOS / Linux)
echo 'iVBORw0KGgoAAAANSUhEUg...' | base64 -d > out.pngPOSIX base64 -d / -D reads text on stdin and writes the decoded PNG on stdout.
// FAQ — BASE64 TO PNG
Q: What is Base64 to PNG decoding?
A: It reverses a Base64-encoded PNG back to its original binary form. The string you paste is 4 ASCII characters per 3 binary bytes; the decoder reads 4 characters at a time, applies the RFC 4648 alphabet lookup, and writes 3 bytes per group until the string is exhausted. The resulting byte array is a complete, valid PNG file that you can preview, save, or ship anywhere a normal PNG is accepted.
Q: How do I know the Base64 string is really a PNG?
A: The first 8 bytes of every PNG are the magic signature 89 50 4E 47 0D 0A 1A 0A. When Base64-encoded, those 8 bytes always start with iVBORw0KGgo. So any Base64 string that begins with iVBORw0KGgo is a PNG. Other formats have different prefixes: /9j/ is JPEG, R0lGOD is GIF, UklGR is WebP. Our decoder auto-detects PNGs from this magic prefix and falls back to the MIME type in the data URI if present.
Q: Can I paste a data URI or only raw Base64?
A: Both. If your string starts with data:image/png;base64,, the decoder strips the prefix automatically. If you paste only the payload portion, we infer the PNG MIME type from the magic bytes. Whitespace, newlines, carriage returns, and tabs are normalised before decoding, so you can paste a pretty-printed JSON response without breaking anything.
Q: The decoded PNG is broken — why?
A: Common causes:
• Truncated string — the Base64 was cut off somewhere (e.g., by a newline limit in your copy source). A complete PNG Base64 ends with RU5ErkJggg== (the IEND chunk); if that is missing, the file is incomplete.
• URL-safe alphabet — if the string uses -_ instead of +/ (base64url), our tool normalises it; other decoders may reject it.
• Double-encoded — the PNG was Base64-encoded twice. Decode it again.
• Not a PNG — the payload is actually JPEG or WebP. Use our generic Base64 → Image decoder which auto-detects any format.
Q: Does decoding back to PNG lose any quality or transparency?
A: No. Base64 is a bit-for-bit reversible transform. The decoded PNG is byte-identical to the original: alpha channel, palette (PLTE), transparency (tRNS), color profile (iCCP/sRGB), gamma (gAMA), and physical pixel dimensions (pHYs) all survive. A SHA-256 hash of the decoded file matches the hash of the original. If you see any difference, the change happened before encoding, not during the Base64 round-trip.
Q: Can I decode Base64 to PNG using the terminal?
A: Yes. On macOS and Linux: echo 'iVBORw0KGgo…' | base64 -d > out.png
(macOS uses -D in older versions.)
On Windows PowerShell: [IO.File]::WriteAllBytes('out.png', [Convert]::FromBase64String('iVBORw0KGgo…'))
If the string is a full data URI, strip the data:image/png;base64, prefix first (most shells accept sed 's|^data:.*base64,||').
Q: How large can the Base64 PNG input be?
A: We decode in the browser, so the limit is your device's memory — comfortably 100 MB+ on desktop. A 100 MB decoded PNG would need ~135 MB of Base64 text, which most browsers paste without complaint. If you are working with very large scientific or medical PNGs, consider server-side decoding instead, because browser atob() performance degrades near the memory ceiling.
Q: Does this decoder work offline?
A: Yes. All decoding uses native atob() + Uint8Array + Blob APIs, which are built into every modern browser. After the page loads once, you can disconnect from the network and continue decoding. No external services, no server round-trip, no analytics on your image payload.
Q: What is the difference between Base64 PNG and a normal PNG file?
A: They contain the exact same bytes. A normal .png file is the raw binary; a Base64 PNG string is that same binary re-written in the 64-character ASCII alphabet. The Base64 form is 33% larger but safe to drop into HTML attributes, JSON strings, CSS url()s, and emails. You cannot put raw PNG bytes into HTML — they contain null bytes and high-bit characters that break text parsers. Base64 is the workaround.
Q: Is a Base64 PNG faster to load than a separate .png file?
A: Only for tiny images. Base64 saves one HTTP round-trip, which can be 50–100 ms on a fresh connection — useful for critical UI icons under 4 KB. For anything larger, a separate .png file served with long-lived cache headers almost always wins because (a) gzip compresses Base64 text poorly, (b) data URIs cannot be cached independently, and (c) they block HTML parsing. Use Base64 for above-the-fold micro-assets, not hero images.
Q: Can I decode Base64 to PNG without uploading the data anywhere?
A: Yes — this tool runs 100% client-side. Your Base64 string is decoded in JavaScript on your device, wrapped in a Blob locally, and displayed via URL.createObjectURL(). Nothing is uploaded. You can verify this by opening the browser dev-tools Network tab while you decode — no requests go out. Running the whole flow offline (airplane mode) also works after the initial page load.
Q: How do I decode Base64 to PNG in production code?
A: In Node.js: fs.writeFileSync('out.png', Buffer.from(b64, 'base64')). In Python: open('out.png','wb').write(base64.b64decode(b64)). In Go: b, _ := base64.StdEncoding.DecodeString(b64); os.WriteFile("out.png", b, 0644). In Java: Files.write(Path.of("out.png"), Base64.getDecoder().decode(b64)). In Rust: std::fs::write("out.png", base64::decode(b64)?)?. In PHP: file_put_contents('out.png', base64_decode($b64)). Every runtime's standard library ships with a Base64 decoder — you rarely need a third-party dependency.
Q: Base64 to PNG vs Base64 to JPG — which decoder should I use?
A: Use Base64 → PNG when the Base64 string starts with iVBORw0KGgo (or the data URI says data:image/png;base64,). Use Base64 → JPG when the string starts with /9j/4AAQ or /9j/2wC. If you are not sure, use our generic Base64 → Image decoder which inspects the magic bytes and picks the right format automatically. Never force a format that does not match the payload — the decoded file will be valid bytes but unreadable.