Rendering HDR Images Accurately on the Web

Rendering High Dynamic Range (HDR) imagery on the web requires balancing expanded luminance and wider color gamuts against the fragmented landscape of modern consumer displays. Because users view web content on everything from standard sRGB office monitors to ultra-bright, wide-gamut OLED mobile screens, web teams cannot rely on a single image asset or color profile. Achieving accurate, visually consistent presentation involves combining modern image formats, progressive enhancement via CSS media features, disciplined color space management, and automated tone mapping fallbacks.

Modern Format Selection

Standard web formats like 8-bit JPEG and PNG are limited to the sRGB color space and Standard Dynamic Range (SDR), leading to clipped highlights and banding when stretched into HDR contexts. Development teams should adopt modern formats like AVIF and JPEG XL, which natively support 10-bit and 12-bit color depths, higher peak brightness metadata, and transfer functions such as Perceptual Quantizer (PQ) and Hybrid Log-Gamma (HLG). AVIF, in particular, offers wide browser support and allows embedded ICC profiles or NCLX color metadata to ensure the host operating system interprets luminance levels correctly.

Responsive Delivery with CSS Media Features

Delivering an unmanaged HDR asset to an SDR display often produces washed-out colors or unnatural contrast due to crude browser-level clipping. Teams should use CSS Media Queries Level 4 and Level 5 to query hardware capabilities before serving HDR assets:

• dynamic-range: Use @media (dynamic-range: high) to detect whether the user’s display supports peak luminance significantly higher than standard SDR levels.
• color-gamut: Use @media (color-gamut: p3) or @media (color-gamut: rec2020) to verify wide color support.

Combining these queries ensures that HDR assets are requested only by devices capable of rendering them as intended.

Implementation via the HTML <picture> Element

The most resilient delivery method pairs CSS capabilities with the HTML <picture> element. By declaring high-bit-depth HDR assets first and defining standard SDR fallbacks within alternate <source> elements, browsers automatically select the appropriate image based on display support:

<picture>
  <source srcset="photo-hdr.avif" type="image/avif" media="(dynamic-range: high) and (color-gamut: p3)">
  <source srcset="photo-sdr.avif" type="image/avif">
  <img src="photo-sdr.jpg" alt="Accurately rendered photograph" loading="lazy">
</picture>

This progressive enhancement strategy prevents wasted bandwidth on devices that cannot interpret extended dynamic ranges.

Consistent Color Spaces with CSS Color 4

HDR graphics must coexist with surrounding UI elements without causing visual dissonance. CSS Color Module Level 4 introduces wide-gamut color definitions such as display-p3, lch(), and oklch(). Using perceptual color models like OKLCH allows developers to design user interfaces, borders, and image overlays that match the high saturation and luminance of adjacent HDR images, preventing the rest of the webpage from appearing dull or mismatched.

Automated Tone Mapping and Testing

Because dynamic range varies dramatically even among HDR displays—ranging from 400 nits to over 1,600 nits—relying solely on client-side hardware tone mapping can lead to inconsistent results. Teams should implement server-side asset pipelines that generate tailored SDR and mid-range variants using tools like FFmpeg or libvips. Automated visual regression testing across multiple hardware profiles ensures that image highlights preserve detail rather than clipping abruptly at a display's physical limits.