What Are Compression Artifacts, and How Do You Avoid Them?
Push compression too hard and images start to look wrong: fuzzy halos around text, blocky squares in flat areas, stripes across a smooth sky. These are compression artifacts — the visible side effects of a lossy encoder trying to save space. Here's what causes the common ones and how to keep them out of your images.
Blocking
Lossy formats process images in small square blocks. At low quality, those blocks stop blending smoothly and you see a faint grid, most obvious in skies and shadows. Fix: raise the quality a notch, or use WebP, which handles flat areas better.
Fuzzy edges around text
Sharp, high-contrast edges — especially dark text on a light background — are the hardest thing for photo compression to store. The result is a muddy, coloured haze around letters. Fix: keep text-heavy images in PNG, which is lossless, or use high-quality WebP. Never save a screenshot of text as a low-quality JPG.
Banding in gradients
A smooth transition — a sunset, a soft shadow — can turn into visible stripes when there aren't enough colours to represent it. Fix: use a higher quality setting, or for graphics, keep a larger colour palette.
Re-compression damage
The worst artifacts come from compressing an already-compressed file. Each save bakes in the previous round's errors and adds new ones, so quality drops fast. Fix: always start from the original image, and compress only once.
Avoiding artifacts in one line
Use quality around 80 for photos, keep text and logos in PNG or high-quality WebP, and always compress from the original — not a copy that's already been squeezed.
← Back to blog