PNG to WebP Without Losing Quality

A logo exported as PNG for sharpness can weigh 800 KB while showing at 200 pixels wide. Converting it to WebP feels like the obvious fix — until you picture a fuzzy logo or a white box where the transparency used to be.

PNG-to-WebP is the rare conversion where you can genuinely lose nothing — provided you pick the right mode. Most converters hide that choice behind one quality slider. Pick wrong and you get the fuzzy logo; pick right and the file shrinks by a third or more with nothing visibly changed.

PNG is lossless by design, which is why it is so heavy — if you want the full breakdown of what makes a PNG huge, see why your PNG is so large. WebP is two formats in one container: lossless stores the same pixels exactly, just packed better; lossy throws away detail your eye rarely notices. Both keep transparency. So the real question is "which mode fits what is inside this PNG?"

Start with what's inside the image, not the slider

Match the mode to what the image is, not to how small you wish it were:

• Logo, icon, flat UI, screenshot, chart, anything with text: lossless. Sharp edges show lossy artifacts first — ringing around letters, muddy borders. Lossless still comes out smaller.
• Photograph saved as PNG: lossy, quality 80–85. A camera shot saved as PNG "to keep quality" can hit 5 MB; lossy WebP at quality 82 shrinks it 60–80% with no visible difference.
• Product photo on a transparent background: lossy color plus lossless alpha (see the transparency section below). PNG cannot do this at all — and it is where the biggest savings live.
• Flat illustration with gradients: lossy at quality 85–90, or lossless if the file is small anyway.

They give you one slider and let you discover the artifacts later, on your live site.

"No quality loss" means two different things — and converters blur the line

Lossless means pixel-identical: decode the WebP and every color value matches the PNG exactly. Visually lossless means pixels changed, but you cannot see it at normal viewing size. Lossy WebP at quality 80–85 is visually lossless for photos — not pixel-identical, whatever a converter's marketing says.

Two traps hide in that distinction. First, quality 100 in lossy mode is not lossless — it can even come out larger than the PNG. If you need pixel-identical output, use the explicit lossless switch, not a maxed-out slider. Second, near-lossless mode (-near_lossless 60) nudges pixel values slightly before lossless encoding, often landing smaller than true lossless with no visible change — a useful option for screenshots, where the small shifts rarely show.

Rule of thumb: if the tool only offers a quality slider and no lossless toggle, don't use it for logos. It's a photo tool wearing a converter's clothes.

How much smaller, in real numbers

Google's studies: lossless WebP about 26% smaller than the equivalent PNG, lossy WebP 25–34% smaller than JPEG at the same visual quality. For PNG sources the spread is wider:

• Flat logo, transparent: 45 KB PNG → ~32 KB lossless WebP (−29%). Lossy goes smaller but artifacts on edges — don't do it.
• UI screenshot: 320 KB PNG → ~238 KB lossless (−26%). Lossy at quality 82 drops to ~180 KB but blurs small text.
• Product photo, transparent: 850 KB PNG → ~620 KB lossless (−27%), or ~180 KB lossy-with-alpha (−79%) with perfect edges.
• Photograph saved as PNG: 2.1 MB PNG → ~1.5 MB lossless (−28%), or ~420 KB lossy at quality 82 (−80%).

One honest exception: a tiny, already-optimized icon can come out bigger as WebP, because container overhead wipes out the gain. If the WebP isn't smaller, keep the PNG. No format loyalty — just the smaller file.

Four ways to convert, depending on how much control you want

Online converter (fastest). Open our Image Converter, drop in the PNG, and pick WebP. It runs in your browser, so the file never leaves your machine. Choose lossless for logos and text, the quality slider (80–85) for photos.

Photoshop and GIMP. Photoshop has native WebP support since version 23.2 (February 2022); older builds need Google's free WebPShop plug-in. Use Save As, or Export As for a live size preview — and pick lossless, not quality 100, for pixel-perfect output. In GIMP, Export As to .webp: tick "Lossless" for graphics and text; for photos, leave it unticked, Image quality 80–85, Alpha quality 100.

