I've been playing around with HDR images on the web. It seems that, for AVIF (the only web format that supports high bit depth and gain maps), gain maps add a lot of overhead. On the web it'd be much better to use <picture> to serve the right image for the screen.
cjxl doesn't support gain maps yet, and neither does jxl-rs, but it'll be interesting to see if it has this same overhead problem. I suspect it will.
@jaffathecake It annoys me that in Lightroom Classic the checkbox that means “use gain map instead of PQ” is labeled “Maximize Compatibility” when it appears that PQ (possibly tone mapped to SDR by the receiver) works more broadly for JPEG XL than gain maps.
@hsivonen The clipping can be pretty bad on an SDR screen. But, like, <picture> means you don't have to compromise.
Sep 28, 2026, 11:01 AM@jaffathecake I've dug into this for my photography site. The big missing thing IMO is there's AFAICT no way to check for browser support of HDR images because that !== HDR screens and serving HDR image to unsupported browser looks washed out
@snugug Doesn't https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/color-gamut handle it? (and <picture> supports media queries)
Sep 28, 2026, 2:12 PM@jaffathecake the problem I was running into was Safari on iDevices, until recently, supported wide color gammut displays and AVIF but NOT HDR images, so that wasn't quite enough