How to use
- Drop a PNG onto the drop area, click to choose one, or paste a screenshot from the clipboard.
- Leave the format unchanged to encode the original PNG bytes, or set a maximum width to shrink a large image.
- Compare the original size with the encoded size shown for the image.
- Copy or download the data URI, raw Base64, img tag, CSS or Markdown output.
PNG and Base64
PNG (Portable Network Graphics, MIME type image/png) is a lossless raster format with a full alpha channel, which makes it the usual choice for icons, logos, diagrams and screenshots. Every PNG file begins with the same 8-byte signature, so every PNG data URI begins the same way: data:image/png;base64,iVBORw0KGgo....
Base64 does not touch the pixels. Decoding the string gives back a file that is identical byte for byte, with the same colours and the same transparent areas.
Good uses for PNG data URIs
- Small interface icons and logos that need a transparent background.
- Screenshots inside self-contained HTML reports, bug reports or exported documentation.
- Charts and QR codes generated on a server and returned in a JSON response.
- Images created with
canvas.toDataURL(), which already produces PNG data URIs by default.
Photos are a different story. PNG stores them losslessly and the files get large; JPEG or WebP will produce a far shorter string.
Make the PNG smaller before encoding
Every byte you remove from the PNG saves about 1.33 characters of Base64. Run the file through an optimiser such as oxipng or zopflipng (lossless) or pngquant (reduces the palette) first. Check the pixel size too: an icon exported at three times its display size can usually be scaled down with the maximum width option.
Converting to WebP keeps transparency and is often much smaller. Converting to JPEG removes transparency, so transparent areas become a solid colour. Re-encoding to PNG in the browser does not optimise compression, so the result can be larger than a well-optimised original; compare the sizes before you copy.
Using the output
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# Command line: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngFrequently asked questions
Does Base64 keep PNG transparency?
Yes. Base64 encodes the file bytes unchanged, so the alpha channel is kept. Transparency is lost only if you convert the image to JPEG.
Why does every PNG Base64 string start with iVBORw0KGgo?
Those characters are the Base64 form of the PNG file signature. If a string that claims to be a PNG starts differently, it is a different format or it is damaged.
Can I paste a screenshot directly?
data:image/png result.How large a PNG should I embed as Base64?
A common rule of thumb is a few kilobytes, up to roughly 10 KB. Larger images are better served as separate files that the browser can cache and load in parallel.