Chroma subsampling

Definitions

Chroma subsampling separates an image into a luma component (Y′) and two chroma components (Cb and Cr) in a Y′CbCr representation. Luma approximates perceived brightness using a non‑linear transfer (denoted by the prime symbol), while the chroma channels encode blue‑minus‑luma and red‑minus‑luma colour differences. Only chroma is downsampled; luma stays at full resolution to preserve edge and detail perception.

The term YUV is often used informally in imaging and video contexts, but for compressed images the correct space is typically Y′CbCr. YUV historically refers to an analogue encoding; Y′CbCr is its digital cousin with clearly defined transfer functions and matrix coefficients (e.g., Rec. 601 or Rec. 709). In practice, most lossy image codecs convert RGB to Y′CbCr internally before applying subsampling and quantisation.

Subsampling is specified by ratios like 4:4:4, 4:2:2, and 4:2:0. These describe the relative density of chroma samples compared to luma over a small reference region. With 4:4:4, chroma and luma share the same spatial grid. With 4:2:2, each horizontal pair of luma samples shares one chroma sample per row. With 4:2:0, chroma is reduced in both axes so that four luma samples share one chroma sample on average.

Because chroma samples are fewer, decoders must upsample chroma when converting back to full-resolution RGB. The quality of this resampling step (e.g., nearest vs bilinear vs bicubic) and the exact chroma sample positioning defined by a format or codec influence visible results. Mismatches in assumed chroma location during conversion can manifest as colour fringing or softness on edges.

Sampling ratios describe the relative spatial resolution of chroma (Cb, Cr) to luma (Y’) in Y’CbCr. The common J:a:b notation (typically 4:a:b) expresses, over a reference region J samples wide and 2 lines high, how many chroma samples exist per row. Luma remains full resolution; only chroma is subsampled. Different standards define chroma sample positioning (“cositing”), especially for 4:2:0 (e.g., MPEG/AVC/HEVC/AV1 vs JPEG), which affects resampling during conversion.

Interpreting J:a:b and common schemes

In J:a:b notation, J is a horizontal reference count of luma samples (often 4). Over a region J pixels wide and two lines high, a and b describe how many chroma samples exist per line for each of Cb and Cr. 4:4:4 means chroma is sampled at every luma location; 4:2:2 halves chroma horizontally on both lines; 4:2:0 halves chroma horizontally and vertically, yielding one quarter as many chroma samples as luma overall in the region. Although definitions vary in wording, the practical takeaway is the relative chroma resolution compared with luma.

Chroma positioning (cositing) and conversions

Chroma samples can be “cosited” differently relative to luma, such as centred between luma samples or aligned with a particular luma pixel position. JPEG typically uses centre-aligned sampling within minimum coded units, while video standards signal chroma locations explicitly and may differ across codecs and profiles. When converting between formats (e.g., transcoding from JPEG to AV1/AVIF or vice versa), a change in chroma positioning requires careful resampling; otherwise, subtle half‑pixel shifts, colour bleeding, or unnecessary blurring can occur.

JPEG (JFIF/Exif)

Most JPEG encoders convert RGB to Y′CbCr and subsample chroma to 4:2:0 or 4:2:2 before DCT and quantisation. The JFIF/Exif metadata stores each component’s sampling factors, which indicate the horizontal and vertical subsampling ratios used. Decoders upsample chroma to reconstruct full‑resolution RGB for display, with quality dependent on the upsampler’s filter and the chroma positioning assumed by the decoder.

For photographic content, 4:2:0 often reduces file size measurably with minimal perceptual impact, especially at moderate to high bitrates. Savings vary with encoder and quantisation, but reductions on the order of 15–30% versus 4:4:4 for similar subjective quality are common. For graphics, UI, small type, and saturated edges, subsampling increases the risk of visible colour fringing, outlining, or mosquito noise around sharp transitions.

JPEG encoders can apply different quantisation tables to luma and chroma, often with coarser quantisation for chroma to compound savings from subsampling. While effective for photos, stacking aggressive chroma quantisation on top of 4:2:0 can exacerbate banding or blotchiness in smooth colour gradients. For assets where colour fidelity at edges matters (e.g., logos), many pipelines keep 4:4:4 to avoid these artefacts, sometimes at a modest size penalty.

Visual impact and artifacts

Human contrast sensitivity is far greater for luminance detail than for chroma. Chroma subsampling exploits this by lowering colour resolution where the eye is less sensitive, which is generally unobtrusive on natural photos. However, high‑contrast, saturated colour boundaries reveal the trade‑off: coloured text on neutral backgrounds, vector graphics, and UI icons show fringing more readily, especially when viewed at 1:1 pixel scale on high‑DPI displays.

Common artefacts include colour bleeding across edges, stair‑stepping or zippering on diagonal lines, and chroma moiré on fine patterns. These can be amplified by the chroma upsampler used during decode, the presence of ringing from DCT quantisation, and any repeated RGB↔Y′CbCr conversions across editing steps. Once chroma has been subsampled and quantised, subsequent resizing or re‑encoding can accumulate errors if the pipeline re‑applies subsampling at each stage.

On the web, the practical impact is a balance: 4:2:0 enables smaller JPEG/WebP/AVIF files and faster transfers, improving page performance metrics like LCP when hero images are photographic. Conversely, for rasterised text, flat fills, and line art, maintaining 4:4:4 (or using a lossless format) protects brand colours and edge clarity that users notice disproportionately to the bytes saved.

What it is: Chroma subsampling reduces the spatial resolution of chroma (color) components relative to luma (brightness), typically in Y′CbCr. Common schemes: 4:4:4 (no subsampling), 4:2:2 (half horizontal chroma), and 4:2:0 (half horizontal and vertical chroma).

