Introduction: Stop Guessing Quality Numbers
Most people compress images by guessing a quality number — 80%, 75%, maybe 90% — and hoping for the best. The result is either over-compressed images with visible artifacts, or under-compressed ones wasting bandwidth for no reason.
There's a better way. The right quality setting for any image is deterministic — it depends on the image type, the output format, and what the image contains. This tutorial gives you the exact starting numbers and a simple 6-step process to dial them in precisely.
Why the Quality Setting Matters More Than You Think
The quality setting is the single biggest lever in image optimization. It determines both file size and visual quality simultaneously. A difference of just 10 percentage points can mean:
- Quality 85% vs 75%: 30–40% larger file, but virtually zero visible difference for photos
- Quality 75% vs 65%: 20% smaller file, but visible blockiness appears in smooth areas
- Quality 80% (WebP) vs 80% (JPEG): WebP is 25–35% smaller for the same visual result
Getting the quality setting right means you capture the maximum savings before quality degradation starts — which is exactly the balance you need.
Quality Settings by Image Type — Quick Reference
| Image Type | Recommended Format | Quality Setting | Expected Savings | Notes |
|---|---|---|---|---|
| Blog/Article Photos | WebP | 75–80% | 70–80% | Hero and body images — visually indistinguishable |
| Product Photos | WebP | 80–85% | 60–70% | Higher quality to preserve product detail |
| Screenshots | WebP or PNG | 85–90% | 40–55% | Text and UI elements need higher quality |
| Thumbnails | WebP | 70–75% | 75–85% | Small display size — more compression tolerated |
| Logos / Icons | PNG or WebP lossless | Lossless | 20–40% | Flat colors — lossy creates banding |
| Background Images | WebP | 70–78% | 75–85% | Partially hidden by content — more compression OK |
| Hero / Banner Images | WebP or AVIF | 78–82% | 65–78% | High visibility — balance quality carefully |
The 6-Step Process for Finding Perfect Quality
1 Identify Your Image Type
Classify your image: photo, product shot, screenshot, logo/icon, or thumbnail. This determines your starting quality range from the table above.
2 Set Your Starting Quality
Pick the midpoint of your recommended range. For photos: start at 78%. For product shots: start at 82%. For screenshots: start at 87%.
3 Open in a Side-by-Side Comparison Tool
Upload to ConvertiImage or Squoosh. View the original and compressed version simultaneously at your starting quality.
4 Zoom to 100% and Inspect These Zones
Check three critical areas: (a) smooth regions like sky or backgrounds for blockiness, (b) sharp edges like text or product outlines for halos, (c) fine detail areas like fabric or hair for blurring. These are where artifacts appear first.
5 Adjust in 5% Increments
If you see artifacts: increase by 5% and re-check. If everything looks perfect: decrease by 5% and re-check. Repeat until you find the lowest quality where no artifacts are visible at 100% zoom.
6 Record and Apply as Your Batch Default
Save your final quality setting for that image category. Use it as the default in batch processing for all similar images. Revisit only when you change formats or image sources.
How to Spot Compression Artifacts During Your Review
| Artifact Type | What It Looks Like | Where to Look |
|---|---|---|
| Blockiness | Visible grid of squares | Smooth backgrounds, sky, skin |
| Color Banding | Stepped color transitions | Gradients, sky, water |
| Blurring | Soft, muddy edges | Fine textures, text, product detail |
| Mosquito Noise | Halo/ringing around edges | High-contrast edges, text overlays |
Settings for Specific Use Cases
WordPress Blog
- Featured images (hero): WebP 78%, resize to max 1200px wide
- Body images: WebP 75%, resize to 800px wide (matching content width)
- Thumbnails: WebP 72%, resize to 400×300px
E-Commerce Store
- Main product images: WebP 82%, at least 800×800px for zoom
- Gallery thumbnails: WebP 75%, 200×200px
- Category images: WebP 78%, 600px wide
Portfolio / Photography Site
- Gallery images: WebP 85%, resize to 1600px wide max
- Thumbnails: WebP 78%, 400px wide
- Fullscreen showcase: WebP 82–85% or AVIF 80%
Advanced Tips for Power Users
- Use AVIF for hero images. AVIF achieves the same visual quality as WebP at 50%+ smaller file sizes. At 80% quality, AVIF and WebP 85% are perceptually identical — but AVIF's file is dramatically smaller.
- Try going lower for thumbnails. At small display sizes (under 300px), quality artifacts are nearly invisible. You can often use 65–70% quality for thumbnails with no visible impact.
- Resize before compressing. A 4000px photo compressed at 80% is still 5× larger than an 800px version at 80%. Resize to display size first — this is the single biggest optimization you can make.
- Use different quality per format. If converting JPEG→WebP, use WebP quality = JPEG quality − 5 to get the same visual result in a smaller file.
- Set a file size ceiling, not just a quality floor. If your compressed image is still over 150KB after hitting your quality target, resize it smaller or switch to AVIF.
Conclusion: A System That Works Every Time
Finding the perfect compression quality setting isn't guesswork — it's a repeatable 6-step process. Identify the image type, start from the reference table, preview at 100% zoom, adjust in 5% increments, and record your final setting as a batch default.
Apply this system once per image category and you'll have optimal defaults you can use automatically from that point forward. Maximum savings, zero visible artifacts — every time.
Frequently Asked Questions
Photos: 75–80% WebP. Product images: 80–85%. Screenshots: 85–90%. Thumbnails: 70–75%. These achieve 60–80% file size reduction with no perceptible quality loss.
At 100% zoom, look for: blockiness in smooth areas, color banding in gradients, blurring at edges, and mosquito noise (halos) around objects. Any of these means increase quality by 5–10%.
No. Different image types have very different tolerances. Photos can handle 75–80% while screenshots need 85–90% to avoid text artifacts. Using one setting for everything either over-compresses some images or wastes savings on others.
WebP 80% typically looks equivalent to JPEG 85–90% while being significantly smaller. When converting JPEG→WebP, try quality = (original JPEG quality) − 5 as your starting point. You'll usually get the same or better visual result in a smaller file.
