Those Weird Blotches Around Text (Understanding Compression Artifacts)

What Are Compression Artifacts?

Have you ever noticed fuzzy blotches, rings of discoloration, or blocky pixels surrounding text in an image? These visual distortions are called compression artifacts. They occur when lossy compression algorithms (like those used in JPEG files) discard too much image data to make the file size smaller.

While compression works wonders on complex digital photographs (where subtle details blend together naturally), it struggles on sharp lines, text, and flat logos. Understanding these artifacts will help you choose the right format and settings to avoid them entirely.

A Field Guide to the 4 Main Compression Artifacts

1. Mosquito Noise (Edge Halos)

What it looks like: Fuzzy, dotted halos or "mosquitoes" hovering around the edges of text, lines, or sharp contrast borders.

Why it happens: High-frequency transitions (like a black letter on a white background) require a lot of data to render sharply. When compressed, the algorithm discards high-frequency detail, causing a mathematical ripple effect that translates into visual fuzziness.

2. Blocking (JPEG Macroblocks)

What it looks like: The image looks like it's made of tiny 8x8 grids of solid blocks, especially visible in smooth backgrounds like skies.

Why it happens: The JPEG algorithm splits images into 8x8 pixel blocks and compresses each block individually. When quality is set too low, the boundaries between these blocks become visible, resulting in blocky pixelation.

3. Color Bleeding (Chrominance Sub-sampling)

What it looks like: Colors appear to bleed or smear past their sharp borders. For example, bright red text might have a blurry red glow extending onto a white background.

Why it happens: Human eyes are less sensitive to color details (chrominance) than to brightness details (luminance). Compression algorithms exploit this by discarding up to 75% of color information while keeping brightness intact. Under heavy compression, this makes color boundaries look smeared.

4. Banding (Posterization)

What it looks like: Smooth color gradients (like a sunset or shadow) look like distinct steps or stripes of color rather than a smooth transition.

Why it happens: When color depth is reduced to save space, there aren't enough discrete shades available to display smooth gradients, forcing the image to group colors into hard bands.

How to Avoid Compression Artifacts

• Use PNG for Text and Graphics: PNG is a lossless format. It does not create artifacts and is perfect for logos, screenshots, text documents, and line drawings.
• Use WebP Lossless: WebP supports lossless compression that is typically 26% smaller than PNG while maintaining pixel-perfect accuracy.
• Keep JPEG Quality Above 80: If you must use JPEG, avoid dropping quality below 80%. This prevents blocking and minimizes mosquito noise.
• Avoid Repeated Saves: Every time you open, edit, and re-save a JPEG, you re-compress it, stacking new artifacts on top of old ones. Always edit the original high-resolution master file.