WEBP vs PNG — File Size, Transparency & Browser Support
PNG has been the usual choice for lossless images with transparency for a long time. WebP, created by Google, can store the same kind of image either losslessly or with lossy compression, and it keeps transparency in both modes. This page explains the practical differences and shows what happened when we converted three test images with our own converter.
Updated September 17, 2026 · TryDocsy team
Our test: three PNGs converted to WebP
On September 17, 2026 we made three PNG test images in Microsoft Edge 153 with the canvas PNG encoder, then converted each one on TryDocsy's Universal Image Converter with WEBP selected as the output. We ran every file twice: once at the default Quality of 90% and once at 100%. We read each output file's RIFF chunks to see which encoding Edge used. At 90% it wrote lossy WebP (a VP8 chunk, plus an ALPH chunk when the image had transparency); at 100% it wrote lossless WebP (a VP8L chunk).
| Test image | PNG input | WebP, Quality 90% (lossy) | WebP, Quality 100% (lossless) |
|---|---|---|---|
| Logo on a transparent background (512×512): gradient circle, white triangle, shadowed text | 112,077 B | 13,736 B-87.7% | 38,068 B-66% |
| Photo-like cutout (1200×800): generated colour gradients with random noise inside an oval with soft transparent edges | 1,144,091 B | 186,164 B-83.7% | 798,384 B-30.2% |
| UI screenshot mock-up (1280×720, no transparency): sidebar, header and 30 lines of code-style text | 103,017 B | 53,242 B-48.3% | 15,934 B-84.5% |
These are three generated test images, not a representative sample of real photos. The PNG inputs came from a browser's default PNG encoder, and a PNG optimiser could make them smaller. A different browser, or a dedicated encoder such as cwebp, will give different numbers.
Two results stand out. Lossless WebP is not automatically the smallest option: for the noisy photo-like image it saved about 30% over PNG, while lossy WebP saved about 84%. For the screenshot, the opposite held: lossless WebP was the smallest file of all, because flat colours and repeated text shapes compress very well without loss.
How the two formats compress images
PNG: always lossless
PNG runs each row of pixels through a prediction filter (None, Sub, Up, Average or Paeth) and then compresses the result with DEFLATE. Decoding gives back exactly the pixels that were saved. The catch is that detailed or noisy images, such as photos, stay large, because lossless compression can't throw any detail away.
WebP: lossy or lossless
Lossy WebP is based on the VP8 video codec's way of coding single frames and discards detail to save space. Lossless WebP (VP8L) keeps every pixel. Google's WebP page (developers.google.com/speed/webp, last updated August 7, 2025) says lossless WebP images are 26% smaller than PNGs and lossy WebP images are 25–34% smaller than comparable JPEGs at equivalent quality. Those are Google's figures for its own test images; our table above shows how much a single file can differ.
Transparency in PNG and WebP
Both formats can store a full alpha channel, so soft shadows and anti-aliased edges look the same when the image is placed on a coloured page.
PNG with alpha
Transparency is stored losslessly together with the colours. That is ideal for logos and icons, but a large transparent photo cutout stays big: our 1200×800 test cutout was over a megabyte as PNG.
WebP with alpha
WebP can pair lossy colour data with a separate alpha channel. Google says lossy WebP with transparency typically gives 3× smaller files than PNG, and lossless WebP adds transparency for just 22% additional bytes. In our test the same cutout dropped to 186,164 bytes as lossy WebP with alpha.
Browser support for WebP
When we checked Can I Use (caniuse.com/webp) on September 17, 2026, it listed WebP at 96.74% full plus 0.08% partial support, 96.82% of global usage in total. These are the first versions it marks as fully supported:
Google Chrome
Version 32 and later
Microsoft Edge
Version 18 and later
Mozilla Firefox
Version 65 and later
Apple Safari
16.0 and later; iOS Safari 14.0 and later
Can I Use also notes that desktop Safari 14.0 to 15.6 fully supports WebP but needs macOS 11 Big Sur or later. Browser support is not the same as support in every desktop app, email client or upload form, which is the main reason PNG is still worth keeping around.
Which one to use
Choose WebP for:
- Images on your own website: smaller files download faster, and every current major browser can show them.
- Product cutouts and photos with transparency: lossy WebP with alpha keeps the transparent background at a fraction of the PNG size.
- Screenshots for the web: try lossless WebP; in our test it beat PNG by a wide margin.
Choose PNG for:
- Master copies you will keep editing: a lossless file doesn't lose quality each time it is saved.
- Files for other people's software: email attachments, documents and upload forms that list PNG but not WebP.
- When a form or printer asks for PNG: follow the stated format rather than converting.
Frequently Asked Questions About WEBP vs. PNG
Is WebP always smaller than PNG?
No. Google reports that lossless WebP images are 26% smaller than PNGs on its test set, but individual files vary. In our own test, a 1200×800 photo-like cutout saved as lossless WebP in Edge was 798,384 bytes against a 1,144,091-byte PNG, while the lossy version at quality 90 was 186,164 bytes. Always compare the actual files.
Does WebP support transparency like PNG?
Yes. WebP supports an alpha channel in both lossless and lossy modes. In our test the lossy WebP files still carried an ALPH (alpha) chunk, so transparent edges survived the conversion.
How widely is WebP supported by browsers?
Can I Use (caniuse.com/webp) showed 96.74% full plus 0.08% partial support, 96.82% of global usage in total, when we checked on September 17, 2026. Full support starts at Chrome 32, Edge 18, Firefox 65, Safari 16.0 and iOS Safari 14.0.
Does TryDocsy's converter make lossless or lossy WebP?
It passes the Quality slider value to the browser's canvas encoder. In Microsoft Edge 153, 100% produced lossless WebP (a VP8L chunk) and 90% produced lossy WebP (a VP8 chunk plus alpha). Other browsers use their own encoders, so results can differ.
When should I keep PNG instead of WebP?
Keep PNG when the file will be opened by software you don't control that may not read WebP, when you need an exact lossless master to keep editing, or when a form or print shop explicitly asks for PNG.
Will lossy WebP blur text in screenshots?
It can. Lossy compression discards detail, which shows first around sharp text and thin lines. For screenshots, compare a lossless export: in our UI screenshot test, lossless WebP at 100% was 15,934 bytes, smaller than both the 103,017-byte PNG and the 53,242-byte lossy WebP at 90%.
Are my images uploaded when I convert between WebP and PNG on TryDocsy?
No. The converter decodes each image and re-encodes it with the browser's canvas inside the page, so the image data is not sent to a server.