How Browsers Convert AVIF Rec. 2020 to sRGB

Modern web browsers translate wide-gamut AVIF images encoded in Rec. 2020 into the standard sRGB color space through an integrated color management pipeline. When an AVIF file targeting the expansive Rec. 2020 color gamut is rendered on a standard sRGB monitor, the browser extracts the embedded color metadata, decodes the pixel values, converts the data to a linear color space, applies a gamut-mapping transformation, and re-encodes the pixels with the sRGB transfer curve. This multi-step process ensures colors are accurately mapped without introducing severe distortion, banding, or clipping artifacts.

1. Metadata Extraction and Identification

The process begins when the browser's media pipeline unpacks the AVIF container (an ISOBMFF structure). The rendering engine inspects the image configuration box and the Color Information Property (colr box). It looks for either an embedded ICC profile or NCLX (Colour Information) metadata specifying:

• Colour Primaries: Value 9 (Rec. ITU-R BT.2020-2).
• Transfer Characteristics: Such as BT.709, BT.2020 (10-bit/12-bit), or HDR curves like PQ (SMPTE ST 2084) or HLG (Rec. 2100).
• Matrix Coefficients: Value 9 (BT.2020 non-constant luminance).

2. AV1 Pixel Decoding and Matrix Conversion

The browser's underlying AV1 decoder (such as libdav1d) decodes the compressed bitstream into raw YUV (often YCbCr 4:2:0 or 4:4:4) planar data. Because display hardware operates in RGB, the rendering engine applies the BT.2020 matrix coefficients to convert the decoded YUV values into non-linear Rec. 2020 \(R'G'B'\) values.

3. Linearization via Transfer Function

Color spaces cannot be accurately transformed using simple linear algebra while the values are still encoded with gamma or high-dynamic-range curves. The rendering engine’s color management system (such as Skia in Chromium, or QCMS in Firefox) applies the Electro-Optical Transfer Function (EOTF) corresponding to the AVIF file's transfer characteristics. This removes the non-linear encoding and converts the pixel values into linear-light Rec. 2020 RGB values.

4. Color Gamut Transformation

Rec. 2020 covers roughly 75.8% of the CIE 1931 color space, whereas sRGB covers only about 35.9%. To map the wider space to the narrower one:

1. Matrix Multiplication: The linear Rec. 2020 RGB values are multiplied by a 3×3 color transformation matrix to translate the coordinates into the CIE XYZ color space (an absolute, device-independent reference space).
2. CIE XYZ to Linear sRGB: The coordinates are multiplied by a second 3×3 matrix that translates the XYZ coordinates into linear sRGB primaries.

5. Gamut Mapping and Clipping

Because Rec. 2020 contains saturated colors that do not physically exist within the sRGB triangle, the linear transformation often results in negative RGB values or values exceeding 1.0 (out-of-gamut values). To resolve this, the browser performs gamut mapping:

• Perceptual or Relative Colorimetric Mapping: Sophisticated engines use gamut compression algorithms (such as CSS Color 4 gamut mapping) to scale out-of-gamut colors toward the sRGB boundary while preserving hue and luminance relationships.
• Hard Clipping: If a simpler colorimetric pipeline is used, out-of-gamut values are clamped directly to the 0.0–1.0 range, retaining maximum saturation at the expense of highlight details.

6. Display Encoding and Compositing

Once the colors fit within the sRGB gamut, the browser applies the standard sRGB inverse EOTF (the sRGB gamma transfer curve) to convert the linear data back into non-linear 8-bit or 10-bit \(R'G'B'\) values.

Finally, the browser's compositor integrates these rendered sRGB pixels into the final visual page layer and submits them to the operating system's windowing system, which sends the standard sRGB signal directly to the monitor.