WebP vs PNG
Both store photographs, but they make different trade-offs. Here is where they actually differ, and how to pick.
Short answer
If the image is a photo or a screenshot of one, WebP will be dramatically smaller. If it is line art, a logo, or text you intend to keep pixel-exact, stay on PNG.
Why this comes up
Most people arriving at this comparison are not weighing two formats on the merits. They have a PNG that is inexplicably 4 MB and they want it smaller. That framing matters, because the reason the PNG is 4 MB determines whether WebP helps at all — and occasionally the right answer is that PNG was never the problem.
Side by side
| Property | WebP | PNG |
|---|---|---|
| Compression | Lossy | Lossless |
| Transparency | Yes | Yes |
| Typical file size | 65-75% of an equivalent JPEG | 300-500% of an equivalent JPEG |
| Compatibility | Supported by all current browsers and most apps | Opens everywhere, including decades-old software |
| Usually comes from | Websites optimising page weight | Screenshots, logos and graphics |
What actually differs
PNG is lossless by definition; WebP is usually not
PNG stores every pixel exactly as given, which is why it never degrades and why it is large. WebP has both a lossy and a lossless mode, and the size figures people quote almost always come from the lossy one. Comparing "WebP" to PNG without saying which mode is comparing two different things. Lossless WebP typically saves around 25% over PNG; lossy WebP can save 80% or more.
PNG is enormous on photos for a structural reason
PNG compresses by finding repetition in rows of pixels. A screenshot of a settings panel is mostly repeated flat colour, so it compresses beautifully. A photograph has almost no exact repetition — every pixel differs slightly from its neighbour — so PNG stores nearly all of it verbatim and the file balloons to 3–5× a JPEG. This is not a flaw; it is what lossless means on noisy data.
Both keep transparency, so that is not the deciding factor
This is worth stating because it is the assumption that sends people to PNG by reflex. WebP supports a full 8-bit alpha channel in both its lossy and lossless modes. A logo on a transparent background does not need to be PNG to stay transparent — it needs to be PNG if you need it pixel-exact.
Which to use
Use WebP for
Photographs, photo-heavy screenshots, and any web delivery where the file will be looked at rather than edited further.
Use PNG for
Screenshots of text and UI, logos and line art, anything going into another editing pass, and any file that must survive repeated saves unchanged.
One thing that catches people out
Lossy WebP is a bad idea for screenshots of text
Lossy compression is tuned for photographic detail, and it handles hard black-on-white edges badly — letterforms pick up a grey halo and thin strokes smear. A screenshot of a terminal or a code editor is the worst case. If the file is large and full of text, reach for lossless WebP or leave it as PNG; the saving is smaller but the text stays readable.