How does one create and display HDR images in web browsers?

Question

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.

Orten

Hi! I found this question by trying to write my own, and stackoverflow's search found this one given my question. So here's the title I would have used, for googleability: "How does one create and display HDR content, such as HDR10/Dolby Vision, for use in web browsers?" – Edan

@Edan Thanks, I'll change it to something similar. Just without the HDR10/Dolby Vision part, since I was asking specifically about images, not video. – Orten

Oh, that's information I actually didn't have! Is HDR10 only for video? – Edan

@lahwran, yep, HDR10 and Dolby Vision are formats for presenting video. Only slightly relevant to static images in that some Dolby-Vision-compatible displays support 12-bit colour depth. – Orten

Answer 1

Y. Mano and colleagues at Netflix investigated just this question. They concluded that several commonly supported image formats (notably JPEG2000 and 16-bit PNG) can support HDR images already, as long as a color profile is embedded in the corresponding images. The article I linked to is also a good introduction to HDR and wide color gamut images in general.

Minyan

This has nothing to do with HDR images in a web browser. The best you can do today is WCG at SDR brightness. Traditionally, WCG works on any browser if the user has a calibrated wide gamut monitor and ICC profile. Recently, WCG works on a HDR10 monitor if the user has HDR enabled globally in the OS, and uses a supported browser like Edge or Safari. Even with HDR10, WCG images are displayed only at SDR brightness. – Woodpile

@Monstieur: Post your comment as its own answer, especially since it uses the difference between WCG (wide color gamut) and HDR since it's not mentioned on or relied on elsewhere on this page. – Minyan

Actually you can just use AVIF and tag it as PQ. – Hardi

Answer 2

I am by no means an expert on this topic, but I found this question while working on a 2021/22 solution to the problem and I'd like to share my thoughts and progress. Maybe somebody gets use out of it.

Trigger HDR mode in the browser

It seems, it's possible to trick browsers on Apple platforms to switch to HDR mode, as documented on kidi.ng/wanna-see-a-whiter-white There, they use a combination of a tiny HDR video and the CSS properties filter/backdrop-filter with brightness(10) to make HTML elements and their colors reach into HDR space. It works and it is a cool trick, if a bit gimmicky.

AVIF HDR support with PQ

As mentioned by Валерий Заподовников, the AVIF file format seems to support HDR in a sense when the image is tagged PQ (Perceptual quantizer). I found files provided by Netflix (example) demonstrating this on the AVIF codec Github. They do seem to display brighter than regular CSS content in Chrome (see image) with background-color: white;, but I have not been able to create images like these myself. Also: the PNG images didn't yield the same result for me.

Platform limitations

The experiments did not produce any usable results for me, mainly because I have few HDR capable displays to test on and also, Safari does not support AVIF images yet. It seems, it could be a while before it does, but I'll get back to testing then.

My other hope was that the HDR-capable format that Apple does use, .HEIF/.HEIC, would display in Safari and I could work with that, but it doesn't. And it does not look like it will, since it's not a format engineered for web use.

2024 Update

There have been improvements in both browsers and editing tools to facilitate work with HDR content. Recent versions of Chrome (and Blink-based browsers) support 32bit HDR images, as does Photoshop (CC 2022+), the Affinity suite of apps, and Pixelmator Pro. Not all file formats are supported everywhere, but especially Pixelmator impresses with export options.

With PNG, AVIF and JPEG-XL as supported formats there are valid GUI workflows for making static HDR website content this year.

A great overview of various HDR techniques can be found on gregbenzphotography.com. It also mentions gain maps for traditional JPG media, which can close the gap between SDR and true HDR content.

Antemortem

Hi, nice to mention me, +1, Chrome does support HDR AVIF images on HDR display. You can do screenshots in HDR too using JPEG XR using nvidia overlay (Alt+F1, activate support for Desktop recording in Alt+R settings) and then display it on PQ display. See my comments here github.com/mpv-player/mpv/issues/7326#issuecomment-1021125367 and also wide-gamut.com/images – Hardi

I can say that it is colorimetrically correct. Mostly :) – Hardi