Typical usage in web formats

Lossy WebP and AVIF typically default to 4:2:0 for photographs to maximise compression gains from the underlying transforms. Many encoders also support 4:4:4 for images where colour edge fidelity is important. PNG and other lossless RGB formats do not apply chroma subsampling; they store colour at full resolution, which is generally preferable for UI assets and line art when file sizes remain acceptable.

Where asset inventories mix photographic and graphical content, subsampling can be applied selectively as part of an optimisation policy. Photos, portraits, and product lifestyle shots usually tolerate 4:2:0 well. Logos with sharp colour boundaries, infographics, screenshots, and small body text in images benefit from 4:4:4 or a lossless pipeline to avoid colour bleed and to keep anti‑aliased edges clean.

The byte‑saving effect of chroma subsampling depends on the codec and on quantisation settings. Reducing chroma sample counts lowers the amount of data passed to transforms and entropy coding, but overall size is dominated by luma detail in most natural images. Consequently, 4:2:0 can deliver noticeable but content‑dependent savings; at similar perceptual quality targets, it often complements, rather than replaces, other compression controls.

Implementation notes

Subsampling is a choice made at encode time and is signalled in the bitstream. For JPEG, each component’s horizontal and vertical sampling factors define 4:4:4 (1×1), 4:2:2 (2×1), or 4:2:0 (2×2) relative to luma within the minimum coded unit grid. WebP (lossy) and AVIF support both 4:2:0 and 4:4:4; some tooling also exposes 4:2:2. Many encoders default to 4:2:0 for photographs but allow overriding per‑image or per‑class of assets.

Chroma upsampling strategy in decoders affects rendering quality. High‑quality resamplers (e.g., bicubic or edge‑aware filters) reduce visible fringes compared with nearest or simple bilinear methods, especially at 4:2:0. Because web browsers rely on library decoders, behaviour is implementation‑dependent; the same image can look subtly different across platforms if chroma location metadata or upsampling filters differ.

Transcoding between formats with different chroma positioning needs care. When moving from a centre‑sited 4:2:0 source to a grid that assumes a different chroma alignment, proper resampling avoids colour shifts and softening. Repeated encode/decode cycles can progressively degrade chroma, so editing workflows are safer in full‑resolution RGB or 4:4:4 Y′CbCr until the final delivery encode.

Colour management and profiles

YCbCr to RGB conversion depends on the transfer function and matrix coefficients (e.g., sRGB/IEC 61966‑2‑1 for transfer, Rec. 601 or Rec. 709 for primaries). Embedding or signalling accurate ICC profiles and colour information preserves intended colours through the subsampling and decode path. Mismatched assumptions—such as treating Rec. 601 coefficients as Rec. 709—cause small but noticeable hue or saturation errors unrelated to subsampling itself.

Comparisons

4:4:4 vs 4:2:2 vs 4:2:0

• 4:4:4: Full colour resolution; best for text, logos, UI, and screenshots; larger files for photos at equivalent quality.
• 4:2:2: Horizontal chroma reduction; useful compromise for content with vertical edges; common in pro video but less common for web images.
• 4:2:0: Horizontal and vertical chroma reduction; strong size savings for photos; higher risk of colour fringing on saturated, thin features.

Subsampling vs quantisation vs downscaling

• Subsampling reduces the number of chroma samples before transform coding; it targets colour resolution specifically.
• Quantisation lowers precision of transform coefficients; it affects both luma and chroma and controls overall compression strength.
• Downscaling resizes the entire image; it reduces both luma and chroma detail and changes pixel dimensions, which may affect layout and LCP.

FAQs

Does chroma subsampling affect SEO directly?

Not directly. Chroma subsampling is an encoding decision. Its relevance to SEO is indirect through performance: smaller, faster‑loading images can improve Core Web Vitals metrics such as LCP and FID. However, if subsampling degrades key visual elements (e.g., product shots with coloured text or logos), user experience and conversion can suffer, which may negate the benefits of reduced bytes.

When should 4:4:4 be preferred for web images?

4:4:4 is preferable for assets where colour edges must remain crisp: logos, UI icons, small or high‑contrast text, flat fills, and synthetic graphics. It also suits images that will be edited further to avoid cumulative losses from repeated chroma downsampling. For photographic hero images where bytes matter and edges are mostly natural, 4:2:0 is commonly acceptable.

How much file size can 4:2:0 save compared to 4:4:4?

Savings depend on content and encoder settings. Because luma carries most of the texture energy, moving from 4:4:4 to 4:2:0 often yields on the order of 15–30% reduction at similar perceived quality for typical photographs, with larger gains possible on images rich in smooth colour areas. Graphics with hard edges may see less benefit and more visible artefacts.

Does subsampling change colour accuracy or only edge sharpness?

Subsampling primarily reduces colour spatial resolution, so the biggest effects are on edges and fine features. Colour accuracy in flat regions is mostly governed by the RGB↔Y′CbCr conversion matrices, transfer functions, and quantisation. Mislabelled colour primaries or transfer curves can shift hues regardless of subsampling, while poor chroma upsampling can blur or fringe colour boundaries even if overall colourimetry remains correct.

Do AVIF and WebP always use 4:2:0?

No. Both formats support 4:2:0 and 4:4:4, and some tools support 4:2:2. Many encoders default to 4:2:0 because it delivers strong compression for photos, but 4:4:4 is available for assets with sensitive colour edges. Decoder support for 4:4:4 images is broadly available in modern browsers for still images; constraints are more common in video playback pipelines.