PNG to Base64 Converter

What is Base64 and why convert PNG to it?

Base64 is a way of encoding binary data — anything from a PNG image to a PDF or an encryption key — using only 64 printable ASCII characters (A–Z, a–z, 0–9, plus + and /, with = for padding). The encoded result is roughly 33% larger than the original binary, but it can be safely embedded in places that only accept text: HTML attributes, CSS files, JSON payloads, JavaScript strings, XML documents, email bodies, and configuration files. That's why "PNG to Base64" exists: it lets you carry an image around inside a text channel.

A "data URI" is the standard way to make a Base64-encoded image actually usable in a web page. It looks like data:image/png;base64,iVBORw0KGgo… and works anywhere a URL works: as the src of an <img> tag, as the value of a CSS background-image: url(…), or as an SVG href. The image is decoded inline by the browser — no separate HTTP request needed.

When inlining a PNG as Base64 makes sense

• Tiny icons used once — sprites, bullets, decorative dots. Embedding saves the HTTP request overhead.
• Email signatures — inlining the logo means it can't be stripped or broken by image-blocking clients.
• Single-file HTML demos — no separate asset files to lose.
• Self-contained SVGs referenced from CSS — keeps a stylesheet portable.
• Documentation and tutorials — embed example images directly in Markdown.
• API responses — when you have to return image data over JSON.
• Service workers and offline apps — bundle critical images without separate cache entries.

When NOT to inline a PNG as Base64

Base64 isn't free. It increases file size by ~33%, and that bloat is loaded every time the parent file is loaded — even if the same image appears multiple times, the browser can't cache or share copies. For anything larger than about 5 KB, or any image that appears more than once on a site, a normal <img src="…"> reference is almost always faster and lighter. Browsers cache external images aggressively; an inlined image gets re-parsed on every page load.

• Large images (over ~10 KB) — the file-size penalty outweighs the saved HTTP request, especially over HTTP/2.
• Images used on multiple pages — external files are cached once and reused. Inlined images aren't.
• Anything you might want to update later — swapping an external file is one upload; swapping an inlined Base64 is a find-and-replace in every file that contains it.
• Critical above-the-fold hero images — they block parsing and can hurt LCP scores.

How to use the output

In HTML

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo">

In CSS

.icon-check {
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
}

In JavaScript

const img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgo...";
document.body.appendChild(img);

In a JSON API response

{
  "user_id": 42,
  "avatar": "data:image/png;base64,iVBORw0KGgo..."
}

How this converter works

Your file is read by the browser via the FileReader.readAsDataURL() API, which returns a complete data: URI string. Depending on the output format you've chosen, the tool either keeps the full URI or strips the prefix to give you plain Base64. Everything happens locally — you can verify with the Developer Tools Network tab.

The encoded length is predictable: about ceil(file_size × 4 / 3) characters, plus a small fixed overhead for the prefix. A 10 KB PNG produces roughly 13.7 KB of Base64.

Tips and best practice

• Inline images that are under 5 KB for the best size/speed trade-off.
• If you find yourself inlining the same image in multiple files, switch to an external file and let the browser cache do its job.
• For SVG icons specifically, consider raw inline SVG (<svg>…</svg>) instead of Base64 — it's smaller and CSS can target individual paths.
• Compress the PNG first with the PNG Compressor before encoding — Base64 inflates whatever you feed it.
• Avoid Base64-encoding hero images, photos or anything over ~10 KB.

FAQs

Related tools