Convert PNG to Base64
For transparent icons and UI assets: encode a PNG and get exactly the string your stylesheet or JSON payload needs.
The image is read locally with FileReader. Nothing is uploaded.
When you need this
- Inlining a transparent icon into CSS so it can be recoloured or used without an extra request.
- Embedding a UI asset in a component library's theme file.
- Producing a test fixture that carries an image without a binary attachment.
Why other Base64 converters fail here
Some always emit a JPEG MIME in the prefix, so a transparent PNG gets announced as image/jpeg and browsers behave unpredictably.
Others strip the PNG's transparency while 'optimising', which defeats the entire reason for using PNG.
Output frequently comes back with no prefix at all, which is exactly the thing you cannot use in a src attribute.
Frequently asked questions
Does the conversion preserve transparency?
Yes, byte for byte. Nothing in the encode path touches pixel data — the file is read as an array buffer and Base64-encoded. The preview shows a checkerboard behind the image so you can confirm transparent regions really are transparent.
The prefix says image/png but my browser treats it oddly.
Check whether the prefix matches the real file. This tool writes the MIME from the file's actual type, not from the extension. A .png file that is secretly a JPEG will be labelled image/jpeg, which is the correct and useful behaviour.
Should I use a Data URI or a separate file for PNGs?
Small transparent icons: Data URI, because the extra request costs more than the extra bytes. Photographs or anything above a few kilobytes: a real file, because Data URIs cannot be cached independently, cannot be lazy-loaded, and block the parser while they are being decoded.
Can I encode several PNGs and download them together?
Yes. Select multiple files and the batch view encodes each one and lets you copy or download them individually, or take the whole set as a single text bundle.