PNG to Base64 Converter

Drop a PNG and get a Base64 data URI you can paste straight into HTML or CSS. Everything runs in your browser — the file is never uploaded.

Drop a PNG here or click to browse

PNG files

— —

DATA URI

Raw Base64 Copy

Base64 output

Waiting for a PNG

How to convert a PNG to Base64

Drag a PNG onto the drop zone above (or click to browse). The tool reads it locally with the browser's FileReader API and produces a data URI — a string of the form data:image/png;base64,iVBORw0KGgo… that embeds the whole image inline. Click Copy, then paste it where you need it. Use the Raw Base64 toggle if you want only the encoded payload without the data: prefix.

When to inline a PNG as a data URI

PNG is a lossless format with full alpha transparency, which makes it ideal for crisp icons, logos, and small UI sprites. Inlining one of those as a data URI removes an HTTP request and keeps the asset bundled with your HTML or CSS. The tradeoffs:

• Size: Base64 is ~33% larger than the original binary PNG. A 12 KB PNG becomes ~16 KB of text.
• Caching: An inlined PNG can't be cached on its own — a large screenshot becomes ~33% bigger text that is re-downloaded with the HTML/CSS every time it changes.
• Rule of thumb: inline tiny PNGs to save a request; keep larger or reused images as normal files served with proper cache headers.

Using the data URI in HTML and CSS

In HTML, drop it into an <img> src:

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

In CSS, use it as a background-image:

.logo {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
}

Is this private?

Yes. The conversion happens entirely client-side in JavaScript. Your PNG is read into memory in the browser and encoded locally — it is never sent to a server. You can confirm this by opening DevTools → Network: adding a PNG fires no upload request.

Frequently asked questions

How do I convert a PNG to Base64?

Drop the PNG onto the converter at the top of this page. It outputs a data URI like data:image/png;base64,iVBORw0KGgo… that you can paste into an <img> src or a CSS url().

Does converting a PNG to Base64 increase its size?

Yes — by about 33%. Base64 represents every 3 bytes of binary data with 4 ASCII characters, so a 12 KB PNG becomes roughly 16 KB of text. That's why inlining is best for small images.

Should I inline a PNG as a Base64 data URI?

Inline tiny PNGs (icons, logos, small sprites) to save an HTTP request. For large screenshots or reused images, keep a normal <img src="file.png"> so the browser can cache it separately.

How do I go the other way (Base64 back to a PNG)?

Use the Base64 to PNG tool to decode a data URI or raw Base64 back into a viewable, downloadable PNG.