JPEG Artifacts Explained: Blocking, Ringing, Banding, and Color Bleed
Where visible artifacts originate
A simplified JPEG pipeline converts RGB to brightness and color components, divides the image into 8×8 blocks, transforms each block with a discrete cosine transform (DCT), quantizes the resulting coefficients, and entropy-encodes them. Quantization is the step that actually discards information. A lower quality setting generally increases its rounding steps, removing more fine-frequency information.
Many JPEG encoders also use 4:2:0 chroma subsampling: color is stored at lower spatial resolution than brightness. This often works well for natural photos, but thin colored text and hard color boundaries expose the tradeoff. Artifacts are therefore not one vague form of "lower quality"; they have recognizable shapes and causes.
Blocking: why an 8×8 grid appears
Each JPEG block is transformed and quantized separately. Neighboring reconstructed blocks need not meet at precisely the same tone. In a smooth wall, sky, or shadow, even a small difference can make the block boundary visible as a horizontal and vertical grid. Stronger quantization makes it more likely; foliage or other busy textures can hide it.
If blocking appears, return to the original and try a higher quality. If the picture is much larger than the final display, resize before encoding rather than sacrificing quality on unnecessary pixels.
Ringing or "mosquito noise" around sharp edges
An abrupt edge needs many high-frequency DCT terms. When those terms are discarded, the remaining frequencies approximate the edge with small oscillations. They appear as bright or dark speckles and halos around letters, tree branches, hair, railings, and building outlines. A face may still look smooth while a fine branch in its background has already broken up.
For text screenshots, PNG or lossless WebP is often a better choice than continuing to raise JPEG quality. For a photograph, raise quality enough to preserve its important high-contrast edges.
Banding in gradients
Smooth changes in sky, fog, skin, and shadows need fine tonal steps. Coarse quantization can collapse nearby tones into the same encoded value, leaving visible bands instead of a continuous gradient. Limited 8-bit levels and chroma subsampling can make color transitions deteriorate before brightness transitions do.
Do not confuse bands with the rectangular grid of blocking. Inspect a broad gradient at the actual display size and compare a higher JPEG quality or a WebP export if the transition matters.
Color bleed at saturated boundaries
When chroma is downsampled, neighboring color values are averaged. A red edge against black or white can acquire purple, green, or orange fringe pixels that did not exist in the source. Luminance may still look sharp, making this form of damage particularly distracting around icons, neon signs, and colored text. PNG and lossless WebP retain these boundaries more predictably.
Why screenshots expose JPEG's weaknesses
A screenshot often combines a flat background with one-pixel strokes and crisp lettering. The background reveals block boundaries; the strokes reveal ringing; colored antialiasing reveals chroma errors. Re-saving the screenshot through a messaging app or CMS can repeat the damage.
| Artifact | Appearance | Typical location | First response |
|---|---|---|---|
| Blocking | Rectangular 8×8 grid | Sky, walls, smooth blur | Raise quality; compare WebP |
| Ringing | Speckles or halos at edges | Text, branches, hair | PNG/lossless WebP for graphics; raise quality for photos |
| Banding | Steps through a smooth gradient | Sky, skin, shadows | Raise quality or compare another format |
| Color bleed | False color beyond an edge | Saturated text and icons | Use PNG or full-chroma/lossless output |
Prevent artifacts in the workflow
- Export text, charts, UI, and line graphics as PNG or lossless WebP. A 64–256-color palette can help for simple graphics if text edges remain intact.
- Encode a photograph once from the master. Repeated JPEG saves introduce generation loss.
- Treat quality around 80–88 as a test range, not a guarantee; inspect the image itself.
- Resize oversize photos before compression instead of compensating with very low quality.
- Compare WebP for difficult gradients and detailed photos.
- Complete cropping, rotation, and color edits before the final lossy encode.
Once detail is gone, another compressor cannot restore it. If an already degraded JPEG has blocks or bands, return to the original asset instead of saving that JPEG at a higher setting. The image compression tutorial shows how to use the comparison panel, and the format guide helps decide when to change formats.