Command line (best control). Google's cwebp is the reference encoder (brew install webp on Mac, apt install webp on Linux):

• cwebp -lossless logo.png -o logo.webp — pixel-perfect.
• cwebp -q 82 photo.png -o photo.webp — lossy sweet spot for photographic PNGs.
• cwebp -q 82 -alpha_q 100 product.png -o product.webp — lossy color, lossless alpha for cutouts.
• Batch a whole folder: for f in *.png; do cwebp -lossless "$f" -o "${f%.png}.webp"; done

Python and WordPress. With Pillow, Image.open("input.png").save("output.webp", "WEBP", lossless=True) is lossless, or quality=82, method=6 for lossy — loop with glob for a ten-line batch job. On WordPress, Imagify, ShortPixel, or Smush convert uploads to WebP automatically — the least painful route for a big media library (WordPress has handled WebP uploads natively since 5.8).

The white-box bug: transparency is where conversions actually break

WebP keeps the full 8-bit alpha channel in both modes, so a transparent PNG converts with its transparency intact. But not every tool preserves it: some quietly flatten transparency onto white or black, leaving logos inside a white rectangle on a dark header. A flattened background is the failure people notice first, because it shows up on the live page rather than in the converter's preview.

Three habits prevent it. First, confirm your tool's alpha or transparency setting is on — no switch, test the output first. Second, in lossy mode keep alpha lossless with -alpha_q 100 (the cwebp default). Lowering it only makes sense for soft shadows and glows. Third, verify on a dark background, not just a white one — white hides a flattened background; dark exposes it instantly.

97% of browsers read WebP. Serve it right anyway

WebP now sits at roughly 97% global browser support — Chrome, Firefox, Edge, and Safari 14+ (September 2020) all read it, and it has been Baseline Widely Available since March 2023. For most public sites, serve WebP directly. For locked-down corporate machines or very old browsers, the <picture> element covers you with no JavaScript — WebP source first, PNG as the <img> fallback. Warning: the fallback triggers for unsupported formats, not missing files — a 404 on the WebP does not auto-switch to PNG.

Two serving details. Serve WebP with Content-Type: image/webp and a Vary: Accept header if your server negotiates formats, or a CDN may cache the WebP and hand it to a browser that asked for PNG. Converting is also a natural moment to strip metadata — cwebp copies none by default, saving 5–30 KB per image — but if color accuracy matters, keep the ICC profile (-metadata icc). A stripped profile on a wide-gamut image is the usual cause of "the colors shifted after conversion."

When the PNG stays

WebP is the better delivery format, not a universal replacement. Keep the PNG for masters you'll edit again — every lossy re-save degrades it a little more, like re-saving a JPEG. Keep PNG for print pipelines, which often reject WebP outright. Keep PNG for email and social link previews: many email clients and Open Graph crawlers still don't render WebP, so a WebP og:image can show blank. And the hard limits: WebP caps at 16,383 × 16,383 pixels per side and 8-bit color, so a giant panorama or 16-bit master stays a PNG.

Think of it this way: PNG is the master copy, WebP is the shipping copy. You don't throw away the master because the shipping copy is lighter.

It came out blurry, bigger, or boxed — here's why

• Blurry text or fuzzy edges: you used lossy mode on a graphic. Re-convert lossless.
• WebP bigger than the PNG: normal for tiny or optimized icons. Keep the PNG for that file.
• White or black box behind the logo: the converter flattened the alpha channel. Switch tools or enable transparency.
• Colors look shifted: the ICC profile was stripped. Re-convert keeping it, or convert to sRGB first.
• Halo around cutout edges: lossy alpha set too low. Raise -alpha_q toward 100.

Our WebP vs PNG vs JPG guide lays out the full comparison side by side. Going the other way, converting WebP back to PNG is lossless — it adds no new loss, though it can't restore detail a lossy encode already threw away. Some destinations still reject WebP outright; our note on why platforms reject WebP uploads explains which ones and what to send instead.