CodesBeautify

PNG to Base64 Converter

Turn a PNG into a Base64 data URI, a CSS rule or an img tag without the file leaving your device.

PNG file

Drop a file here, paste from the clipboard, or choose one

PNG, processed in this tab

Base64
Runs locally in your browser

About the PNG to Base64 Converter

PNG is the format of choice for logos, icons and screenshots because it keeps sharp edges crisp and supports an alpha channel. Those are exactly the images that are small enough to inline, and inlining removes one network round trip from the critical path of a page or an email.

Drop a file on the pane, paste one from the clipboard or click to browse, and the encoded form appears in whichever shape you need. The data URI is the plain address, the CSS variant is a complete background-image declaration, the HTML variant is an <img> tag with an alt attribute already filled from the file name, the Markdown variant suits documentation, and the JSON variant records the name, type and size alongside the Base64 for an API call.

The MIME type is taken from the file signature rather than the extension, so an image saved with the wrong suffix still produces a working data URI. The status line reports the original size and the encoded length, which is the number to watch: encoding adds about a third, and beyond roughly ten kilobytes a normal image file that the browser can cache separately is the better choice.

For the reverse trip use Base64 to Image, and for other formats use JPEG to Base64 or WebP to Base64.

How to use

  1. Drop a PNG onto the panel, paste one from the clipboard, or click to choose a file.
  2. Pick the Output as shape you need: data URI, CSS, img tag, Markdown or JSON.
  3. Copy the result into your stylesheet, template or request body.

Common questions

Is transparency preserved?
Yes. The file bytes are copied unchanged, so the alpha channel survives exactly as it was saved.
How large a PNG is worth inlining?
Roughly ten kilobytes or less. Above that the download cost and the loss of separate caching outweigh the saved request.
Is my file uploaded to a server?
No. It is read with the browser file API and encoded in the page, so nothing is transmitted.
Why is the encoded text longer than the file?
Base64 spends four characters on every three bytes, so expect about a third more, plus the data URI prefix.