WebP Lossy Compression: Smaller Photos Without Quality Loss

WebP’s lossy mode uses VP8 intra-frame encoding to shrink photo file sizes up to 34% smaller than JPEG while maintaining equivalent visual quality.

WebP lossy compression uses the VP8 intra-frame encoding algorithm — derived directly from Google’s VP8 video codec — to reduce photo file sizes dramatically without introducing noticeable visual degradation. When you encode an image with WebP’s lossy mode, the encoder analyses spatial redundancies across the image and discards perceptual detail that the human eye is unlikely to detect, producing files that look nearly identical to the original at a fraction of the byte count.

How It Works #

WebP’s lossy encoder applies a three-stage pipeline to each image block:

1. Predictive Coding — The encoder predicts the value of each pixel block based on neighbouring blocks that have already been encoded. Only the difference (residual) between the prediction and the actual value is stored, dramatically reducing the amount of data needed.
2. Discrete Cosine Transform (DCT) — The residual data for each block is converted from the spatial domain into frequency coefficients using a DCT. This separates coarse structure (low frequencies) from fine texture (high frequencies), making it easy to decide what to keep.
3. Quantization — The frequency coefficients are divided by a quantization step size and rounded. Higher-frequency (fine-detail) coefficients are quantized more aggressively, discarding imperceptible texture while preserving edges and broad colour gradients. The quality parameter you set directly controls the quantization step size.

Quality Settings #

WebP’s lossy encoder accepts a quality parameter on a 0–100 scale. Lower values apply heavier quantization, producing smaller files with more visible artefacts. Higher values preserve more detail at the cost of larger file sizes.

• Quality Parameter — The -q flag in cwebp maps directly to this 0–100 scale. A value of 100 uses the least quantization (closest to lossless), while 0 uses the most aggressive compression available in lossy mode.
• File Size Impact — Moving from quality 85 to quality 75 typically reduces file size by 20–30% with minimal perceptible change. Moving from 75 to 60 can halve the file size but introduces visible block artefacts on detailed textures.
• SSIM Reference — Quality comparisons between codecs are best measured using the Structural Similarity Index (SSIM) rather than raw quality numbers, because JPEG’s Q80 and WebP’s Q80 do not represent the same level of compression.

Size vs JPEG #

At equivalent SSIM quality scores, WebP lossy images are consistently 25–34% smaller than JPEG files. Google’s original WebP study evaluated the codec against a corpus of over one million images and found a median reduction of 34% at equivalent quality. This translates directly into faster page loads, lower bandwidth costs, and better Core Web Vitals scores — without asking users to accept lower-quality images.

For a full head-to-head breakdown of file size, quality metrics, and when to switch, see WebP vs JPEG.

The 25–34% advantage holds across a wide range of photographic content, but images with large flat-colour areas (illustrations, UI screenshots) benefit less from lossy WebP. Use lossless mode for those instead.

Choosing a Quality Level #

Select your quality setting based on how the image will be used and how closely viewers will scrutinise it.

Quality 90–100: Archival and Print Preparation — Use this range when the WebP file is a working asset that will be re-edited or used as a source for print. The file size advantage over JPEG is smaller (roughly 10–20%), but every recoverable detail is preserved. Avoid using these files directly on web pages — the file sizes are unnecessarily large for screen display.

Quality 75–85: Web Photos (Recommended) — This range delivers the best balance of visual fidelity and file size for photographic content displayed on web pages. At quality 80, most viewers cannot distinguish the output from the original, and file sizes are 25–34% smaller than an equivalent JPEG. Use this range for hero images, product photography, and editorial photos.

Quality 50–74: Thumbnails and Previews — Acceptable for small thumbnails (below 200×200 px) and low-resolution preview images where compression artefacts are less visible at small sizes. Avoid this range for any image that users will view at full size or zoom into.

Quality Below 50: Not Recommended — At quality values below 50, block artefacts and colour banding become clearly visible even at a glance. Reserve this range only for placeholder images or cases where bandwidth is so constrained that artefacts are an acceptable trade-off.

Converting Images with cwebp #

Use the cwebp command-line tool (part of the libwebp package) to encode images with your chosen quality setting.

# Convert with quality 80 (recommended for most web photos)
cwebp -q 80 input.jpg -o output.webp

# Higher quality, larger file
cwebp -q 90 input.jpg -o output.webp

# Aggressive compression for thumbnails
cwebp -q 60 input.jpg -o output.webp

For e-commerce and photography sites, quality 80–85 is the sweet spot. It consistently passes visual quality checks while delivering file sizes small enough to satisfy Core Web Vitals LCP targets. Run a quick A/B comparison at Q80 before committing to a higher setting — most audiences will not notice the difference.

If you’d rather not install the command-line tool, our free online WebP converter applies the same quality controls (1–100) directly in your browser.