How to Compress Images for the Web Without Wrecking Them
Most compression advice is "pick quality 70 and hope". It doesn't have to be hope: we measured how file size and visible quality actually respond to every setting. Here's the decision procedure, backed by the numbers.
The Three Decisions (in the right order)
Compression quality is the last decision, not the first. In our resizing study, the single strongest lever was width: delivering an image at 800px instead of 1600px cut the file to 0.27× at high fidelity, while the most aggressive quality reduction (Q50) only reached 0.77×. So:
- Pick the delivery width — where will this image actually be viewed?
- Pick the format — see our format decision guide.
- Then pick quality — using the per-content-type numbers below.
Quality, by Content Type (measured)
From our JPEG quality study — 20 images re-encoded at Q50–Q90 with file size and SSIM measured at every step:
| Content type | Recommended quality | Why (measured) |
|---|---|---|
| Photos | Q50–Q70 | Q50 averaged 149 KB (0.77×) at SSIM 0.96; Q70 cost +28% size for +0.04 SSIM — diminishing returns above Q70. |
| Screenshots / UI | Don't use lossy JPEG — lossless WebP | JPEG artifacts are visible on text edges at every quality we tested. |
| Text documents / flat art | Lossless only | JPEG was larger than PNG at all qualities here — the wrong format entirely. |
Beware the Q70 "trap zone": on flat art and documents, Q70 produced larger files than Q50 with worse fidelity in our measurements — the encoder spends bytes fighting the hard edges and loses. If a lossy encode doesn't clearly beat lossless for this image, don't use it.
Step by Step (2 minutes)
- If the image is much larger than its display size, resize it first to ~1.5–2× the CSS display width (covers retina screens).
- Open the Image Compression tool and drop the file in. It processes locally — nothing uploads.
- Set quality 60 for photos (or 50 for thumbnails/hero images above the fold where speed matters most).
- Compare the preview. If artifacts bother you, step up to 70 — then stop; above 70 the measured size cost grows faster than the visible gain.
- Download. The file name tells you the settings used.
Three Mistakes That Cost People Bytes
- Re-compressing an already-compressed JPEG. Measured: re-encoding a Q80 photo at Q70 changed size by ≈1% — all cost, no benefit. Always compress from the original.
- Quality 100 as "safe default". Measured: +60% file size over Q50 on photos for a fidelity gain invisible at display size.
- Skipping the resize. A 4000px photo displayed at 800px makes every visitor download 11× more pixels than they see.