Chroma subsampling: 4:2:2 and 4:2:0 explained

Luma and chroma

The YCbCr transform splits a color into the luma $Y$ , a weighted sum of R, G and B, and two color differences $C_b$ and $C_r$ :

Y = 0.299\,R + 0.587\,G + 0.114\,B, \qquad C_b = 128 + \frac{B - Y}{1.772}, \qquad C_r = 128 + \frac{R - Y}{1.402}

Edges, texture and text live almost entirely in $Y$ . The chroma channels mostly contain large, smooth regions, because object colors change much less often than shading does. The visual system matches this: its resolution for color differences is several times lower than for brightness.

Subsampling schemes

The chroma channels are stored at a reduced resolution, one value per $f_x \times f_y$ block (here the block average). The notation $J{:}a{:}b$ describes a region 4 pixels wide and 2 rows high: $J = 4$ luma samples per row, $a$ chroma samples in the first row and $b$ additional ones in the second.

4:4:4: no subsampling.
4:2:2: half horizontal resolution, $2 \times 1$ blocks. Common in professional video.
4:2:0: half resolution in both directions, $2 \times 2$ blocks. The default for JPEG and most video.
4:1:1: a quarter of the horizontal resolution, $4 \times 1$ blocks.

With $f_x \times f_y$ blocks, the number of stored values per pixel drops from 3 to

1 + \frac{2}{f_x f_y}, \qquad \text{e.g. } 1.5 \text{ for 4:2:0, which halves the raw data.}

To display the image, the decoder upsamples the chroma channels back to full size, by repeating each value (nearest neighbor) or by interpolating between block centers (bilinear), and converts back to RGB.

Where it fails. Subsampling is nearly invisible in natural images, but not for sharp edges between strongly colored regions of similar brightness, such as red text on blue. There the edge is mostly a chroma edge, and it gets blurred or blocky. This is why screenshots with colored text often look smeared after JPEG compression.

Try this

Compare the landscape at 4:2:0 with the original. Can you find any difference without zooming?
Switch “reduce” to luma Y with the same scheme. It saves less data, but the image gets visibly blurry and blocky.
Try 8 × 8 blocks on chroma. Zoom in: color bleeds across edges, while the shapes stay sharp.
Open the colored text at 4:2:0 and zoom to 4×. Red on blue and magenta on green suffer most, black on white not at all.
Look at the $C_b$ and $C_r$ channels. In 8 × 8 mode they are coarse blocks, yet the image still looks detailed.
Compare nearest-neighbor and bilinear upsampling at 4 × 4 blocks: blocky versus soft color fringes.
The zone plate is gray, so its chroma is constant. Chroma subsampling changes nothing, luma subsampling destroys it.