Image Compression: What Quality Setting Should You Use?

Image files are typically the largest assets on web pages and apps. A page that takes 4 seconds to load on mobile is often suffering from un-optimized images. But aggressive compression reduces quality. The right answer is in between, and it's more specific than 'just compress it.'

How JPEG Compression Works

JPEG compression divides images into 8×8 pixel blocks and applies a mathematical transform that separates perceptible detail from imperceptible detail. Higher compression settings discard more of the imperceptible detail. At low quality settings, the blocks become visible as 'artifacting' — grid-like patterns particularly visible in smooth gradients and sharp edges.

The Quality Scale Isn't Linear

JPEG quality 100 preserves almost all data. Quality 90 removes mostly imperceptible data — images look essentially identical but are 50% smaller. Quality 80 removes more — for most photos, the difference is still barely visible. Quality 60 starts showing artifacts on close inspection. Quality 40 shows obvious degradation. The steepest quality-per-byte drop-off happens between 90% and 80%, which is why 75–85% is the practical web sweet spot.

Compress Images Online

WebP: The Better Modern Choice

WebP at quality 80 typically looks as good as JPEG at quality 90 but at a smaller file size. For web images, convert to WebP. The converter in Next.js's Image component does this automatically. For manually optimized images, Squoosh.app (free, browser-based) converts to WebP and shows a side-by-side comparison at different quality settings.

For Different Use Cases

• Hero/banner images: 85% JPEG or WebP, progressive encoding
• Product photos in e-commerce: 85-90% (buyers inspect closely)
• Blog inline images: 75-80%, compressed to display dimensions
• Thumbnails/previews: 70-75%, small resolution
• Background images: 65-75%, most detail not visible at scale