For web designers and developers, PNG has long been the default format for high-quality lossless images with transparent backgrounds. However, WebP's lossless compression has changed the rules by offering significantly smaller file sizes. Here is how to choose the right format to optimize your web application.
The Tech Behind WebP Lossless
According to Google's data, WebP Lossless files are 26% smaller than PNGs at identical visual quality. WebP achieves this through predictive coding: it analyzes neighboring pixel blocks to predict color values and only stores the difference. This allows it to save lossless color channels much more densely.
Why PNG Still Exists
Despite WebP's size advantages, PNG remains a dominant standard due to its unmatched compatibility across older systems:
- Legacy Software: Older versions of photo editors or printing machine software might not open WebP files natively without plugins.
- Older Devices: Certain legacy mobile devices or ancient web browsers do not support WebP, requiring PNG as a fallback image.
Measured: bytes needed to store identical pixels
Between two lossless formats the picture is identical, so file size is the only thing left to compare. We saved three sources as PNG and as lossless WebP and read the actual byte counts.
| Source type | PNG | WebP (lossless) | Saving |
|---|---|---|---|
| Photograph | 3,591 KB | 1,603 KB | 55% smaller |
| Flat graphic | 23 KB | 9 KB | 59% smaller |
| Screenshot | 94 KB | 17 KB | 82% smaller |
Lossless WebP is smaller in all three cases, and the gap is widest on the screenshot: 94 KB as PNG falls to 17 KB, removing 82% of the file. WebP's predictive compression works especially well on images where the same patterns repeat, such as text and interface elements.
Optimization Best Practices
The recommended approach is to keep your master design assets as high-quality PNGs for editing and backup, then convert them to WebP for production web deployment. Using a local browser-side converter like Switching allows you to instantly encode PNGs to WebP, saving valuable bandwidth and speed.