PNG to WebP: How much smaller do your images get?

What WebP offers

WebP supports lossless and lossy compression as well as transparency. Lossless WebP can preserve the decoded pixel values of a PNG, while lossy WebP trades some image information for a potentially smaller file. Format features and metadata handling are not identical, so confirm anything your workflow needs beyond the visible image.

Measure the result instead of relying on an average

The test image below became smaller in both WebP modes, but those figures describe that file and encoder only. Flat graphics, screenshots, photographs, and already optimized PNGs compress differently. Compare the downloaded size with the source and inspect lossy output at the intended display size before choosing a setting.

Format	File size
PNG	480 KB
WebP (lossless)	423 KB
WebP (lossy, quality 80)	85 KB

WebP can preserve transparency

WebP supports an alpha channel, unlike standard JPEG, so transparent areas can remain transparent after conversion. Inspect semitransparent edges and shadows in the result, particularly when using lossy settings or a new encoder.

When keeping PNG is the safer choice

• Compatibility with an established workflow. PNG is widely supported, while some older applications and particular print or design systems may not accept WebP.
• A workflow built around PNG. If downstream tools, a CMS, or a print process specifically expects PNG files, converting adds a step rather than saving one.
• Exchange with unknown recipients. PNG may be the more predictable choice when you cannot confirm what software will open or process the file.

When it's worth converting

The clearest case is website performance: smaller image files mean faster page loads, and that adds up fast across a site with dozens of images. It's also worth it when you're managing a large asset library and storage space matters, or when you need to share a big batch of PNG graphics somewhere with a size limit. For a single one-off PNG you're using once, the savings usually aren't worth the extra step. It's when the same choice repeats hundreds or thousands of times that the size difference shows up.

Example benchmark: one interface image

The illustrated benchmark uses one synthetic 1600×1000 interface image and reports the actual encoder and setting. Use it to understand the comparison, not to forecast an entire site. For production assets, test a representative sample and calculate the total using those measured results.

Converting PNG to WebP

Select the PNG files and create WebP copies, then verify dimensions, transparency, appearance, and size. Converting a lossless WebP back to PNG can reproduce its decoded pixels, but it may not restore metadata discarded during the first conversion. Detail removed by lossy encoding cannot be recovered.

Questions before converting PNG to WebP

Will WebP always be smaller? No. An optimized PNG or a particular image may produce a WebP file of similar or greater size. Compare the actual outputs.

Will lossy WebP look different? It can. Visibility depends on the image, quality setting, scale, and viewer. Check edges, text, gradients, and transparency at the sizes that matter.

Should I convert every PNG on my website to WebP? For images used repeatedly or in large numbers, it's usually worth it. For a handful of small icons, the savings are real but marginal.

Choose the smaller WebP when your measured result is worthwhile and every target supports it. Keep PNG when compatibility or workflow requirements matter more, and retain the source regardless of the delivery format.