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 color. The practical consequence is that we resolve fine detail in brightness far better than fine detail in color.

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 color 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

Color sampled at half horizontal resolution, full vertical.

4:2:0

Color 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 behavior you are almost always getting.

Subsampling assumes color 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 color 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, colored shapes.

If you can control subsampling, use 4:4:4 for anything containing colored text, interface elements or fine colored 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.