1793091 - HDR images are rendered extremely dark

Status: NEW

(Core :: Graphics: Color Management, defect)

Description

[Greg]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:105.0) Gecko/20100101 Firefox/105.0

Steps to reproduce:

View any properly encoded HDR image, such as https://raw.githubusercontent.com/AOMediaCodec/av1-avif/master/testFiles/Netflix/avif/hdr_cosmos01000_cicp9-16-0_lossless.avif

Actual results:

The HDR image displays extremely dark. Firefox appears to tonemap the image to SDR (standard dynamic range). All of the content (including HDR over-range values) are rendered in the SDR range.

Expected results:

View the same page with Chrome on a supported HDR display (such as the M1 MacBook Pro). It will render as expected with proper brightness across the image.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Images, Video, and HTML Frames' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Kelsey Gilbert [:jgilbert]]

Yep, we're still working on HDR support.
I'm not sure if we want this in ImageLib or General or Color Management, I suppose it depends on how we want to address it:

• Tone-map (better) in ImageLib
• or render HDR properly

Comment 3

[Greg]

Here's a page showing HDR images for reference / testing (renders properly on Chrome to see intended appearance): https://gregbenzphotography.com/hdr/

Comment 4

[Greg]

(In reply to Kelsey Gilbert [:jgilbert] from comment #2)

Yep, we're still working on HDR support.
I'm not sure if we want this in ImageLib or General or Color Management, I suppose it depends on how we want to address it:

• Tone-map (better) in ImageLib
• or render HDR properly

It seems to me like both are needed. True HDR display is most desirable, but tonemapping the image for an SDR display is ideal to avoid clipping. A website could use a media query to serve both separate SDR and HDR versions of an image, but the media query is not properly supported as of FireFox 112. Here's a series of HDR-related tests: https://gregbenzphotography.com/hdr/#tests

Even if HDR rendering is done properly, tone mapping would still be ideal. For example, an HDR image mastered for 1000 nits would need tone mapping to display on a 600 nits HDR display without clipping.

Comment 5

[Greg]

A related consideration: support of HDR gain maps: https://helpx.adobe.com/camera-raw/using/gain-map.html

Comment 6

[Lucas Garron]

I also spent some while being confused until I realized Firefox is doing this. There are a few details making this particular tricky for web developers:

• The image in Firefox is truly is extremely dark. The image might still be vaguely recognizable, but it's very much on the side of "unusable" rather than "a little worse but okay". 😢
• The options for serving images based on HDR support are limited: CSS supports a media selector (which can also be used from JS), but srcset does not: https://github.com/w3c/csswg-drafts/issues/8767
• Even if it's possible to serve multiple versions of an image for a given site, this is an additional dimension of "Cartesian explosion" when generating a set of web-ready images.

Safari implement some HDR → SDR basic tone mapping that is more than reasonable, and that would be incredibly useful to have in Firefox. For simple websites, it means that I could serve a single HDR image in AVIF that is:

• Supported across Blink, Gecko, and WebKit.
• Significantly smaller than JPEG.
• Shows as HDR when possible and reasonable SDR otherwise.

Comment 7

[Lucas Garron]

Attachment: Screenshot 2024-08-14 at 00.05.35.heic

Here's a screenshot of https://garron.net/test/hdr/ demonstrating the issue for a real-world image where a "flame" is significantly brighter than the rest of the image.

Comment 8

[Lucas Garron]

Attachment: Screenshot demonstrating the issue at https://garron.net/test/hdr/

(JPEG replacement for the HEIC screenshot upload.)

Comment 9

[Mark Rejhon]

Author of TestUFO here, reporting FireFox HDR glitches:

I am getting a similar problem at https://beta.testufo.com/photo -- Select one of the HDR photos and it doesn't correctly convert them to HDR. Even though the CANVAS remains SDR on FireFox, it should still downconvert HDR to SDR more properly without going dark;

Also, FireFox needs to add support for HDR CANVAS -- https://beta.testufo.com/hdr