The JPEG quality slider is one of the most misunderstood settings in digital imaging. Most people save at 90–100 "to be safe" — and end up with files 3–5× larger than they need to be with no visible benefit.
The truth is counterintuitive: JPEG quality 80 and quality 95 look virtually identical on screen but have dramatically different file sizes. Understanding why — and knowing exactly where the perceptual threshold sits — is the most valuable image optimization knowledge you can have.
How the JPEG Quality Scale Actually Works
The JPEG quality scale (0–100) is not linear. It's a mapping from a human-readable percentage to a quantization table that controls how aggressively the algorithm discards high-frequency detail in 8×8 pixel blocks.
The key insight: the quality scale has massively diminishing returns above 75. The jump from Q50 to Q75 produces a dramatically better-looking image. The jump from Q75 to Q95 produces a file that's 2–3× larger with changes that require a magnifying glass to find.
Quality Level Data Table
Tested on a 1200×800 pixel landscape photograph (baseline 100% = Q95 file size):
| Quality Level | Relative File Size | Visual Quality | Artifacts |
|---|---|---|---|
| 95 | 100% (baseline) | Near-perfect | None visible |
| 90 | ~72% | Excellent ✓ | None visible |
| 85 | ~54% | Excellent ✓ | None visible at normal size |
| 82 | ~47% | Excellent ✓ | None visible at normal size |
| 80 | ~44% | Very good ✓ | Invisible at normal viewing |
| 75 | ~38% | Very good ✓ | Barely visible at 200%+ zoom |
| 70 | ~33% | Good ~ | Slightly visible at 200%+ |
| 60 | ~26% | Acceptable ~ | Visible at 100% on retina |
| 50 | ~22% | Poor ✗ | Clearly visible blocking |
| Below 40 | <18% | Unacceptable ✗ | Severe blocking and ringing |
The Perceptual Threshold Explained
The human visual system has a perceptual threshold — a point below which it literally cannot detect image degradation. For JPEG, this threshold sits at approximately quality 75–80 for standard displays and quality 80–85 for HiDPI/Retina displays.
Below this threshold, the discarded detail is in the high-frequency domain — fine texture and edge sharpness — that the brain reconstructs from context rather than perceiving directly. Above this threshold, the data removed is in the low-to-mid frequency range that the eye detects readily.
Factors that shift the threshold:
- Display density: Retina screens show artifacts more readily — use 80–85 minimum
- Subject: Human faces and smooth gradients (sky, skin) show artifacts more than busy textures
- Viewing size: Large hero images need higher quality than small thumbnails
- Viewing distance: Mobile users hold screens closer and see more detail
Recommended Settings By Use Case
| Use Case | Recommended Quality | Reasoning |
|---|---|---|
| Hero / banner images | 80–82 | Large display size, retina screens, prominent placement |
| Blog post featured images | 78–82 | Medium-large, often viewed on desktop |
| Product photographs (e-commerce) | 80–85 | Users inspect closely for purchase decisions |
| Portfolio / photography site | 82–88 | Quality is the product — err higher |
| Article body images | 75–80 | Moderate size, not subject to close inspection |
| Thumbnails (<200px) | 65–72 | Small display size hides artifacts |
| Background images | 65–72 | Content overlays hide detail |
| Open Graph / social images | 80–85 | Displayed at unpredictable sizes |
Understanding JPEG Artifacts
Knowing what to look for helps you evaluate your compressions:
- Blocking: Rectangular 8×8 pixel grid pattern visible in smooth areas (sky, skin). Most common artifact, appears first at lower quality.
- Ringing: Halo or ghost edge effect around high-contrast boundaries (text on backgrounds, sharp edges). JPEG handles these poorly at any quality.
- Color banding: Discrete steps in smooth color gradients instead of smooth transitions.
- Mosquito noise: Buzzy, noisy texture around edges, especially text.
JPEG handles text overlaid on photographs particularly poorly — the hard edges of letterforms create ringing artifacts at any quality below 90. If you have text on your images, use WebP or PNG instead of JPEG, or keep quality above 88.
The Re-Compression Trap
This is the most damaging JPEG mistake: saving a JPEG as a JPEG multiple times. Each compression cycle permanently removes more data and adds new artifacts on top of old ones. Even saving at Q95 from a Q80 source degrades the image.
The rule is absolute: always compress from a lossless source. Keep your originals as RAW, TIFF, or PNG. Export a JPEG once, for its final destination. Never re-save a JPEG as JPEG.
If someone sends you a JPEG and you open and re-save it, you've introduced generation loss regardless of quality setting. The damage is permanent. Always request source files, not JPEG exports.
JPEG Quality vs WebP Quality
WebP and JPEG quality scales are not equivalent. A WebP quality of 80 is not visually equivalent to JPEG quality 80 — WebP achieves better visual quality at the same numerical setting.
| Desired Visual Quality | JPEG Setting | WebP Setting | File Size Difference |
|---|---|---|---|
| Near-perfect | 90–95 | 85–90 | WebP ~30% smaller |
| Excellent (web standard) | 80–85 | 78–82 | WebP ~28% smaller |
| Good (thumbnails) | 70–75 | 68–72 | WebP ~26% smaller |
This is why switching from JPEG to WebP at the same visual quality produces smaller files — WebP is simply a more efficient codec.
FAQ
Is JPEG quality 80 good enough?
For most web use cases: yes. JPEG quality 80 is visually indistinguishable from quality 95 on standard displays at normal viewing distances. The file is ~56% smaller. It's the professional standard for web photography.
What JPEG quality does Google use?
Google's PageSpeed Insights recommends serving images at 85 quality maximum. Google's own product images use 80–85. Their tooling (Lighthouse, WebP recommendations) treats Q85 as "lossless equivalent for web purposes."
Should I use 72 DPI or 96 DPI for web JPEGs?
DPI is irrelevant for web images. Browsers render based on pixel dimensions, not DPI metadata. A 1200×800 JPEG at 72 DPI and 1200×800 at 300 DPI are identical on screen. Set pixel dimensions; ignore DPI for web work.