Transparency: the myth that keeps PNG alive
Many people still believe transparency requires PNG. It doesn't. WebP supports a full 8-bit alpha channel in both lossless and lossy modes. A transparent PNG logo converted to WebP at 90% quality keeps its soft anti-aliased edges and drops to a third of the size. For lossy WebP, the alpha channel is compressed losslessly by default, so edges never get blocky.
File size
PNG uses DEFLATE, the same algorithm as ZIP files. It works well on flat colour and repeated patterns and terribly on photographs and gradients. WebP lossless uses predictive coding with a local colour cache and beats PNG by about 26% on Google's test corpus. WebP lossy is a different league: screenshots typically shrink 80–85%, photographic PNGs 90%+.
Real-world examples (typical results)
| Image | PNG | WebP lossless | WebP q85 |
|---|---|---|---|
| Retina screenshot 2880×1800 | 3.9 MB | 2.7 MB | 480 KB |
| App icon 512×512 transparent | 96 KB | 68 KB | 24 KB |
| Chart with text 1200×700 | 210 KB | 150 KB | 58 KB |
| Photo exported as PNG 2000 px | 5.6 MB | 4.1 MB | 310 KB |
When PNG is still the right choice
- As the master file you keep editing: lossless, universally supported by design tools.
- When a platform requires PNG (some app stores, ad networks and print workflows).
- For pixel art or tiny icons under 1 KB, where format overhead dominates.
- When you need 16-bit per channel colour depth; WebP is 8-bit.
Quality settings for graphics
Screenshots, diagrams and UI graphics contain sharp edges and text. Use 85–92% quality in WebP to keep them crisp. Photographic content in a PNG wrapper can drop to 80%. Combine with downscaling to the actual display size for the largest gains.