WebP compression — Settings and quality

Worked example

WebP compression has one control, the Quality slider from 20 to 95 that starts at 78, and for WebP it really does change the result, unlike PNG.

A practical map: 85 to 92 for product cut-outs with soft transparent edges and for graphics with small text, 75 to 82 for general photographs on a web page, 60 to 70 for thumbnails and card images, and under 50 expect smeared textures and blotchy skies. Start at 78 for a 1600 × 900 banner and move five points at a time.

WebP and JPEG numbers are not interchangeable. A WebP at 78 can look cleaner than a JPEG at 78 at a smaller size on many photographs, but that differs by image, so verify by looking, not by the label. The slider belongs to the browser encoder and carries over to the file only as a rough guide.

Transparency is the reason to choose WebP over JPEG for cut-outs. The alpha channel is kept, so a product on a transparent background stays transparent. If you need lossless fidelity for exact brand colours, a PNG may be more appropriate, since the lossy WebP written here will shift fine detail.

Dimensions stay the same, so a 1600 × 900 file remains 1600 × 900 and a small slot may still be overserved. When the banner is shown at 800 px, resize first and compress second. If the new file is not smaller than your source, you get the original back instead of a heavier copy.

WebP still image

WebP still export

Unlike PNG, the slider matters here, so try two or three values and compare the byte sizes.