HDR on the web was ten years of theory
Format committees have talked about HDR images on the web since 2016. AVIF has supported HDR since 2019, JPEG XL since 2021. In practice, though, you almost never saw a real HDR image on websites until 2024. Three factors changed that: HDR displays have reached the mass market (every modern smartphone, every MacBook since 2021), smartphone cameras capture native HDR (iPhone 12+, Pixel 7+, Galaxy S22+), and browsers have implemented color management with HDR support (Chrome 124+, Safari 17.4+).
For a short format overview, see our AVIF vs. WebP vs. JPEG XL post; here it's specifically about HDR delivery.
The two routes to HDR on the web
In 2026, two structurally different approaches are available:
- Native HDR formats (AVIF, JPEG XL) with 10-bit coding, the BT.2020 color space, and a PQ/HLG transfer function. Works natively where supported — but the HDR path is binary: either full HDR or not at all.
- Gain maps (Ultra HDR from Google, Adaptive HDR from Apple). A classic SDR JPG plus an embedded grayscale map describing, per pixel, how much brightness boost to apply on an HDR display. An elegant fallback path: SDR decoders ignore the gain map and see the standard image.
Ultra HDR (gain maps) — Google's pragmatic path
Google introduced the Ultra HDR format with Android 14 (2023), based on the ISO standard for gain maps (ISO/CD 21496-1). Pixel 8 and newer Galaxy phones produce Ultra HDR JPGs by default. The file is a normal JPG with an embedded XMP spec and a JPEG-XL- or JPG-coded gain map as a secondary image.
Browser support 2026: Chrome 124+ (May 2024), Edge after the Chromium update, Firefox 131+ (October 2024). Safari treats Ultra HDR JPGs as normal JPGs (ignores the gain map). Performance: the file is only 5–15% larger than a comparable SDR JPG, since the gain map compresses well. When: smartphone photo galleries, photo portfolios, anything where photo content is primarily consumed.
AVIF with BT.2020 and PQ — the direct path
AVIF can natively code 10-bit, 12-bit, or higher color depths with the BT.2020 color space and a PQ (HDR10) or HLG transfer function. Encoding via libavif, sharp with the AV1 plugin, or Adobe Camera Raw 17+.
Browser support 2026: Chrome 113+, Safari 17.4+, Firefox 130+ — so broadly available, but younger than SDR AVIF support. Performance: HDR AVIF is 10–25% larger than SDR AVIF because of the higher bit depth. When: when you want to deliver a fully HDR-native photo bundle — especially in gallery apps and photo marketplaces.
JPEG XL HDR — the ambitious path
JPEG XL brings 32-bit-float HDR per channel — the highest precision of the three formats. That's overkill for display delivery but gold for photo archives and competition workflows. Apple platforms (macOS Sonoma+, iOS 17+) show JPEG XL HDR natively; Chrome and Firefox support it since 2025.
Delivery strategy 2026
A modern HDR delivery pipeline combines the three approaches. The right <picture> order:
<picture> <source srcset="photo-hdr.avif" type="image/avif"> <source srcset="photo-ultrahdr.jpg" type="image/jpeg"> <img src="photo-sdr.jpg" alt="…" width="1600" height="900"> </picture>
Browsers with AVIF-HDR support take the first source. Browsers without AVIF HDR but with an Ultra HDR decoder (Chrome 124+) fall back to the Ultra HDR JPG — and use the embedded gain map. Browsers without HDR support see the SDR JPG. Three stages, robust.
Display detection in the browser
A subtle trap: not every device that can decode HDR images also has an HDR-capable display. Open a 2014 iMac with Safari 17 and you see the AVIF HDR content — but its SDR monitor only renders it tone-mapped.
The CSS media query (dynamic-range: high) allows detection. With it you can deliver HDR content only to devices that can really render it:
@media (dynamic-range: high) {
.hero { background-image: url("hero-hdr.avif"); }
}
@media (dynamic-range: standard) {
.hero { background-image: url("hero-sdr.jpg"); }
}Encoding and workflow
To produce HDR images, you have several routes in 2026:
- Smartphone direct export. Every iPhone 12+ and Pixel 7+ exports photos in HDR. Transfer via AirDrop/Files keeps the HDR path.
- Lightroom Classic / Camera Raw. Adobe pipelines support HDR export to AVIF and JPEG XL since Camera Raw 15.4 (2023).
- Sharp + libavif. In the Node.js build pipeline, sharp with
.toFormat('avif', { bitdepth: 10, ... })can generate HDR AVIFs. - Photoshop 25+. A direct HDR export path with tone-mapping control for the SDR fallback variant.
The most common HDR traps
- Wrong color-space header. A 10-bit image without a BT.2020 ICC profile is interpreted by the browser as sRGB — the result is a garishly overblown image. Embed the profile without fail.
- HDR images in the wrong contexts. Bright HDR highlights next to normal SDR UI text look like stage light in a theater — the UI text looks absurdly dark. Better place HDR content in full-bleed areas.
- Forgetting tone mapping. Build no SDR fallback and you leave older devices with crushed highlights.
- Underestimating file size. 10-bit HDR AVIFs are on average 15–25% larger than 8-bit SDR AVIFs. Relevant for mobile delivery.
When HDR is the right choice
- Photo portfolios and galleries. Photo content is the whole attention — HDR highlights and deeper shadows show fully.
- E-commerce for premium products. Jewelry, watches, high-end fashion benefit measurably.
- Photo tutorial pages. Exposure examples, RAW pipelines.
Not ideal: marketing banners with a text overlay, UI screenshots, anything with reduced display-latency requirements. HDR is a photo upgrade, not a universal switch.
What 2027 brings
Two developments are visible: first Adaptive HDR, which interpolates dynamically per pixel between SDR and HDR values depending on display brightness — Apple showed first implementations in iOS 18. Second, HDR in the CSS background image as a regular render path; so far it's a special path in Chromium.
Sources
Android — Ultra HDR Image Format · ISO/CD 21496-1 — Gain Map Specification · AVIF Spec — HDR10 Support · MDN — dynamic-range media query · ITU-R BT.2020 · ITU-R BT.2100 (HDR Standards) · Apple — HDR Image Rendering Options · web.dev — AVIF.