Paste a Base64 string or a data:image/png;base64,… URI to instantly preview the PNG and download it as a real .png file.
PNG is a lossless raster format ideal for icons, screenshots, and graphics with sharp edges or transparency. Base64-encoded PNGs are common in data URIs (CSS backgrounds, inline HTML images), email signatures, and JSON API responses. We detect the PNG signature (89 50 4E 47) automatically — if the decoded bytes are actually a JPEG or other format, we’ll tell you.
PNG files always begin with the signature 89 50 4E 47 0D 0A 1A 0A (bytes 137-80-78-71-13-10-26-10). If those exact bytes are not at the start of the decoded data, the tool flags it as not a valid PNG and shows you what it actually decoded as.
It is not — Base64 inflates data by about 33%, so the Base64 string is larger than the underlying PNG. Decoding shrinks it back. A 1 KB Base64 string decodes to roughly 750 bytes of PNG.
Common sources: CSS background-image data URIs, inline images in HTML emails, API responses that embed images in JSON, browser screenshots saved via canvas.toDataURL(), and binary attachments in MIME messages.
Yes — the "Copy data URI" button gives you a ready-to-paste data:image/png;base64,... string that works as a src attribute or CSS background-image value.
You almost always encounter Base64-encoded PNG strings in one of four contexts. First, CSS background-image data URIs — designers inline small icons or patterns directly into stylesheets to eliminate HTTP requests. Second, inline images in HTML email — many email clients block external images by default, so PNG signatures, logos, and tracking pixels are often inlined as Base64. Third, API responses that embed images in JSON — when a user uploads a profile photo and the server returns the processed result inside a JSON body, Base64 is the standard format. Fourth, browser-generated images — when JavaScript calls canvas.toDataURL() to capture a chart or game state, the result is a Base64 PNG data URI.
PNG files always begin with the same eight bytes: 89 50 4E 47 0D 0A 1A 0A. The first byte (137) is intentionally chosen to fall outside the ASCII range so software can detect a binary PNG even when transmitted through 7-bit text channels. The next four bytes spell "PNG" in ASCII. The remaining bytes are a carriage-return, line-feed, end-of-file marker, and another line-feed — these expose if any file-transfer process has corrupted the line endings (a common issue with FTP and email).
After Base64 encoding, this signature appears as the unmistakable prefix iVBORw0KGgo at the start of every PNG-Base64 string. If your data starts with these eleven characters, it is almost certainly a PNG. Our tool decodes the first few bytes and verifies the signature before showing the preview — if the bytes do not match, we tell you what the data actually decoded as instead.
Inlining a PNG as Base64 makes sense for very small images — under about 2 KB — where eliminating the HTTP request outweighs the 33% size penalty of Base64 encoding. Common good cases: small icons, email signature images, chart thumbnails generated client-side, and single-page printable documents (HTML invoices that must work offline).
Bad cases: images larger than 4 KB (the bandwidth cost exceeds the request cost), images that repeat across multiple pages (you lose HTTP caching — each page must re-download the inlined data), and responsive images (the encoded form locks you into one resolution). Modern HTTP/2 multiplexing also reduces the cost of separate image requests, making inline images less compelling than they were in HTTP/1.1.
The image will not render even though it decodes. Check the bytes after decoding — if they do not start with the PNG signature, the data was either truncated during transfer (often by line-length limits in older systems) or it is actually a different format mislabeled as PNG. Try our Smart Detect tool to identify what you actually have.
The PNG renders but is unexpectedly large. PNG is lossless, so a screenshot of a webpage can easily be hundreds of kilobytes. For photographic content, JPEG is 5–10× smaller. For graphics with transparency, large flat color areas, or sharp edges (logos, icons), PNG is correct. For simple shapes, SVG is much smaller still.
The data URI works in HTML but breaks in CSS. Watch out for line breaks — some CSS parsers reject data URIs that span multiple lines. Strip all whitespace from the encoded string before placing it in a url("data:...") CSS value.