Convert a PNG to Base64
Encode a PNG to a Base64 string or data URI — transparency intact, with copy-ready CSS and HTML — free and right in your browser.
Drop an image to encode
Drag & drop, paste, or pick a file
PNG · JPG · WebP · GIF · SVG — encoded on your device
Encoding PNG images to Base64
PNG is the format for logos, icons, screenshots, and anything with a transparent background — exactly the kind of small asset you often want to inline as Base64. Encoding a PNG to a data URI lets you drop it straight into a CSS file or HTML email with no extra request, and the transparent areas are preserved exactly because Base64 copies the file byte-for-byte.
This tool reads your PNG in the browser and returns the raw Base64 body, the full data:image/png;base64 URI, and ready CSS and HTML snippets. Nothing is re-compressed, so the decoded image is identical to the original PNG.
How to convert a PNG to Base64
- Open your PNG. Drag the PNG onto the tool above, choose a file, or paste it from your clipboard.
- Pick your output. Switch between the raw Base64, the data:image/png URI, a CSS rule, or an <img> tag.
- Copy or download. Tap Copy, or save the Base64 as a .txt file.
Great for transparent icons
Because PNG keeps an alpha channel, inlining a transparent PNG as a data URI is ideal for small icons that sit on coloured backgrounds — no separate file, and the transparency just works.
PNG to Base64: how it works
PNG is a lossless raster format with an alpha (transparency) channel, used for logos, icons, screenshots, and line art — exactly the kind of small asset that's a good candidate for inlining as Base64.
- Data URI shape
-
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg… - Size impact
- The PNG bytes are copied verbatim and then Base64-encoded, so the string is about 133% of the .png file size — the ~33% Base64 overhead, with no re-compression of the image itself.
When inlining as Base64 makes sense
- You're inlining a small transparent icon that sits on a coloured background — PNG's alpha channel is preserved exactly, since Base64 copies the file byte-for-byte.
- You want a crisp logo or UI sprite embedded in CSS or an HTML email without a second network request.
- You need a screenshot or diagram embedded inside a single self-contained document.
When a normal file or URL is better
- The PNG is a large screenshot or a photo-like image — PNGs of photos are already big, and the ~33% Base64 overhead makes the inlined size noticeably worse.
- The same icon appears on many pages, where an external, cacheable .png beats re-embedding it everywhere.
Practical tip
Every PNG data URI begins with data:image/png;base64,iVBORw0KGgo — that fixed iVBORw0KGgo opening is simply the Base64 of PNG's standard 8-byte signature, so seeing it confirms the string really is a PNG.
More Base64 & data URI tools
Frequently asked questions
Does encoding a PNG keep transparency?
Yes. Base64 copies the PNG's exact bytes, including the alpha channel, so transparency is fully preserved when the string is decoded back.
Is PNG-to-Base64 lossless?
Yes. There's no re-compression — the Base64 is an exact text representation of the original PNG file.
What does the data URI look like for a PNG?
It starts with data:image/png;base64, followed by the encoded body, e.g. data:image/png;base64,iVBORw0KGgo…
Where is my image processed?
The encoding and decoding happen in your browser, so the result is created on your own device. How any data associated with the tool is handled is described in our privacy policy.
More image tools
Crop an image
Crop to any ratio or an exact pixel size.
Image toolCompress an image
Shrink file size without visible quality loss.
Image toolResize an image
Change dimensions to exact pixels or presets.
Image toolConvert HEIC to JPG
Turn iPhone HEIC photos into universal JPG.
Image toolConvert image format
PNG, JPG and WebP — convert any to any.