Reference guide · images · Published 2026-08-16 · 3 min read
Choosing an image compression quality setting
Choose the right image quality setting: test per image type, follow the 75 to 85 starting range for photos, and standardise in the build.
- ·Why one number fits all
- ·Quality ranges by format
- ·Standardise in the build
Every image encoder takes a quality number, and the number is a trade, not an absolute: lower quality shrinks the file, higher quality keeps detail. There is no correct setting that works for every image, because the perceptible threshold depends on the content. A flat product shot survives aggressive compression; a photo with fine texture and gradients shows artefacts sooner. The practical method is to find the highest compression (lowest quality number) at which the difference is not visibly distracting, then use that number for the whole library.
Why one number fits all
A library with 15 different quality values is a library nobody can reason about, and it quietly grows heavy because each image was tuned by whoever last exported it. Standardising on one quality setting per format or per image type makes the pipeline predictable and the site uniformly optimised. You tune the value once, commit it, and let every image pass through the same gate.
The baseline for photo-like imagery is a quality of about 75 to 85 for JPEG and WebP. Start around 80, step down in steps of 5 to 10, and compare the output side by side at full size. When a visible difference appears, step back up one notch and keep that value.
Quality ranges by format
| Format | Typical range | Notes |
|---|---|---|
| JPEG | 70 to 90 | Photographs; below 70 artefacts grow fast |
| WebP (lossy) | 60 to 85 | Comparable to JPEG at equal quality but usually smaller |
| AVIF | 30 to 60 | Compresses strongly; needs a fallback on older browsers |
| PNG / lossless WebP | n/a | No quality number, size saved by palette and optimisation |
AVIF's range sits lower because the encoder is more efficient, so an AVIF at quality 45 can look like a WebP at 75. The number carries no cross-format meaning, only within a format, so do not read "80" as the same quality across JPEG and AVIF. A common mistake is converting a JPEG at quality 80 straight to an AVIF at 80 and treating them as equivalent; encode each format from the source at its own tuned value.
Standardise in the build
Once the value is chosen, it belongs in the build, not in memory. The CI conversion article shows how to set the quality and effort as named constants in the conversion step, so a PR changes them deliberately. The compression guide walks the full workflow, and the format guide in the image optimisation index explains which format each quality map applies to.
Verifying after a change is part of the discipline: re-encode a representative set, confirm the byte savings, and spot-check the images that slimmed most for visible artefacts. The right number is the highest compression that your eyes, not the encoder docs, agree is acceptable, and once you find it, one number for a format, committed in the pipeline, keeps the site consistently light.