Quality vs Size: Finding the Optimal Compression Ratio
"What quality setting should I use?" This is a question everyone faces when working with images. Set it too high and files remain large; set it too low and quality is unacceptable. So what is the optimal compression quality? The answer is not a fixed number — it depends on your specific needs and image content.
Understanding the Quality-Size Relationship
The relationship between compression quality and file size is not linear. This is a crucial concept many people overlook:
| JPEG Quality | Typical File Size (Relative) | SSIM Score |
|---|---|---|
| 100% | 100% (baseline) | 1.000 |
| 95% | ~60% | 0.998 |
| 85% | ~30% | 0.995 |
| 75% | ~20% | 0.990 |
| 50% | ~10% | 0.970 |
| 25% | ~5% | 0.920 |
Notice that dropping from 100% to 85% reduces file size by 70%, while SSIM only decreases from 1.000 to 0.995 — a difference virtually invisible to the human eye. But from 50% to 25%, the file only halves while quality drops noticeably.
Key Takeaway: The 75-85% quality range is the "sweet spot" — file size decreases dramatically while visual quality remains nearly unchanged. Below 50%, each increment of compression yields diminishing file size returns but increasingly visible quality loss.
What Is SSIM?
SSIM (Structural Similarity Index Measure) is a scientific method for measuring the similarity between two images. It models human visual perception by considering luminance, contrast, and structure:
- SSIM = 1.000 — Images are identical
- SSIM ≥ 0.995 — Differences are negligible, requiring magnification to detect
- SSIM ≥ 0.980 — Slight differences exist but are not obvious during normal viewing
- SSIM ≥ 0.950 — Differences are noticeable but still acceptable
- SSIM < 0.900 — Clear quality degradation
SSIM is more reflective of actual human perception than traditional PSNR (Peak Signal-to-Noise Ratio), which is why it is widely used for evaluating image compression quality.
Optimal Settings by Image Type
Different content types respond differently to compression:
Photographs
Photos contain abundant color gradients and detail, making them ideal candidates for lossy compression. A quality setting of 75-85% typically maintains SSIM above 0.990.
Text Screenshots
Images containing text are very sensitive to compression. Lossy compression causes blurring and artifacts around text edges. Use PNG lossless compression, or keep JPEG quality at 90% or above.
Charts and Infographics
Charts typically feature large solid-color areas and crisp lines. Use PNG or SVG format, or keep JPEG quality at 85% or above.
E-commerce Product Photos
Product photos need to show detail while loading quickly. A quality setting of 80-85% is recommended, ensuring image dimensions do not exceed actual display needs.
Mozilla's JPEG Research
Mozilla conducted extensive quality testing during the development of the mozjpeg encoder. Their findings include:
- Improved quantization tables can reduce file size by an additional 5-10% at the same quality level
- Progressive JPEG provides a better experience during network transmission
- Chroma subsampling (4:2:0) can reduce data by approximately 33% with negligible perceptual quality loss
WebP Compression Efficiency
Google's WebP format is typically 25-35% smaller than JPEG at equivalent visual quality. This means if you currently use JPEG at 80% quality, converting to WebP can further reduce file size while maintaining the same perceived quality.
| Format | Average Size at 80% Quality | SSIM |
|---|---|---|
| JPEG (standard) | 100 KB (baseline) | 0.992 |
| JPEG (mozjpeg) | 85 KB | 0.992 |
| WebP | 70 KB | 0.993 |
| AVIF | 55 KB | 0.993 |
Practical Recommendations
- Start at 80% — For most web scenarios, 80% is a safe starting point
- Use A/B comparison — Toggle between original and compressed to confirm acceptable quality
- Consider WebP — Get smaller files at the same quality level
- Adjust by content — Photos tolerate more compression; text images need conservative settings
- Test on mobile — Check compression results on phone screens; small displays are generally more forgiving
Conclusion
Finding the optimal compression ratio is not guesswork — it is a scientifically quantifiable process. By understanding SSIM metrics, knowing the effects of different quality settings, and adjusting for your content type, you can achieve the perfect balance between quality and size.
References
- Wang, Z., Bovik, A. C., Sheikh, H. R., & Simoncelli, E. P. "Image Quality Assessment: From Error Visibility to Structural Similarity." IEEE Transactions on Image Processing, vol. 13, no. 4, 2004. https://ieeexplore.ieee.org/document/1284395
- Mozilla. "Mozilla JPEG Encoder Project (mozjpeg)." GitHub, 2024. https://github.com/mozilla/mozjpeg
- Google. "WebP Compression Study." Google Developers, 2023. https://developers.google.com/speed/webp/docs/webp_study
- Google. "A New Image Format for the Web." Google Developers, 2023. https://developers.google.com/speed/webp