PNG to Base64

How to convert a PNG to Base64

1. Drop a .png file on the box or pick it with the file picker. To encode a screenshot, copy it and press Ctrl+V (Cmd+V on a Mac) on this page; no need to save it first.
2. If the PNG is bigger than it needs to be, set Max width, or choose WebP under Convert to. Strip metadata (EXIF) drops text and EXIF chunks.
3. Leave Output as on Data URI, or switch to CSS, <img>, Markdown, JSON or plain Base64.
4. Copy output. The preview shows the pixel size and, after re-encoding, the new file size.

What a Base64 PNG looks like

Every PNG starts with the same 16 bytes: the 8-byte signature and the header of the IHDR chunk, which must come first. In Base64 that gives a fixed opening of 22 characters:

iVBORw0KGgoAAAANSUhEUg

So any string that begins iVBORw0KGgo is a PNG, be it in a JSON response, a log file or a database column. Width and height follow right after, packed into the next characters.

For reference, this is a complete 1×1 fully transparent PNG. The file is 70 bytes and the Base64 is 96 characters:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGBgAAAABQABeqhXUAAAAABJRU5ErkJggg==" alt="" width="1" height="1">

Pasting has one catch. Browsers and image viewers usually put a copied image on the clipboard as PNG, whatever its original format, so a pasted JPEG photo arrives as a PNG that can be much bigger than the file on disk. Drop the original file when the source format matters.

If your encoded PNG starts with anything else, the file was not a PNG. A .png file that is really a JPEG starts /9j/, and a WebP renamed to .png starts UklGR. The MIME type in the preview tells you what the browser detected.

PNG, JPEG or WebP before encoding

PNG is lossless, so it is the right choice for logos, icons, UI graphics and screenshots with text. For photos it is the wrong one: a photographic PNG is often several times larger than a good JPEG or WebP of the same picture. Since Base64 inflates whatever it is given by about 33%, the format you pick decides most of the final size.

The converter re-encodes through the browser’s canvas. That has three consequences:

• Convert to JPEG loses transparency. Transparent pixels become white.
• Safari has no WebP encoder. Ask for WebP there and you get PNG back, with a note saying so.
• The canvas encoder does not optimize PNGs. Re-encoding a PNG that was already compressed with a dedicated optimizer can make it larger. Compare the sizes in the preview and keep the original if it wins.

Strip metadata (EXIF) removes ancillary data such as EXIF and text chunks along the way. Most PNGs carry little of it, but screenshots and exports from some apps include software names or timestamps.

Where Base64 PNGs show up

• CSS icons: background-image: url("data:image/png;base64,...") for small icons that should not cost an extra request. For vector icons an SVG is usually smaller; see SVG to Base64.
• Canvas output: canvas.toDataURL() returns a PNG data URI by default, which is why signature pads, charts and image editors so often produce this format. Base64 to PNG turns it back into a file.
• API payloads: screenshot services, test runners and AI vision APIs exchange PNGs as Base64 inside JSON. Check whether the API wants the data:image/png;base64, prefix or bare Base64, and choose Data URI or Plain Base64 to match.
• Test snapshots and bug reports: visual tests and crash reporters often put screenshots into their JSON or HTML reports as Base64 PNG, so a report stays one file.
• Favicons and single-file pages: a small PNG favicon inlined in <link rel="icon"> keeps an HTML file self-contained. The favicon page covers the details.

Encode a PNG in code

Node.js reads the file into a Buffer and encodes it in one call:

import { readFileSync } from "node:fs";

const uri = "data:image/png;base64," + readFileSync("logo.png").toString("base64");

In a browser, a canvas gives you the PNG data URI directly:

const uri = canvas.toDataURL("image/png");

See Base64 in Node.js for streaming and URL-safe output, and Base64 in JavaScript for files and Blobs in the browser.

Fixing a PNG data URI that will not display

• The prefix is wrong. It must be data:image/png;base64, with the comma. A missing ;base64 makes the browser read the characters as raw text.
• URL-safe is ticked. Browsers only decode the standard alphabet in data: URLs. A PNG Base64 with - and _ shows as a broken image.
• Line breaks in CSS. Wrap at 76 is for email. In a stylesheet, a line break inside url("...") invalidates the declaration.
• The string was cut. A PNG ends with a fixed 12-byte IEND chunk, so its Base64 ends in AAAAAElFTkSuQmCC, AABJRU5ErkJggg== or AAAASUVORK5CYII=, depending on how the file length divides by 3. If the end looks different and the image is half-drawn or missing, the copy was truncated. Validate the string to check its length and padding.

FAQ