I used (abused) HDR in an editorial project last year. We were working with an amazing illustrator doing a take on series of stories exploring the intersection of faith, storytelling, and technology.

As the early versions of the images emerged we thought we could used HDR to provide more or a aura to some elements. We tried to make it subtle and not overwhelm.

This example is my favorite:

https://restofworld.org/2024/divinity-altered-reality-muslim...

I think it worked well - and this technique would have been useful. We tried something similar but could not get it to work.

Our method was to use a stretched HDR video in the background.

Here are the steps I used:

In Photoshop create white image to proportions required. Save as MP4:

  File > Export > Render Video

With the MP4, generate a HDR version in WEBM:

  ffmpeg -i sample.mp4 -pix_fmt yuv420p10le -color_primaries 9 -color_trc 16 -colorspace 9 -color_range 1 -profile:v 2 -vcodec libvpx-vp9 sample.webm

  ffmpeg -i sample.mp4 -pix_fmt yuv420p10le -color_primaries 9 -color_trc 16 -colorspace 9 -color_range 1 -profile:v high10 -vcodec libx264 sample.mp4

Incredibly well done. FWIW, the video hack is no longer needed. Originally that was required due to browsers only having hdr support with video, but recently support for PNGs were added as well. You can just use an all-white png with the rec2020 color space set.

This is a beautiful implementation all-around. It captures a similar "wow-factor" that gilded pages in physical books provide. If this is the future of digital media I'm excited!

Here's how RoW did it:

    .religion-atf__nav-chapter--current .religion-atf__nav-chapter__book {
        box-shadow: -4px -4px 50px 0 #fff,4px 4px 50px 0 #fff
    }

Have you done any magic with the scroll behavior?

Usually the first rule of web development is to not touch scrolling, however, I’m on the iPhone and it’s seems to be faster than native scroll, and surprisingly it feels very good!

Wow this is gorgeous! Well done. Oddly this one doesn't work on my Google Pixel, while the emoji one does.

FWIW this does not work on my device (pixel 9 pro) but the emoji one does.

Hey, could you please post a before/after HDR of one of the images?

What devices is this meant to work on? On my laptop I'm not seeing anything out of the ordinary.

Remember seeing this when it was published. Excellent work, great use of HDR.

Wow, this is super smart, and the effect is really compelling and novel.

these look so tasteful and well done

Looks incredible (Firefox)

Big fan of the final result. Very striking

That looks amazing!

This is a lot of technical mumbo jumbo for a simple thing like brightness. HDR is a gimmick like 3D TVs. The best image quality is not the one with the most colors, which is entirely pointless, but instead a simple image, with no fancy features that only serve to distract the eye.

Like in the famous case of the Apple logo in the 1990s. Steve Jobs, when asked why he uses a black and white Apple logo instead of a color one, said - "color will only distract the eye from what's important".