Convert PNG to Base64
Encode a PNG as a Base64 string you can paste directly into HTML, CSS, JSON, or a data URI — no separate image request, no upload. Drop a file, pick the wrapping you want, and copy the result. It's all done locally in your browser, so the image never leaves your machine.
Drop a PNG (or any image) here
One at a time · JPG, WebP, SVG also work
When to inline an image as Base64
- Tiny icons and sprites. Inlining a small image saves an HTTP request, which can speed up first paint.
- Self-contained files. A single HTML or SVG that carries its images inside it — handy for emails, exports, and offline docs.
- Config and APIs. Embedding an image in JSON or a data-URI field where a URL isn't possible.
The trade-off to know
Base64 makes the data roughly 33% larger than the binary file, and inlined
images aren't cached separately by the browser. That's fine for small assets, but for anything
big or reused across pages a normal <img src> is faster. Rule of thumb:
inline under a few KB, link everything else.
FAQ
How do I convert a PNG to Base64?
Drop the image above, choose whether you want a data URI, raw Base64, or a ready-made CSS snippet, and click Encode — then Copy. It runs entirely in your browser with no upload.
What's the difference between raw Base64 and a data URI?
Raw Base64 is just the encoded bytes. A data URI prefixes it with data:image/png;base64, so a browser knows it's a PNG — that's the form you paste into src or url().
Can I go back the other way?
Yes — use Base64 to PNG to decode a string back into a downloadable image.
Is the image uploaded to encode it?
No. Encoding happens locally via the browser's FileReader; nothing is sent anywhere.