6 ms·
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
by donohoe 2y 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-gaming/ 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
- timciep 2y agoThat looks amazing!
- shahahmed 2y agothese look so tasteful and well done
- Forgeties79 2y agoBig fan of the final result. Very striking
- tobr 2y agoRemember seeing this when it was published. Excellent work, great use of HDR.
- InsideOutSanta 2y agoWow, this is super smart, and the effect is really compelling and novel.
- mzs 2y agoHere'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 }
- altairprime 2y agoWould using a color() instead of #fff permit a brighter selection than srgb #rgb/rrggbb?
- razkarcy 2y agoThis 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!
- jjcm 2y agoIncredibly 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.
- ValveFan6969 2y agoThis 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".
- throawayonthe 2y agocalling HDR a gimmick is somewhat silly considering it's already in widespread use for media, and it's great
- recursive 2y agoThere 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.
- pokerface_86 2y ago[dead]
- pests 2y ago> I'd wager >99% of "surround sound" deployments would take more than a year to notice if they were transparently "downgraded" to stereo I can immediately tell if anyone has messed with any knobs or buttons on my receiver or if any of the speakers seem off / wrong sounding. Maybe I'm that 1% but I can remember many multiple times people have been over for movies / TV and someone asks out loud "does the sound seem off?" and sure enough a kid or a clueless friend was messing with the knobs.
- recursive 2y agoI'm not talking about EQ settings or dynamic range or anything. I'm talking about 'surround' specifically. I've also had a track record of noticing messed up audio settings quickly. But I probably wouldn't notice if my 5.1 started getting down mixed to stereo. At least for music.
- ben0x539 2y agoWhat devices is this meant to work on? On my laptop I'm not seeing anything out of the ordinary.
- HatchedLake721 2y agoHave 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!
- donohoe 2y agoI 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.
- baobabKoodaa 2y agoHey, could you please post a before/after HDR of one of the images?
- OisinMoran 2y agoWow this is gorgeous! Well done. Oddly this one doesn't work on my Google Pixel, while the emoji one does.
- donohoe 2y agoI know Apple devices support HDR but won’t use it if you have a low battery. I wonder it’s something similar?
- OisinMoran 2y agoChecked both one after the other but no luck. Must just be different methods and one isn't supported.
- chromatin 2y agoLooks incredible (Firefox)
- mattlondon 2y agoFWIW this does not work on my device (pixel 9 pro) but the emoji one does.