Compression Artifact Audit 2025 — What to look for, when it worsens, and how to avoid

Compression trades size for quality. This guide systematizes how to spot regressions quickly and preserve quality.

We focus on “fast to judge” views: format differences, check routine, typical artifact patterns, and mitigations. Includes a short checklist for design/production/delivery/QA phases.

Key artifacts and where to look

• Blocking (macroblock grid): obvious in low‑quality JPEG; check flat skies/skin
• Ringing (halos): around strong edges; inspect logos/text/line art
• Banding (steps in gradients): especially on sky/blurred backgrounds
• Color bleed/chroma fringing: red/blue thin lines; check color borders
• Mosquito noise: ripples around details; check hair/textures

Reference: Image Quality Metrics SSIM/PSNR/Butteraugli — Practical Guide 2025

Observation tips (reduce misses)

• Zoom 200–300% and alternate between flat areas and edges (artifacts pop faster)
• Always compare against the original with a horizontal slider; lower visual load
• Don’t judge on one frame: verify at least 3 “risky” patterns (skin/sky/wood/fine lines)
• Compare same file size across formats to reveal each codec’s strengths/weaknesses

Conditions that worsen artifacts

1. Over‑compression after multiple conversions (re‑encoding)
2. Low bitrate + high‑frequency textures (grass, hair, fabric)
3. Excessive sharpening
4. 4:2:0 subsampling on thin red/blue lines
5. Colorspace mishandling (unintended gamut/gamma changes)

By‑format tendencies

• JPEG: blocking/ringing most visible; skin/sky get dirty quickly at low quality
• WebP (lossy): chroma bleed on very thin text; color edges may smear at high saturation
• AVIF: best at same size on photos; at very low bitrate, contrast areas can “smudge”

Practical flow (quick checks)

1. Start in Image Compressor to fix max‑width and “quality” and get a baseline size
2. Compare against original in Compare Slider and run the checks above
3. If needed, try subsampling and colorspace variants in Advanced Converter

Related: Ultimate Image Compression Strategy 2025 – A Practical Guide to Preserving Quality While Optimizing Perceived Speed

Heuristic thresholds (ballpark)

• UI text/diagrams (line art priority): for JPEG/WebP, keep quality mid‑to‑high and compare AVIF at same size; try 4:4:4 if fringing
• Photography (skin/sky): prefer AVIF; if halos, reduce sharpening and allow a bit of noise
• Hero visuals: aim 200–400KB; choose the candidate with near‑zero perceptual mismatch vs original

Mitigations

• Avoid re‑compression: export once from the highest‑quality source
• Revisit subsampling: 4:4:4 for text/lines; 4:2:0 for photos (default)
• Add mild noise: reduces banding with posterization‑prone gradients
• Set realistic max‑widths: oversized inputs invite compression load and artifacts

CLI starting points

JPEG (cjpeg‑style)

# Line‑art/UI assets (no subsampling + modest saturation control)
cjpeg -quality 82 -sample 1x1 -optimize -progressive -outfile out.jpg in.png

# Photography (standard 4:2:0)
cjpeg -quality 78 -sample 2x2 -optimize -progressive -outfile out.jpg in.png

WebP (cwebp)

# Preserve line art where possible
cwebp -q 82 -m 6 -alpha_q 90 -mt -o out.webp in.png

# Photography efficiency
cwebp -q 72 -m 4 -mt -o out.webp in.jpg

AVIF (avifenc)

# Balanced speed/quality (speed 6, CQ 28 as a start)
avifenc --speed 6 --min 20 --max 35 --cq-level 28 -a tune=psnr -o out.avif in.png

# Line art: try 4:4:4
avifenc --speed 6 --min 18 --max 32 --cq-level 26 --yuv 444 -o out.avif in.png

Note: Actual thresholds vary by asset. Final decisions should be made by perceptual comparison vs the original.

QA checklist

• [ ] No block/banding on flat backgrounds
• [ ] No halos/bleed around text/logos
• [ ] No mosquito noise on fine patterns
• [ ] Colorspace/gamut as intended (sRGB/P3)
• [ ] Within size budget with clear per‑use thresholds

5‑minute audit

1. Prepare originals and 2–3 candidates (format × quality × size)
2. Compare at 200% in order: flat → edges → fine lines → skin → gradient
3. Pick the least objectionable; if too large, re‑tune and re‑check
4. Double‑check at 1x/2x/3x reps for final

FAQ

• Q: Are SSIM/PSNR enough? A: They help but don’t replace perception. Halos/banding can disagree with metrics.
• Q: WebP vs AVIF? A: AVIF tends to win on photos; WebP can be better for UI/line art and speed.

Summary

Define “what to look at,” and you can guarantee quality quickly. Use comparison and fewer recompressions to avoid compounding artifacts.

Appendix A: tiny compare UI

<div class="cmp">
  <img src="original.jpg" alt="original">
  <img class="top" src="candidate.avif" alt="candidate">
</div>
<input type="range" min="0" max="100" value="50" id="slider" />

<style>
  .cmp { position: relative; width: min(800px, 90vw); aspect-ratio: 4 / 3; }
  .cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cmp img.top { clip-path: inset(0 0 0 calc(var(--split, 50%) )); }
  #slider { width: min(800px, 90vw); margin-top: 8px; }
</style>
<script>
  slider.addEventListener('input', (e) => {
    document.querySelector('.cmp img.top').style.setProperty('--split', e.target.value + '%');
  });
  slider.dispatchEvent(new Event('input'));
<\/script>

Appendix B: test textures to keep around

• Gradients (horizontal/radial)
• Fine line grids (with red/blue/black high‑frequency samples)
• Skin/sky/wood/hair/fabric
• Text/logos (hard edges)

Bundle a set of “likely to break” images to make each decision quicker.