Are there any image formats for the web with full HDR image support? 10/12-bit channels, DCI-P3/Rec.2020 colour space, etc.
It seems like none of the conventional formats support it, and no one is talking about it, even when YouTube accepts HDR uploads and HDR monitor adoption is increasing.
Current support for displaying HDR images on web pages is heterogeneous and even buggy in some browsers, mainly because of the lack of an accepted standard.
Even though we have many web-friendly image formats that perfectly support HDR like JPEG-XL, AVIF and even JPEG-XT, there still isn't a consensus nor a single format that is well supported in a browser majority.
Additionally, both Apple (with HEIF and their SDK) and Android (with UltraHDR) are making good efforts towards an HDR-enabled web and mobile apps, but at this point are still mostly ecosystem-centered proposals waiting to be adopted.
The lack of conversion tools is also an important deterrent: Consistently converting from HDR images generated from Apple/Android devices or HDR formats like EXR and HDR into web-ready formats is currently a quite convoluted task involving a plethora of different tools.
My own investigation during the last months led me to a solution that uses a combination of JPEG-XT, JPEG-XL and AVIF files to attain a 75% coverage of current browser versions (Chrome being the only one that is easily supported). Safari and Firefox are still out of reach, unfortunately.
In the current state of things (as of the end of 2024) JPEG-XT is the clear winner: It displays HDR images without any issues on all Chrome-based browsers, and falls back automatically to a non-HDR image for users that do not have an HDR display. And because JPEG-XT images are simply ".jpg" files, they can be embedded into HTML just like any other JPEG, with the <img> tag, or even in url statements in CSS.
To attain the 75% compatibility (according to Statcounter), I use the <picture> HTML tag to provide the browser with the three alternatives to cover the widest possible compatibility.
Note the media tricks used in JXL and AVIF formats, which prevents known compatibility bugs in Firefox and Safari targets causing them to render HDR images too dark or consume a lot of CPU.
Also note the image-rendering style, which fixes an issue in certain Chrome versions when embedding large HDR images that caused the image to disappear just after being downloaded.
<picture style="image-rendering: -webkit-optimize-contrast;">
<source srcset="image.jxl" media="not all and (-webkit-touch-callout: none)" type="image/jxl" />
<source srcset="image.avif" media="all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {}" type="image/avif" />
<img src="image.jpg">
</picture>
On this HTML snippet, please note that
image.jpgrefers to an HDR JPEG-XT (UltraHDR) image, not a regular JPG image.
Current HDR images compatibility:
Further documentation: