PNG vs WebP: What Actually Differs

WebP is two formats sharing a name

PNG has one mode: lossless. WebP has two codecs. Its lossy mode is based on the key-frame coding of the VP8 video codec; it stores 8-bit color with the color layers at half resolution in each direction (the same 4:2:0 trick JPEG uses). Its lossless mode is a separate algorithm unrelated to VP8. And it can hold animation. Both lossy and lossless WebP can carry transparency, which surprises people who assume only lossless modes can.

When someone says "WebP is X percent smaller than PNG", they are usually comparing PNG with lossy WebP, a comparison that trades exactness for size. Compare like with like, and the picture changes.

What I measured on two synthetic pictures

I made two 1920 x 1080 test images with Pillow and encoded each three ways. Picture A is flat color blocks plus lines of text, like a screenshot. Picture B is smooth gradients and blurred shapes with fine noise, a rough stand-in for a photo. They are synthetic, so they exaggerate how well flat content compresses; the pattern holds, the exact ratios will not.

Picture	Encoding	Bytes	Pixels exact?
A	PNG	135,263	Yes
A	WebP lossless	10,686	Yes
A	WebP lossy, quality 90	89,924	No
B	PNG	3,587,826	Yes
B	WebP lossless	3,333,008	Yes
B	WebP lossy, quality 90	323,786	No

Lossless WebP beat PNG on both: nearly 13 times smaller on the flat picture, only 7 percent smaller on the noisy one. Pillow's PNG writer was not at its strongest, and an optimizing run brought A to 129,962 bytes and B to 3,441,443, which narrows but does not close the gap. On noise, nothing lossless gets far; only the lossy modes do.

Choosing by scenario

• Hero photo on your own website. Lossy WebP. At comparable visual quality it is commonly a quarter to a third smaller than JPEG (Google's own comparison reports 25 to 34 percent) and far below PNG. See choosing the best image format for websites for the wider picture.
• Documentation screenshots. PNG if you want zero risk, lossless WebP if every viewer is a modern browser and your tooling can produce it. Do not use lossy WebP on screenshots with small text unless you check the result at 100 percent zoom.
• Transparent logo or sticker. Both work. Lossy WebP with alpha is much smaller but may leave faint fringes on soft edges; PNG is exact. For a pure shape logo, neither beats SVG.
• Files sent to people, printers, Office documents, upload forms. PNG. You do not control the software at the other end, and PNG is accepted nearly everywhere.
• Your editing master. PNG. Every tool opens it and it never degrades.

Support and hard limits

Browser support is no longer the obstacle it once was. Firefox has supported WebP since January 2019, and Safari added it in version 14 in September 2020; Chrome and Chromium-based Edge have had it far longer. The real gaps are outside the browser: older image editors, some content-management systems, e-mail clients, print services and "choose a picture" forms may refuse a .webp file. When the destination is unknown, PNG or JPEG is the safer pick.

Two format limits matter in practice. WebP caps each side at 16,383 pixels, so a very tall screenshot or a big panorama cannot be saved as WebP at full size; the PNG specification allows dimensions up to 2,147,483,647, so memory is the only limit. And color depth differs: PNG can store 16 bits per channel, WebP stores 8, which matters for editing masters with delicate gradients, not for pictures that will simply be viewed.

Where lossy WebP bites, and what it buys

Because lossy WebP halves the resolution of its color layers, thin colored lines on a contrasting background lose color sharpness faster than brightness sharpness. Red text on blue is the classic victim, the same weakness explained for JPEG in lossy vs lossless.

What it buys is size. I compared codecs using PSNR, a rough score in decibels where higher means the result is numerically closer to the original. On Picture A, JPEG at quality 90 scored 42.4 and was 219,783 bytes; WebP at quality 80 also scored 42.4 and was 69,274 bytes, about a third. On Picture B, JPEG at quality 80 scored 35.8 at 172,596 bytes against WebP quality 80 at 35.7 and 69,074 bytes. Treat those as hints. PSNR is not how eyes judge a picture, and the quality numbers of different encoders are not on one scale, so judge your own files by looking at them.

The converter on this site writes WebP only in its lossy form, so a PNG converted there is never an exact copy. How to do that conversion, and what to expect, is in converting images to WebP.

What each direction of conversion costs

PNG to lossy WebP is a one-way trade: the file shrinks and exactness is gone. WebP to PNG goes the other way and produces an exact copy of the pixels as they were decoded, but it cannot bring back what the lossy save removed. I took each test picture through WebP at quality 80 and then saved the result as PNG: Picture A went from 69,274 bytes to 372,823, and Picture B from 69,074 to 1,449,284. The PNG is bigger by factors of 5 and 21, and looks identical to the WebP. If you must hand someone a PNG made from a WebP, the larger size is the normal outcome and not a sign that something broke; see converting WebP to JPG or PNG.

Lossless WebP does not have that problem. I decoded a lossless WebP and compared it pixel by pixel with the source: identical for both pictures.

One rule to take away

If the pixels must stay exact or you are unsure where the file will be opened, use PNG. If the image is a photograph or a flat graphic headed for a modern web page and you will look at the result, use WebP and accept that it is lossy. Everything else in this comparison is a refinement of that. A practical habit helps: edit in PNG, publish in WebP, and if a recipient reports a problem, send the PNG. When you cannot tell what a destination accepts, test it with a single file before converting a whole folder, and read the size the page reports for it.