PNG to Base64

PNG to Base64 for icons and UI graphics

PNG is the natural choice for icons, logos, screenshots and interface graphics with sharp edges or transparency. The PNG to Base64 converter reads your file, confirms it really is a PNG, and outputs it as a data:image/png;base64,… URI or in one of the other formats — ready to drop into HTML, CSS or Markdown.

Example

A 1×1 transparent PNG (70 bytes) becomes this data URI (96 characters of Base64 plus the prefix):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==

Every PNG begins with the same eight-byte signature, 89 50 4E 47 0D 0A 1A 0A, so every PNG in Base64 starts with iVBORw0KGgo. If you see that prefix anywhere — in a JSON response, a database or a log — you are looking at a PNG image.

File check

The tool verifies the file type from the browser’s MIME information and the file signature. If you select a JPEG or another format by mistake, you get a clear message such as “does not look like a PNG image”, so you do not embed the wrong data under a image/png label. For other formats, use Image to Base64.

Keeping PNG data URIs small

• Resize the image to the size it is displayed at; a 512 px icon shown at 32 px wastes most of its bytes.
• Reduce the colour count where possible: palette-based (8-bit) PNGs are often a fraction of the size of full-colour ones.
• Run the file through a PNG optimiser before converting; lossless recompression commonly saves 10–40%.
• Consider SVG for simple logos and icons, which may be smaller still.

On the command line you can produce the same raw Base64 with base64 -w 0 icon.png (Linux) or base64 -i icon.png (macOS); in Node.js, fs.readFileSync('icon.png').toString('base64').

Using the output

The CSS option produces background-image: url("data:image/png;base64,…");, which is ideal for small repeated icons in a stylesheet. The Markdown option works in README files and many documentation tools, though some hosted platforms strip data-URI images from Markdown for security reasons, so check your target first.

To convert other formats first, JPG to PNG is available. To decode a PNG data URI back to an image, use Base64 to Image. Everything happens in your browser.

Where PNG data URIs cause trouble

• HTML email. Several major email clients, Gmail among them, do not display images whose src is a data URI. For newsletters, host the PNG or attach it and reference it by Content-ID instead.
• High-density screens. An icon encoded at its CSS size looks soft on a 2× display. Encode the PNG at twice the size and set width and height to half, or supply both versions with image-set() in CSS.
• Repeated use. A data URI is copied into every place it appears. If the same image is used on many pages, a normal file that the browser caches once is usually lighter overall.