Introduction: The Problem With Going Too Far
You compressed an image. Saved 85% in file size. Uploaded it. Then noticed it looks grainy, blocky, or just off. Sound familiar?
Over-compression is one of the most common — and most avoidable — mistakes in web publishing. The good news: once you understand why it happens, you'll never make the mistake again.
This guide breaks down the exact science behind quality destruction, shows you the danger thresholds to avoid, and gives you simple rules that protect every image you compress — without sacrificing speed.
The Science: What Happens Inside Your Image When You Compress
Most web images use lossy compression — formats like JPEG, WebP (lossy mode), and AVIF discard image data during encoding. This is how they achieve dramatic file size reductions.
The encoding process works by dividing the image into small blocks (typically 8×8 pixels) and applying a mathematical transform (DCT — Discrete Cosine Transform) to each block. Higher compression removes more of the fine frequency detail within each block.
The problems appear when too much data is removed:
- Block boundaries become visible — adjacent 8×8 blocks don't match, creating a grid-like pattern
- Fine detail disappears — hair, fabric, and texture become smooth blobs
- Color accuracy drops — subtle color gradients become stepped bands
- Edge halos appear — high-contrast edges develop fuzzy outlines (mosquito noise)
The 4 Compression Artifacts That Destroy Image Quality
1. Blockiness (DCT Blocking)
The most recognizable artifact. Appears as a visible grid of squares, especially noticeable in smooth-toned areas like sky, skin, or backgrounds. Caused by block boundaries becoming mismatched at high compression levels.
Where it appears: Smooth gradients, out-of-focus backgrounds, flat color areas.
2. Color Banding
Instead of a smooth gradient from one color to another, you see distinct "steps" or bands of color. Common in sunset photos, blue skies, and dark-to-light transitions. Caused by the encoder reducing the number of distinct colors to save space.
Where it appears: Sky, fog, water reflections, blurred backgrounds.
3. Blur and Detail Loss
Fine textures, sharp edges, and intricate details (tree leaves, hair, fabric weave) become soft and muddy. This is the encoder averaging out high-frequency detail to reduce data.
Where it appears: Detailed textures, product close-ups, small text in images.
4. Mosquito Noise (Ringing)
A halo effect that appears around high-contrast edges — like text on a background, a logo against white space, or a sharp horizon line. Named for the swarming-dots appearance around the edge.
Where it appears: Text overlays, logo edges, sharp architectural lines.
Quality Loss Thresholds by Format
| Format | Safe Zone | Caution Zone | Danger Zone |
|---|---|---|---|
| JPEG | 80–100% | 70–79% | Below 70% |
| WebP (lossy) | 75–100% | 65–74% | Below 65% |
| AVIF | 70–100% | 55–69% | Below 55% |
| PNG | Lossless — no quality setting | — | — |
Generation Loss: Why Re-Saving Makes It Worse
A less-known cause of quality destruction is generation loss — the compounding effect of re-compressing an already-compressed image.
Here's what happens: when you open a JPEG and re-save it, the algorithm treats the existing artifact patterns as "real" image detail — and then compresses them further. Each cycle adds new artifacts on top of old ones.
- Re-save 1: barely noticeable difference
- Re-save 3: subtle but present artifacts in smooth areas
- Re-save 5: clearly visible quality degradation
- Re-save 10+: severe destruction, especially in gradient areas
How to Prevent Over-Compression: 5 Rules
- Never go below 75% quality for photos (or 85% for screenshots). These are your floor values.
- Always start from the original source file. If you don't have it, treat the highest-quality version you have as your new original.
- Preview at 100% zoom before exporting. Check smooth areas and sharp edges specifically.
- Use a tool with side-by-side comparison. ConvertiImage and Squoosh both show original vs compressed side-by-side.
- Switch to WebP or AVIF. Modern codecs achieve far more savings at the same perceived quality as JPEG — meaning you can compress more aggressively while staying in the safe zone.
Quick Reference: Tips for Safe Compression
- Photos: use WebP at 78–82% — sweet spot of quality and savings
- Screenshots: use WebP at 85–90% or PNG lossless
- Product images: use WebP at 80–85% with a visual preview check
- When in doubt: increase quality by 5% — the file size difference is small but the quality difference is large
- If you see any artifacts at your current setting: it's already too low
Conclusion: Know Your Threshold, Protect Your Images
Over-compression doesn't announce itself during the upload — it shows up after the page goes live, in the form of blurry product shots and blocky hero images.
The fix is simple: know your thresholds (75% for photos, 85% for screenshots), preview before exporting, and always start from originals. Apply these three rules and you'll never over-compress again.
Frequently Asked Questions
For JPEG and WebP lossy: artifacts become visible below 70% on photos. For screenshots and text: stay above 85%. For AVIF: the threshold is lower (~60%) due to a more efficient codec.
No. Lost data is permanently gone. You cannot recover quality from a compressed file. Always keep your original and export from it — never re-compress a compressed image.
The four most common: Blockiness (visible 8×8 pixel squares), Color banding (stepped gradients), Blurring (loss of edge sharpness), and Mosquito noise (halo effect around high-contrast edges).
Each re-save applies lossy compression to already-compressed data — called generation loss. After 3–5 re-saves, artifacts compound and become clearly visible. Always edit from the original and export only once.
