WebP vs PNG: which format should you use?
PNG and WebP overlap more than any other pair of image formats: both are free to use, both support full transparency, and both can store an image with zero quality loss. The difference is file size — and it is usually big enough to decide the question for you.
The short answer
Use WebP for anything you publish on the web — it produces meaningfully smaller files at the same visual quality, and every modern browser has supported it since 2020. Use PNG when the file leaves the browser: images you will keep editing, files you need to paste into older desktop software, or uploads to a service that rejects WebP. PNG is the safer interchange format; WebP is the better delivery format.
How the two formats compress
PNG is strictly lossless. It filters each row of pixels and then compresses the result with DEFLATE — the same algorithm used in ZIP files, standardised in the mid-1990s. Every pixel comes back exactly as it went in, no matter how many times you open and re-save the file.
WebP, released by Google in 2010, has two independent modes:
- Lossy WebP is derived from the VP8 video codec. It predicts each block of pixels from its neighbours and encodes only the difference, which is far more effective than JPEG's older approach. Google's own studies measured lossy WebP at roughly 25–34% smaller than JPEG at equivalent quality.
- Lossless WebP uses a separate, more modern predictor set plus colour-cache tricks, and typically lands around 25% smaller than an optimised PNG of the same image — with identical, pixel-perfect output.
That second point surprises people: even if you refuse to give up a single pixel, lossless WebP still beats PNG on size. PNG's only remaining technical advantages are compatibility and simplicity.
File-size examples
Numbers vary with content, but these are typical of what you'll see converting real files:
- A 1920×1080 screenshot saved as PNG at ~450 KB becomes ~330 KB as lossless WebP, or ~90–130 KB as lossy WebP at quality 80 with no visible difference on screen.
- A 1200×800 photo exported as PNG can easily hit 1.5–2 MB. The same photo as lossy WebP at quality 80 is typically 80–150 KB — a 90%+ reduction, because PNG is simply the wrong tool for photographic content.
- A small logo with transparency at 8 KB PNG might drop to 5–6 KB as lossless WebP. Real savings, but at this scale either format is fine.
The pattern: the more photographic the image, the more WebP wins. For flat-colour graphics the gap narrows but rarely reverses.
Transparency
Both formats support a full 8-bit alpha channel, so soft shadows, anti-aliased edges and semi-transparent overlays work identically in both. This is the big practical difference from JPEG, which has no transparency at all. If you need transparency on a website today, WebP does everything PNG does at a smaller size. Note that lossy WebP compresses the alpha channel too, which can very slightly soften edges — use lossless WebP for logos and icons where edges must stay crisp.
Browser and app support
WebP's compatibility story is settled on the web: Chrome and Edge have supported it for over a decade, Firefox since version 65 (January 2019), and Safari since version 14 (September 2020). Since 2020, effectively every browser in circulation renders WebP, and usage trackers put support above 96% of global traffic — the stragglers are long-unsupported browsers like Internet Explorer.
Outside the browser it's less clean. Windows and macOS preview WebP natively now, and Photoshop opens it since v23 (2022), but plenty of older desktop tools, CMS plugins, email clients and upload forms still expect PNG or JPG. That's the main reason PNG isn't going anywhere: it opens absolutely everywhere, without exception.
When to choose PNG
- Working files you'll re-edit — PNG round-trips through every editor ever made.
- Uploads to picky platforms — print services, government forms, some marketplaces and older CMSs may reject WebP.
- Email attachments — some email clients still won't render inline WebP.
- Pixel-exact archival where universal readability decades from now matters more than 25% of disk space.
When to choose WebP
- Any image on a public website — smaller files mean faster loads and better Core Web Vitals, which feed into search rankings.
- Photos that need transparency — lossy WebP with alpha has no PNG equivalent; a PNG of the same photo would be many times larger.
- Large screenshot libraries or documentation sites, where lossless WebP quietly cuts storage and bandwidth by a quarter.
Converting between them
Conversion is quick and, in the PNG-to-lossless-WebP direction, completely reversible. You can convert PNG to WebP right in your browser — files are processed on your device and never uploaded. Going the other way, the WebP to PNG converter is the standard fix when an app or upload form refuses a WebP file. And if your PNGs just need to be smaller without changing format, the image compressor can often cut them down substantially on its own.
Frequently asked questions
Does converting PNG to WebP lose quality?
Only if you choose lossy mode. Lossless WebP reproduces the PNG pixel-for-pixel while still shaving roughly a quarter off the file size. Lossy WebP discards some detail in exchange for much bigger savings — at quality 75–80 the difference is invisible for most images at normal viewing sizes.
Is WebP better than PNG for logos and icons?
On the web, yes — use lossless WebP so edges and flat colours stay perfectly crisp, and you'll still get a smaller file than PNG. For a logo you send to printers, clients or design tools, keep a PNG (or better, the original SVG) as the master copy.
Why do some sites still serve PNG instead of WebP?
Usually inertia or tooling: an old CMS without WebP output, editors uploading whatever their screenshot tool produces, or a build pipeline nobody has touched. There's no longer a browser-support reason to avoid WebP.
Can WebP be animated?
Yes — animated WebP exists and is far more efficient than GIF. For longer clips, though, an MP4 video is smaller still; see our guide to the best image format for the web.
Related guides
- AVIF vs WebP — how the newest web format compares to WebP, and when it's worth the extra effort.
- How to reduce image file size — the full workflow: resize, choose a format, set quality, strip metadata.