Base64 to PNG Converter

Base64 encoding inflates binary data by approximately 33% due to the 6-bit-to-8-bit mapping (3 source bytes become 4 ASCII characters). Embedding encoded images directly in CSS or HTML avoids an HTTP round-trip but makes payloads heavier and debugging harder. This tool reverses that transformation: it decodes the Base64 stream back into raw bytes, validates the result as a recognizable image, then re-exports it as a lossless PNG via the Canvas API. If the input is malformed or truncated, the decode will fail silently in most editors. Here you get explicit error reporting at the byte level.

The converter accepts both raw Base64 strings and full Data URI strings (e.g., data:image/jpeg;base64,...). It automatically strips the prefix before decoding. Output is always PNG regardless of the original source format. Note: conversion to PNG from a lossy source like JPEG does not restore lost data. The pixel grid is preserved exactly, but no information is recovered. Pro tip: if your Base64 string comes from an API response, verify that transport encoding has not added line breaks or whitespace. RFC 4648 permits line feeds in MIME contexts, but atob in browsers rejects them.

Base64 encoding maps every group of 3 input bytes (24 bits) to 4 ASCII characters (6 bits each). The encoded size is computed as:

where the division is rounded up (ceiling). To reverse this and estimate the decoded binary size from a Base64 string of length L:

where S_encoded = size in Base64 characters, S_bytes = original binary size in bytes, L = length of Base64 string (excluding whitespace), and P = number of padding = characters (0, 1, or 2). The decode pipeline in this tool follows: Base64 string → atob → Uint8Array → Blob(image/*) → Image element → Canvas drawImage → toBlob(image/png).