Comment by donohoe
3 days ago
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
Save as "sample.mp4"
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
With the plain MP4, generate the HDR version:
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.
Safari on macOS does not have HDR support in images shipping to general user channels yet.
This is probably why the emojis are working in slack, because it's just electron.
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:
Would using a color() instead of #fff permit a brighter selection than srgb #rgb/rrggbb?
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!
I wholly agree on leaving scrolling as-is. We’ve done it sparingly in other projects with caution.
For this one, we did not interfere with scrolling behavior.
Wow this is gorgeous! Well done. Oddly this one doesn't work on my Google Pixel, while the emoji one does.
I know Apple devices support HDR but won’t use it if you have a low battery. I wonder it’s something similar?
Checked both one after the other but no luck. Must just be different methods and one isn't supported.
FWIW this does not work on my device (pixel 9 pro) but the emoji one does.
What devices is this meant to work on? On my laptop I'm not seeing anything out of the ordinary.
Do your OS and screen both support HDR and have it enabled? It works by default on my mbp m2's screen, but not its external monitor or on my windows desktop/laptop.
I guess not! I'm toggling something on and off and can't tell a difference. Maybe after my next upgrade!
Hey, could you please post a before/after HDR of one of the images?
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
Big fan of the final result. Very striking
Looks incredible (Firefox)
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".
I feel like the whole emoji example might favor your point of view, but that, delightfully, grandparent commenter’s example is one of the better counterpoints I’ve seen.
Selectively deployed, a glint of extra brightness, above and beyond the “100%” baseline, simulates the glints and shimmers that draw our eyes naturally—in this case, in the same manner as gilt on the physical counterpart to the books they’re depicting. It fits in cleverly with a long tradition for that specific context.
Where I agree is with the idea that brighter-for-brighter’s-sake is not better after a certain point, any more than color-because-we-can. And it seems, as far as I can tell, that uniformly cranking up the full frame brightness into the HDR range is not The Done Thing, at least in film and design, at least so far. Possibly for compatibility with the wide range of displays stuff will end up on.
Hm, so you're saying we're going to be using browsers that give authors/publishers another ability to "draw our eyes naturally"? What could possibly go wrong. I'd be turning it off now if I had hardware that supported it.
1 reply →
Agreed, this is exactly why I only watch silent era black-and-white films.
Hard disagree. HDR is more than just boosted brightness, but the boosted brightness on it's own has been (in my humble opinion) the biggest advancement in TVs in the past decade. For instance, I'd choose a 500 nit 1920x1080 panel over a 250 nit 3840x2160 panel any day.
Yep, watching a logo is exactly like watching a movie
calling HDR a gimmick is somewhat silly considering it's already in widespread use for media, and it's great
There are plenty of gimmicks in widespread use. I'd wager >99% of "surround sound" deployments would take more than a year to notice if they were transparently "downgraded" to stereo, for instance.
3 replies →