Querying Device HDR Support for AVIF Assets

Web developers can reliably query a device's High Dynamic Range (HDR) capabilities before deciding to serve an HDR AVIF asset. By utilizing CSS media queries, the HTML <picture> element, and the JavaScript matchMedia API, websites can detect whether an attached display supports HDR rendering and wide color gamuts. This allows developers to deliver vibrant, high-luminance AVIF images to capable screens while serving Standard Dynamic Range (SDR) fallbacks to incompatible hardware to prevent visual artifacts and wasted bandwidth.

Using the HTML <picture> Element

The most efficient, declarative way to load HDR AVIF assets conditionally is through the HTML <picture> element combined with the dynamic-range media feature. Browsers evaluate media queries before downloading the image source, preventing the client from downloading both SDR and HDR files.

<picture>
  <!-- Load HDR AVIF on HDR-capable displays -->
  <source 
    srcset="photo-hdr.avif" 
    type="image/avif" 
    media="(dynamic-range: high)" />
  
  <!-- Fallback to SDR AVIF on SDR displays -->
  <source 
    srcset="photo-sdr.avif" 
    type="image/avif" />

  <!-- Standard fallback for older browsers -->
  <img src="photo-sdr.jpg" alt="A landscape view" />
</picture>

In this setup, the browser checks if the display hardware supports high peak brightness, high contrast ratios, and high color depth via (dynamic-range: high). If false, it falls back to the SDR source.

Detecting Support via JavaScript

When programmatic control is required—such as loading assets via a Canvas element, WebGL, or dynamic component state—developers can evaluate display capabilities using window.matchMedia().

const supportsHDR = window.matchMedia('(dynamic-range: high)').matches;

let imagePath = 'hero-sdr.avif';

if (supportsHDR) {
  imagePath = 'hero-hdr.avif';
}

const img = new Image();
img.src = imagePath;

Developers can also attach listeners using addEventListener('change', ...) to handle dynamic events, such as a user dragging their browser window from an SDR laptop screen to an HDR external monitor.

Complementary Media Features

In addition to dynamic-range, developers can query color space capabilities using the color-gamut media query. Most HDR images are mastered in wide color spaces such as Display P3 or Rec. 2020.

Combining these checks, such as @media (dynamic-range: high) and (color-gamut: p3), provides fine-grained control to ensure the client's screen is properly equipped to render true HDR AVIF content without unintended tone-mapping or color clipping.