Compress PNG to Base64
Compress a PNG, then convert it to Base64 in one pass — resize, pick WebP or JPG quality, and get a smaller data URI. Base64 always adds ~33% to whatever you feed it, so shrinking the source is the only way to get a smaller string.
100% client-side. Your PNG never leaves your device.
Drop a PNG to compress and encode it
or paste from your clipboard · output stays in your browser
Compress first, encode second
Base64 is an encoding, not a compression method: it rewrites every three bytes as four text characters, so a data URI is always about one third larger than the bytes you feed it. Encoding never shrinks anything. That is why this tool merges the two steps that belong together — compress the PNG, then convert it to Base64 — instead of handing you a huge string and sending you elsewhere.
- Add a PNG. Drag it in, pick it, or paste from the clipboard.
- Pick the output format and quality. WebP is the default because it is the smallest for the same look and keeps transparency. JPG suits photos; PNG is lossless but rarely shrinks.
- Optionally cap the width. An image displayed at 64 px does not need 1024 source pixels — downscaling is the biggest win of all.
- Copy the result. You get the full data URI plus ready-to-paste HTML and CSS snippets, with the before/after sizes shown.
Why the PNG option usually does not help
PNG is lossless, and the browser's canvas encoder is not as tuned as dedicated PNG optimizers — re-encoding a PNG through a canvas can even make it larger. If real compression is the goal, choose WebP (smaller than JPG and PNG for nearly every kind of image, and it keeps the alpha channel) or JPG for photographs. This page shows a warning whenever the result ends up bigger than the original, so you never silently make things worse.
How much smaller can it get?
Typical numbers: a 200 KB screenshot resized to its display width and re-encoded as WebP at 80% quality often lands between 20 and 40 KB — a data URI of roughly 27-53 KB instead of 267 KB. The exact figures depend on the image, which is why the tool reports the real result rather than an estimate. If you only need the numbers for a size you already know, the Base64 image size calculator works from a file size alone.
When to inline at all
A compressed data URI is great for icons, logos, small diagrams and anything that must travel inside a single HTML file. For large or reused images, a normal file is still better: the browser can cache it independently, and a 300 KB text blob in your HTML hurts parse time. Use this tool's before/after readout to decide with real numbers.
Private by construction
Decoding, resizing, re-encoding and Base64 conversion all happen in your browser through the Canvas and FileReader APIs. The file is never uploaded — you can disconnect from the internet after the page loads and the tool still works.
More Base64 converters
Frequently asked questions
How do I make a Base64 string smaller?
Compress the image before encoding. Base64 adds roughly 33% to whatever bytes you feed it, so the source is the only lever: resize to the displayed dimensions and re-encode as WebP or JPG at 60-85% quality.
Does Base64 encoding compress the image?
No. Base64 is an encoding, not compression — it makes data about 33% larger. Any real reduction must happen before encoding.
Which output format gives the smallest Base64 string?
WebP, almost always — roughly 25-35% smaller than JPEG at the same visual quality, and it keeps transparency. JPG suits photos; PNG re-encoding rarely shrinks anything.
Why did the PNG output get bigger after compressing?
PNG is lossless and the browser's canvas encoder is less tuned than dedicated PNG tools. Choose WebP or JPG instead — the tool warns you whenever the result is larger than the original.
Is the compression and conversion private?
Yes. Everything runs in your browser with the Canvas and FileReader APIs. The file is never uploaded to any server.
How small should an image be before inlining it as Base64?
Keep the source under 5 KB for comfortable inlining; treat anything over 50 KB as too big. In between, compress first and compare — the size calculator gives exact numbers.