Those Weird Blotches Around Text: A Field Guide to Compression Artifacts

Compression artifacts are the visible byproducts of a lossy encoder trying to squeeze an image into a smaller file. They show up most often when an image is exported at mid-range quality (say, 60) and then recompressed — or when the original image contains hard edges and flat colours that JPEG handles particularly poorly. Once you know what to look for, you can adjust encoding settings to avoid the most visible defects.

Blocking — The Grid Pattern

JPEG works in 8×8 pixel blocks. When quality is low, each block is quantised independently, and the boundaries between blocks become visible — especially in smooth gradient areas. The image looks like it's divided into a grid of slightly different-coloured squares.

Ringing — The Halo Around Edges

At the boundary between a sharp edge (black text on white, a hard shadow line), the DCT encoder produces oscillations called Gibbs ringing — bright halos on one side of the edge and dark halos on the other. In web screenshots and UI images, this makes text appear blurry or surrounded by ghost shadows.

Mosquito Noise — The "Buzzing" Around Text

Mosquito noise is a specific type of ringing that appears around high-contrast text. The name comes from the way small, rapidly-changing artifacts appear to "swarm" around letterforms at moderate zoom levels. It's especially pronounced for dark text on white backgrounds and is the reason JPEG is a poor format for screenshots with text.

Colour Banding — Staircase Gradients

Smooth gradients (sky, blurred backgrounds, shadows) get quantised into visible steps. Instead of a smooth transition from blue to lighter blue, you see 5–10 discrete bands. This is common in PNG at lower bit depths and in JPEG at quality below 70 for gradient-heavy images.

Chroma Subsampling Artifacts — Colour Bleeding

JPEG compresses colour (chroma) channels at lower resolution than the brightness (luma) channel, using a scheme called 4:2:0 or 4:2:2 subsampling. This is invisible on photographs but causes colour to "bleed" outside the edges of coloured text or logos. Red text on white, for instance, often gets a pink glow around the letterforms.

// Force 4:4:4 chroma subsampling in Canvas (no subsampling)
// Note: Canvas API doesn't expose chroma subsampling directly.
// To avoid chroma artifacts on text/graphics, use PNG or WebP lossless instead.
const canvas = document.createElement('canvas');
canvas.getContext('2d').drawImage(img, 0, 0);

// WebP lossless — no chroma subsampling, no blocking
const blob = await new Promise(res => canvas.toBlob(res, 'image/webp'));

// JPEG at quality 95+ minimises but doesn't eliminate chroma artifacts
const jpegBlob = await new Promise(res => canvas.toBlob(res, 'image/jpeg', 0.95));

Format Recommendations by Content Type

• ●Photographs: JPEG or WebP lossy — artifacts are minimal at quality 75+ and are masked by natural texture
• ●Screenshots with text: PNG or WebP lossless — lossy formats create mosquito noise around every letter
• ●Mixed content (photo + text overlay): WebP quality 85+ to minimise ringing
• ●Logos and icons: SVG > PNG > WebP lossless — never JPEG

In our image compressor, use the before/after compare view at 1:1 zoom to check for artifacts before downloading. Look around text edges and in smooth gradient areas first — that's where encoding problems appear earliest.