Why PNG is the wrong format for many web images
PNG became the default for anything with transparency on the web: product photos on white or transparent backgrounds, hero illustrations, screenshots and logos. It is a fine format, but because it is lossless it produces very large files for anything photographic. A transparent product shot that is 1.5 MB as PNG is commonly 100–200 KB as WebP at quality 85, with no visible difference on screen. On a page with a dozen such images, that is the difference between a slow page and a fast one.
What WebP brings
WebP was designed by Google specifically for the web. It supports both lossy and lossless compression, an alpha channel for transparency, and animation. Its lossy mode is based on VP8 video coding and, crucially, it can compress the colour data with lossy compression while keeping the transparency channel sharp, something JPG cannot do at all. The result is files that are much smaller than PNG and still have crisp transparent edges.
How the conversion works
PNG files are decoded in a background Web Worker with a WebAssembly decoder, preserving the alpha channel. The pixels are then encoded with libwebp, Google’s reference encoder, at the quality you choose. Metadata chunks such as text comments are not copied. All processing happens on your device, and there is no limit on the number of files.
Quality guidance
- Logos and flat graphics: quality 90–95 keeps edges clean.
- Photos with transparency: quality 80–85 is usually indistinguishable from the PNG.
- Large background images: 70–80 gives the biggest savings.
Serving WebP on your site
Most modern content management systems and site builders accept WebP uploads directly. If you also need to support very old browsers, you can serve WebP through the HTML <picture> element with a PNG fallback, but for current browsers that is no longer necessary. Pair the conversion with resizing so images are not larger than the space they are displayed in.