Chroma subsampling: 4:2:0 vs 4:4:4

The human retina carries far more rod cells, which detect brightness, than cone cells, which detect colour. The practical consequence is that we resolve fine detail in brightness far better than fine detail in colour.

Encoders exploit this directly. After separating an image into one luma channel and two chroma channels, they keep luma at full resolution and store chroma at half. Three quarters of the colour data is discarded, and on a photograph you genuinely cannot see it.

The three numbers describe a 4-pixel-wide reference block: how many luma samples, how many chroma samples in the top row, and how many in the bottom row.

4:4:4

Four luma, four chroma top, four chroma bottom. Nothing discarded.

4:2:2

Colour sampled at half horizontal resolution, full vertical.

4:2:0

Colour sampled at half resolution in both directions — the zero means the bottom row reuses the top row's samples.

4:2:0 is the default for web JPEG and for essentially all consumer video, which is why it is the behaviour you are almost always getting.

Subsampling assumes colour changes slowly across the image. When it changes abruptly, the assumption breaks.

Consider red text on a white background. The boundary between red and white is instantaneous, but the encoder only has one colour sample per 2 × 2 block of pixels. Blocks straddling the edge must average red and white into a single sample, producing a muddy orange fringe along every stroke — and the thinner the text, the worse it is, because more of it is edge.

Blue on white and pure saturated lines suffer identically. This is why a screenshot of a code editor with syntax highlighting looks so poor as a JPEG: it is almost entirely thin, saturated, coloured shapes.

If you can control subsampling, use 4:4:4 for anything containing coloured text, interface elements or fine coloured line work, and 4:2:0 for photographs.

Most browser-based tools, including this one, do not expose the setting — a canvas encoder chooses it for you, and typically picks 4:2:0 at lower quality settings and 4:4:4 at very high ones. We would rather say that plainly than offer a control that has no effect on the output.

The practical answer is therefore the same as it always is for this content: do not use a lossy format for it. PNG and lossless WebP have no chroma channels to subsample, so the problem cannot occur. Both will usually give you a smaller and sharper file for a screenshot than any JPEG setting can.