JPEG Compression Artifacts: What They Are and How to Avoid Them
You've probably seen it — a photo that looks fine until you zoom in and notice blocky patterns, smeared edges, or weird color blotches. These visual imperfections are called JPEG compression artifacts, and they're a side effect of aggressive lossy compression.
What Are JPEG Compression Artifacts?
JPEG compression works by dividing the image into 8×8 pixel blocks and applying the Discrete Cosine Transform (DCT) to each block. At lower quality settings, the algorithm discards detailed frequency information to achieve smaller file sizes.
The visual results include:
- Blocking: Hard edges between 8×8 pixel blocks, especially in smooth gradients
- Ringing: Halo effects around sharp edges like text or objects
- Color smearing: Loss of fine color detail, particularly in skin tones and subtle gradients
- Mosquito noise: Speckled noise around high-contrast edges
When Are Artifacts Most Visible?
Artifacts are most obvious in:
- Images with smooth gradients: Blue skies, skin tones, blurred backgrounds
- Images with sharp text: Screenshots, infographics, slides
- Images with high contrast edges: Logos, line art, illustrations
Photographic images with lots of detail and texture are actually the most forgiving — the natural complexity of the image hides the compression artifacts better.
What Quality Setting Causes Artifacts?
JPEG quality is measured on a scale of 0–100:
| Quality Setting | Artifact Level | File Size |
|---|---|---|
| 90–100 | Virtually invisible | Very large |
| 75–85 | Minimal, acceptable for web | Moderate |
| 60–74 | Noticeable on close inspection | Small |
| Below 60 | Obvious blocking and noise | Very small |
For most web use, 75–85% quality achieves a good balance of file size and visual quality with minimal visible artifacts.
How to Avoid JPEG Artifacts
Use the right format for your content: JPEG is designed for photographs. For images with text, sharp edges, or flat color areas (logos, screenshots, infographics), use PNG or WebP instead. These formats handle such content without artifacts.
Don't re-compress: Each round of JPEG compression introduces new artifacts. Always compress from the original high-quality source, never from an already-compressed image.
Use higher quality settings for important images: A product hero image deserves 85% quality. A tiny thumbnail can handle 70%.
Use WebP instead of JPEG: WebP achieves smaller files at the same quality level with far fewer visible artifacts, especially for images with gradients and skin tones.
How to Fix Existing Artifacts
If you already have an image with visible JPEG artifacts:
- 1Convert to PNG to prevent further degradation
- 2Use image editing software's noise reduction or smoothing filters (this reduces detail but removes blocks)
- 3If possible, obtain the original high-quality source and re-compress at an appropriate quality
Converting Images to Reduce Artifacts
Use ToolFlow's Image Compressor to compress images at quality settings that avoid visible artifacts. Try 80% quality as a starting point and preview the result before downloading.
For screenshots and text-heavy images, use the PNG export option to completely avoid JPEG artifacts.
Conclusion
JPEG compression artifacts are the trade-off of lossy compression. The key to avoiding them is using the right quality setting (75–85% for web photos), choosing the right format (PNG or WebP for text and graphics), and always compressing from the original source.