Transparency stays, the file shrinks
WebP supports the same 8-bit alpha channel as PNG, so logos, icons and cut-outs keep their transparent background. After conversion each row reports what share of the image is transparent.
Unlike PNG to JPG, no background colour is needed and nothing turns black or white.
Measured: how much smaller than PNG
- A 1200×630 graphic with text: 252,262 bytes as PNG, 34,750 bytes as WebP at quality 80 — 86% smaller.
- A 512×512 icon with 21.7% transparency: 16,311 bytes as PNG, 9,786 bytes at quality 80 — 40% smaller.
- The same two images at quality 100 in Chrome: 224,680 and 14,784 bytes, only 9–11% smaller than the PNGs.
Lossy WebP gives the big savings; very high quality keeps the image closer to the PNG but saves little.
Icons, logos and text need care
Lossy compression can leave faint halos around sharp edges and soften small text. For UI graphics, screenshots and logos use quality 90 or more, then compare the result at 100% zoom against a dark and a light background.
If the WebP is not meaningfully smaller at the quality you need, keep the PNG — the row shows the exact before-and-after size.
Where WebP works — and where to keep PNG
About 97% of browsers in use display WebP (caniuse), so it is a good default for websites and apps. Serve it with a PNG fallback in a picture element if you support very old browsers.
Email clients, office documents, print services and some upload forms still expect PNG or JPG. Keep your PNG originals for those.
Safari, iPhone and other common problems
- “This browser cannot save WebP”: Safari and all iPhone and iPad browsers cannot encode WebP. Use Chrome, Edge or Firefox on a computer.
- Edges look jagged or haloed: raise the quality to 90–95.
- Animated PNG (APNG): only the first frame is converted; the row reports the frame count.