7

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.

Don Reba
  • 13,814
  • 3
  • 48
  • 61
  • 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?" – lahwran Jun 11 '19 at 18:35
  • @lahwran Thanks, I'll change it to something similar. Just without the HDR10/Dolby Vision part, since I was asking specifically about images, not video. – Don Reba Jun 11 '19 at 22:13
  • Oh, that's information I actually didn't have! Is HDR10 only for video? – lahwran Jun 12 '19 at 20:45
  • 1
    @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. – Don Reba Jun 13 '19 at 22:26

2 Answers2

4

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.

enter image description here

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.

oelna
  • 2,210
  • 3
  • 22
  • 40
2

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.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
  • 4
    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. – Monstieur Aug 01 '20 at 01:58
  • @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. – Peter O. Aug 01 '20 at 03:13
  • Actually you can just use AVIF and tag it as PQ. – Валерий Заподовников Aug 27 '21 at 15:59