Image Quality vs File Size: Finding the Right Balance

Understanding the Quality-Size Tradeoff

The relationship between quality settings and file size is non-linear and this is the most important concept to grasp. Dropping from 100% to 85% quality typically reduces file size by 50-60%, while dropping from 85% to 70% only saves an additional 15-20%. The first quality reduction provides outsized savings because compression algorithms are most efficient at removing the least perceptible information first.

This diminishing returns curve means that the optimal quality setting is almost never 100% and almost never the lowest possible value. There is a zone, typically between 70% and 90%, where you get the most dramatic size reduction with the least visible impact. Finding your specific sweet spot within this range depends on the image content and its intended use.

Why Maximum Quality is Wasteful

A JPG saved at 100% quality is typically only 5-15% smaller than the uncompressed original, while a JPG at 85% quality can be 60-70% smaller. The difference between 100% and 85% is virtually invisible to the human eye in most photographs, yet the file size difference can be enormous. Graviton can achieve up to 90% file size reduction at quality levels that maintain visual excellence.

What "Quality" Really Means

The quality slider in image compression tools represents a level of acceptable information loss, not an absolute measure of image fidelity. A "quality 80" setting in one tool may not produce identical results to "quality 80" in another, because the underlying algorithms and scales differ between implementations.

Perceptual Quality vs Pixel-Perfect Accuracy

Modern compression algorithms prioritize perceptual quality over mathematical accuracy. They leverage models of human vision to discard information that falls below the threshold of perception. This is why a well-compressed image can look identical to the original even though the raw pixel data has changed significantly.

SSIM and Quality Metrics

The Structural Similarity Index (SSIM) is a more meaningful way to measure compression quality than simple pixel comparison. SSIM evaluates luminance, contrast, and structure to produce a score that correlates well with human perception. An SSIM of 0.95 or above generally indicates that compression artifacts are imperceptible to most viewers.

Recommended Quality Settings by Use Case

These recommendations apply to JPG and lossy WebP compression. AVIF achieves comparable visual quality at lower numerical settings due to its more advanced compression algorithm.

Web Photographs (75-85%)

The standard range for most web images. At 80%, a typical photograph is 60-70% smaller than the original with no perceptible quality loss at normal viewing distances. This is the recommended starting point for general web use.

Thumbnails and Previews (60-70%)

Small images displayed at reduced sizes hide compression artifacts effectively. A thumbnail that will never be viewed larger than 200x200 pixels can tolerate much more aggressive compression than a full-size image. Savings of 80-90% are common at these quality levels.

Hero Images (85-95%)

Large, prominent images like hero banners and featured photographs benefit from slightly higher quality because they are displayed at larger sizes where artifacts are more noticeable. Even at 90%, the file will be substantially smaller than at 100%.

Email Images (60-75%)

Email clients often display images at reduced sizes on varied screens. Lower quality settings keep email file sizes small, reducing the chance that messages are clipped or slow to load. Target under 200KB per image for reliable email delivery.

Format Impact on Quality

The same quality percentage produces different results depending on the format, because each format's compression algorithm handles image data differently.

• JPG at 80% — Good quality for most photographs. May show slight blockiness in smooth gradients or around sharp text edges.
• WebP at 80% — Visually comparable or better than JPG at the same setting, but 25-35% smaller file size. WebP handles edges and gradients more gracefully.
• AVIF at 60-65% — Produces visual quality comparable to JPG at 80%. AVIF's quality scale is different, so lower numbers produce comparable results to higher numbers in other formats.

This is why switching formats can be even more effective than adjusting quality. Converting a JPG to WebP at the same quality level gives you a smaller file for free.

Visual Testing Methods

Numbers and metrics are helpful, but the ultimate test of compression quality is whether the result looks good to human eyes in its intended context. Here are practical methods for evaluating your compression results.

Side-by-Side Comparison

Open the original and compressed images side by side at 100% zoom. Pay close attention to areas most prone to artifacts: sharp edges between contrasting colors, areas with fine texture or detail, smooth gradients (look for banding), and text or line art within photographs.

Context Testing

View the compressed image in its actual context. A product image on an e-commerce page, a photo in a blog post, or a banner on a landing page will look different than the same image viewed in isolation. Compression that looks acceptable on its own may look even better in context, where surrounding elements draw attention away from minor artifacts.

When Artifacts Become Visible

Common compression artifacts to watch for include blockiness (square patterns visible in smooth areas), ringing (halos around sharp edges), color banding (visible steps instead of smooth gradients), and loss of fine detail (textures appear smeared or painted). If you see any of these at the intended viewing size, increase quality slightly.

Using Graviton's Quality Controls

Graviton provides intuitive controls for finding the right quality balance for your images. The quality slider gives you precise control over compression level, and advanced controls let you fine-tune format-specific parameters.

Finding Your Optimal Setting

1. Start at the recommended quality for your use case (typically 80% for web images).
2. Compress and review the result. Check both the file size reduction percentage and the visual output.
3. If the result looks perfect, try reducing quality by 5-10% to see if you can achieve additional savings.
4. If you notice artifacts, increase quality by 5% until they disappear.
5. Once you find your threshold, apply it consistently across similar images.

Graviton processes images server-side using streaming and holds them only in memory. Your images are never stored, ensuring complete privacy while you experiment with different quality settings.