WebP vs PNG: a decision flow for choosing
Both formats can hold sharp graphics with a see-through background, so the choice is rarely about what the image looks like. It is about where the file is going and what will open it. Work down the questions below and stop at the first one that applies.
Question 1: Does the file have to open in anything and everything?
If the answer is yes, choose PNG and stop. PNG is the safe format for sending to other people, for uploading to portals that list accepted file types, and for dropping into older editing software or print workflows. MDN records PNG as supported in every version of the major browsers, while it describes WebP as having broad support in current browsers but not deep historical support.
On the retrieval date, Can I use put global WebP browser support at about 97%. That is high, but browsers are only one place a file ends up. Email clients, desktop editors, presentation software and marketplace upload forms are where WebP most often gets turned away.
Question 2: Is the image going on a website you control?
If yes, WebP is worth considering, because page weight is the one place where it pays off. MDN says lossless WebP images are typically 26% smaller than the same images as PNG, and Google's own FAQ repeats the 26% figure. The saving for photos or graphics with a transparent background can be much larger if you accept lossy compression: Google's compression page says replacing a transparent PNG with lossy-plus-alpha WebP saves roughly 60-70% on average.
Treat those as vendor-tested averages. Whether your logo shrinks by a quarter or by two thirds depends entirely on the image.
Question 3: Must every pixel survive exactly?
Some images cannot tolerate any change: a screenshot used as evidence, a pixel-art sprite, a technical diagram with one-pixel lines, a master you will edit again.
- Keep PNG, or
- Use lossless WebP, whose whole purpose is to keep the pixel values intact.
Avoid lossy WebP here. Lossy WebP is built on the same ideas as video compression, throwing away detail it judges you will not miss. MDN's guidance for screenshots, diagrams, logos and line art is to prefer lossless encoding, because blurring and coloured fringes around text and sharp edges are very visible.
Question 4: Is it a photograph saved as PNG?
If the image is a photograph and was saved as PNG, the file is probably much bigger than it needs to be. Lossy WebP (or JPG) will shrink it a lot, at the cost of some detail. Why is my PNG so big goes through this case and others.
Question 5: Does it use only a few flat colours?
PNG already handles this well. The PNG specification allows a palette of up to 256 colours, and an image that fits one can be stored compactly. WebP has a similar idea: Google's documentation describes a colour-indexing step for images with fewer than 256 unique colours. In such cases the two formats may land close together, so convert and compare rather than assuming. On a screenshot-style test image I generated, a 256-colour PNG was less than half the size of the standard PNG.
A quick comparison
| PNG | WebP | |
|---|---|---|
| Compression | Lossless only | Lossy or lossless |
| Transparency | Yes, full alpha | Yes, 8-bit alpha in both modes |
| Animation | Not in the base format | Yes |
| Opens in older software | Almost always | Often not |
| Typical size for web graphics | Larger | Smaller (Google: lossless about 26% smaller) |
| Maximum dimensions | Not a practical concern for everyday images | 16383 x 16383 pixels |
The dimension limit comes from Google's FAQ. It rarely matters for everyday images, but very large panoramas and scans can exceed it.
What I measured
I generated three 1200 x 800 pixel test images with Pillow 11.3 and saved each as PNG (optimised) and lossless WebP:
| Test image | PNG | Lossless WebP |
|---|---|---|
| Photo-like (smooth gradients plus noise) | 917 KB | 781 KB |
| Screenshot-style (text rows on grey) | 27.3 KB | 2.5 KB |
| Logo-style (orange circle, semi-transparent square) | 6.3 KB | 1.6 KB |
That is an illustration, not a benchmark. The images are simple and computer-made, which flatters lossless WebP; real screenshots and logos with gradients and antialiasing will usually show smaller gaps. Run your own images before you commit a whole site.
A sensible default
If you are unsure, a workable habit is to keep PNG as the master, create a WebP only for pages you publish yourself, and send PNG or JPG to anyone else. That keeps the original safe, gets most of the page-weight saving, and avoids the rejected-upload problem. Revisit it if a specific platform tells you it prefers WebP.
Moving between the two
- Going from WebP to PNG, for sharing or editing, use WebP to PNG. It keeps transparency, and PNG output is lossless, but it cannot restore detail a lossy WebP already lost.
- Going from PNG to WebP for a website, use PNG to WebP. Transparency is kept. It needs a browser that can export WebP, and lossy WebP output changes the pixels.
Both tools take one image at a time, up to 50 MB and 40 megapixels, and run in your browser, so file contents are not uploaded to ConvertMango's conversion service. Keep your original PNG as the master and treat the WebP as the delivery copy. Step-by-step instructions are in how to convert WebP to PNG and how to convert PNG to WebP.
Convert it now
Use our WEBP to PNG tool. It runs in your browser, so the contents of your file are not uploaded to our conversion service. You get five free conversions a day without signing up. The allowance resets at 00:00 UTC.
Frequently asked questions
Is WebP smaller than PNG?
Google reports lossless WebP files about 26% smaller than PNGs, and lossy WebP with transparency far smaller still. These are Google's test figures, so compare your own files.
Does WebP keep transparency like PNG?
Yes. WebP has an 8-bit alpha channel in both its lossy and lossless modes.
Will converting a PNG to lossy WebP change the pixels?
Yes. Lossy WebP discards detail. If you need every pixel preserved, use lossless WebP or keep the PNG.
Related tools
More guides
Sources
- Google, 'WebP', https://developers.google.com/speed/webp
- Google, 'WebP Compression Techniques', https://developers.google.com/speed/webp/docs/compression
- Google, 'WebP FAQ', https://developers.google.com/speed/webp/faq
- MDN Web Docs, 'Image file type and format guide', https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types
- Can I use, 'WebP image format', https://caniuse.com/webp
- IETF, 'RFC 2083: PNG (Portable Network Graphics) Specification Version 1.0', https://www.rfc-editor.org/rfc/rfc2083.html