PNG vs WEBP: which lossless-friendly format wins?
Both handle full 8-bit transparency, while lossy WebP can also compress photographic and gradient detail to reduce file size. Here is when that difference matters.
By Ranjith R, Creator & Developer of TryImagerPublished Last updated: 8 min read
PNG and WEBP are the two formats that both support a real alpha channel, so the transparency question doesn't decide between them the way it decides between JPG and PNG. The real difference is compression: PNG is always lossless, while WEBP can compress its colour data lossily while keeping the alpha channel sharp. That single feature is where almost all the size difference comes from.
When they're basically the same size
For flat-colour graphics — simple icons, logos with few colours, UI elements — PNG's lossless compression is already efficient, and converting to WEBP often saves very little, sometimes nothing. If a file is a few kilobytes either way, the conversion step isn't worth the extra build complexity.
When WEBP pulls ahead dramatically
Detailed cut-outs, hair strands and gradients give the colour encoder more to compress than a flat icon. WebP can reduce colour detail while retaining transparency; lossless PNG retains the decoded pixel data. How much that saves depends on the source and quality. Inspect the alpha edges as well as the measured bytes instead of expecting a fixed percentage.
| Image type | PNG consideration | WebP consideration |
|---|---|---|
| Simple flat-colour icon | Often already efficiently stored | May offer little or no reduction |
| Logo with soft shadow | Lossless edges and colour | Compare the soft edge after encoding |
| Product cut-out with hair/fur detail | Detailed lossless data may be heavy | Check hair strands at full size |
| Full-screen app screenshot with UI | Keeps text pixel data losslessly | Lossy output may soften small lettering |
Why PNG and WebP store the exact same pixels so differently
PNG uses a two-stage lossless pipeline: per-row scanline filtering (which predicts each pixel from its left, upper, or upper-left neighbour) followed by DEFLATE compression (the same lossless dictionary algorithm used in ZIP archives). That works brilliantly when hundreds of adjacent pixels share the exact same RGB triplet, such as a solid nav bar or a flat badge. It works poorly on camera noise, soft studio lighting, or 3D renders, because every pixel differs slightly from its neighbour and DEFLATE cannot merge near-matches.
WebP solves this by supporting both lossless VP8L encoding and lossy VP8 predictive coding alongside an 8-bit alpha plane. In lossy WebP with alpha, the RGB channels are quantized in frequency blocks (similar to video keyframes) while the transparency mask stays intact. That means a 1200×1200 transparent e-commerce shoe cutout no longer has to pay lossless PNG prices for the leather texture inside the shoe.
Where PNG still wins
- Older desktop software and some print workflows still don't open WEBP directly.
- If the image is going into another lossless editing pipeline, PNG avoids stacking any lossy compression before the final export.
- Email clients have patchier WEBP support than browsers — for embedded email images, PNG or JPG is the safer default.
- OpenGraph social preview images (og:image) and government upload portals frequently mandate PNG or JPG and reject WebP uploads.
A simple rule
If the image is going on a modern website and has any photographic or gradient content behind the transparency, convert to WEBP and check the saving. If it's a small flat icon, an intermediate design master, or headed to an upload portal that doesn't reliably support WEBP, PNG is fine as it is and converting adds a step for little benefit.
Tools for this
- PNG to WEBPUse it the standard move for transparent PNGs that are heavier than they need to be.
- WEBP to PNGUse it when an old editor or CMS only accepts PNG.
- WEBP CompressorUse it to tune quality once you've committed to WEBP.
- PNG CompressorUse it to check whether a resize or palette change helps before converting.