Chroma Subsampling Explained: 4:4:4 vs 4:2:0 for Image Optimization

If you've ever dug into video or image encoding settings, you've likely seen numbers like 4:4:4, 4:2:2, or 4:2:0. These numbers represent chroma subsampling. This brilliant engineering trick drastically reduces image and video file size without significantly degrading perceived visual quality.

To understand why this works, we first have to understand a little bit about human biology.

Luma vs Chroma: Hacking the Human Eye

The human eye contains light-sensitive cells called rods and cones. We have far more cells dedicated to detecting brightness (luminance) than to detecting colour (chrominance).

Because we are biologically less sensitive to colour resolution, engineers realised they could discard a massive amount of colour data in a digital image while keeping all the brightness data, and the human eye wouldn't notice.

In digital imaging, an image is often separated into:

• Luma (Y'): The brightness/black-and-white detail of the image.
• Chroma (Cb/Cr): The colour information.

Chroma subsampling intentionally reduces the resolution of the chroma channels while leaving the luma channel at full resolution.

The Jab Notation Explained

Chroma subsampling is typically expressed as a three-part ratio (like 420). This describes how colour is sampled across a block of pixels (usually 4 pixels wide by 2 pixels high).

• J (First digit): The number of pixels wide the reference block is. This is almost always 4.
• a (Second digit): The number of colour samples in the top row of the 4-pixel block.
• b (Third digit): The number of colour samples in the bottom row of the 4-pixel block.

444 (No Subsampling)

In 444, every single pixel has its own unique colour information. There is no compression happening here.

• Top row: 4 colour samples.
• Bottom row: 4 colour samples.
• Use case: High-end professional photography, medical imaging, and pixel art that require absolute colour precision.

422 (50% Colour Data)

In 422, two adjacent pixels on a row share the same colour information.

• Top row: 2 colour samples (each stretched across two pixels).
• Bottom row: 2 colour samples.
• Use case: High-end video production and professional broadcasting. It cuts the colour data in half but is still visually flawless to the naked eye.

420 (25% Colour Data)

In 420, the colour data is cut drastically. A 2x2 block of four pixels all share the same colour.

• Top row: 2 colour samples.
• Bottom row: 0 new colour samples (it just reuses the colours from the top row).
• Use case: Standard web images (JPEG), YouTube, Netflix, and Blu-ray discs. It discards 75% of the colour data, yet looks nearly identical to 444 for natural photos!

When does 420 break down?

While 420 is practically magic for natural photographs and video, it struggles with sharp, artificial edges where colours change abruptly.

If you apply 420 subsampling to a screenshot of small red text on a blue background, the shared colour blocks will cause the colours to bleed into each other, resulting in fuzzy, illegible text. This phenomenon is known as "chroma smearing" or "colour bleeding."

For pixel art, diagrams, and sharp UI screenshots, avoid chroma subsampling and stick to formats like PNG, or force your JPEG encoder to use 444.

How Browsers Handle Subsampling?

When you use client-side tools like our Image Compressor, your browser's native graphics engine (via the HTML5 Canvas API) does the heavy lifting.

Modern browsers make smart, automatic decisions about subsampling. When you lower the quality slider (typically below 80% or 90%), the browser automatically switches from 444 to 420 subsampling to save space. This is why you can achieve massive file-size reductions on our Image Compressor without noticing a drop in visual quality.

Frequently Asked Questions

Does chroma subsampling reduce image dimensions?
No. Subsampling only reduces the resolution of the colour data. The image's overall width and height (in pixels) remain the same.

Can you convert 4:2:0 back to 4:4:4?
You can technically upsample the file back to 4:4:4, but you can't magically recover the lost colour data. The image will take up more space on disk but will not look any better than the 420 original.

Does PNG use chroma subsampling?
No. PNG is a lossless format that always preserves full 444 colour data (or RGBA), which is why PNG files are significantly larger than JPEGs for photographs, but perfect for sharp graphics and text.

Ready to see it in action? Try dropping a high-resolution photo into the CampaignMorph Image Compressor, lower the quality to 70%, and use the Before/After slider to see how well chroma subsampling tricks your eyes!