Where the Savings Come From
PNG compresses without losing anything, which is exactly why photos and screenshots stored as PNG get huge. WebP's lossy mode is built on video-codec prediction and discards detail the eye doesn't register. On a typical screenshot, 85 percent quality lands between a quarter and a tenth of the PNG's size with no visible difference at normal zoom.
Alpha transparency survives the trip, which is the practical reason WebP replaced the old "JPG for photos, PNG for transparency" split. One format now covers both, and every browser that matters has decoded it since 2020.
Reading the quality slider
| Setting | What it suits |
|---|---|
| 90 to 100 | Hero images, product shots, anything zoomable |
| 80 to 89 | The default range for page images and screenshots |
| 60 to 79 | Thumbnails, backgrounds, blurred decorative art |
| Below 60 | Visible smearing on most content, use with intent |
Convert once at 85, glance at the result, and only move the slider if you see a reason. The green percentage in the readout is the page weight you just gave back to your users.
Fitting it into a build
If the PNG is also oversized in pixels, resize first on the resizer, then convert. Shrinking dimensions before encoding compounds the savings, and the two tools hand files back and forth in seconds.