如何在网络浏览器中创建和显示 HDR 图像?

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

是否有完全支持 HDR 图像的网络图像格式? 10/12 位通道,DCI-P3/Rec.2020 色space,等等

似乎 none 的传统格式支持它,但没有人在谈论它,即使 YouTube 接受 HDR 上传并且 HDR 监视器的采用率也在增加。

是的。 Mano 和 Netflix 的同事 investigated just this question。他们得出结论,只要在相应图像中嵌入 颜色配置文件,几种普遍支持的图像格式(特别是 JPEG2000 和 16 位 PNG)就可以支持 HDR 图像。我链接到的文章也很好地介绍了一般的 HDR 和广色域图像。

我绝不是这方面的专家,但我在研究 2021/22 问题解决方案时发现了这个问题,我想分享我的想法和进展。也许有人会利用它。

在浏览器中触发 HDR 模式

似乎可以欺骗 Apple 平台上的浏览器切换到 HDR 模式,如 kidi.ng/wanna-see-a-whiter-white 中所述 在那里,他们使用 HDR video 和 CSS 属性 filter/backdrop-filterbrightness(10) 的组合来制作 HTML 元素及其颜色进入 HDR space。它有效并且是一个很酷的技巧,如果有点花哨的话。

AVIF HDR 支持 PQ

Валерий Заподовников, the AVIF file format seems to support HDR in a sense when the image is tagged PQ(感知量化器)所述。 我找到了 Netflix (example) demonstrating this on the AVIF codec Github) 提供的文件。在 Chrome(见图片)和 background-color: white; 中,它们似乎比常规 CSS 内容更亮,但我无法我自己创建这样的图像。另外:PNG 图像对我来说没有产生相同的结果。

平台限制

实验没有为我产生任何可用的结果,主要是因为我几乎没有支持 HDR 的显示器可以测试,还有 Safari does not support AVIF 图像。看来,可能还需要一段时间,不过我会回去测试的。

我的另一个希望是 Apple 使用的 HDR-capable 格式 .HEIF/.HEIC 会显示在 Safari 中,我可以使用它,但它没有.它看起来不像,因为它不是为网络使用而设计的格式。