PNG to Base64 Converter
Up to 10 MB. Nothing is uploaded — the file never leaves your device.
Use this in an <img src> attribute or a CSS url().
Without the data: prefix — for JSON payloads and APIs.
Your files stay private
This conversion runs entirely inside your browser. The image is never uploaded, so nothing you encode here reaches our server or anyone else.
About Converting PNG to Base64
PNG is the format people inline most often — icons, logos, small sprites, the little pieces of interface that would otherwise each cost a separate network request. Encoding one to Base64 turns it into text you can paste directly into a stylesheet or an HTML attribute. Whether that is a good idea depends almost entirely on how small the file is.
How to convert PNG to Base64
- 1 Drop your .png file onto the upload area.
- 2 The result appears immediately — there is no button to press and nothing to wait for.
- 3 Copy the form you need: the data URI for HTML and CSS, the raw string for JSON, or the ready-made CSS rule.
When inlining actually pays off
Every separate image on a page costs a request, and a request has overhead beyond the bytes it carries. For a 1 KB icon that overhead can outweigh the file itself, so folding it into the stylesheet is a genuine win. As a rough rule, inlining helps below a few kilobytes and starts hurting above ten. The break-even is not a fixed number — it moves with your connection, your server and how many other things are competing for bandwidth — but the shape of the trade is always the same: you trade a round trip for extra bytes.
What you give up
Three things, and the second one surprises people. First, size: the encoded text is about a third larger than the file. Second, caching: an inlined image cannot be cached separately, so it is re-downloaded with every change to the stylesheet that contains it — and a stylesheet changes far more often than a logo does. Third, the browser must decode the string before it can paint, which is trivial for an icon and measurable for anything big. Transparency, at least, survives untouched; the alpha channel is part of the PNG data and Base64 copies it byte for byte.
Consider SVG first for icons
If what you are encoding is a flat icon or a simple logo, an SVG will usually be smaller than the PNG before encoding and smaller still afterwards, because SVG is text already and needs no Base64 at all. It also scales to any screen density without a second file. Reach for PNG when the artwork has photographic detail, soft gradients or effects that vectors handle badly — and when it does, keep it small before encoding rather than after. Base64 will faithfully enlarge whatever you hand it.