HN Reader

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

This is exactly the kind of stuff I come to hacker news for.

Here are all the emojis in HDR format, ready to import to Slack

My apologies to your co-workers

https://we.tl/t-CV83O4r74f

To test if your OS+browser combo actually supports HDR: https://www.wide-gamut.com/test

How can one turn this off on Slack (MacOS 15.4)??? Omg I am going crazy seeing the entire screen dim except a few SCREAMING emojis

For more information on the different ways to encode HDR content in images, together with examples for each, I've found this article very useful: https://gregbenzphotography.com/hdr/

And this explains how Apple implements this feature on non-OLED/mini-LED screens (and, in my observation, at least still to some extent even on mini-LED): https://prolost.com/blog/edr

Here's how you do that in CSS4!

For an image or video:

- https://github.com/ccameron-chromium/hdr-headroom-limit/blob...

- https://drafts.csswg.org/css-color-hdr/#controlling-dynamic-...

For a canvas element:

- https://github.com/w3c/ColorWeb-CG/blob/hdr_canvas_r2/hdr_ht...

Resource: https://www.w3.org/TR/mediaqueries-5/#dynamic-range

Looks like this works on Chrome for Android, but Firefox doesn't seem to support HDR at all.

https://bugzil.la/hdr

Maybe some day.

Can confirm that this works, and can also confirm that people who post glaring HDR images to Slack are frequently peer-pressured to remove them shortly thereafter by everyone in the channel.

Fun fact: On "XDR displays" (such as recent MacBook Pros and also Apple's new Studio Display XDR), you can actually decrease the display brightness to see more dynamic range.

Here is a recording of this happening for those who can't experience it for for themselves:

https://logandark.net/files/2QN2R1P3-26295O2O-9045N31P-P2POQ... (6.7 MB / 6.4 MiB)

(sorry for the terrible quality, it was a very lazy recording)

Here’s what I see on iPhone safari vs saving the images to photos

https://imgur.com/a/dSva7S9

What you will see however, is completely unknown.

HDR-Infused Slack emoji that is, not unicode emojis.

Interesting, my phone seems to do some normalisation, I presume rather than clip the image. So it turns "down" the rest of the page leaving the emojis bright. I wonder which part of the system is doing this. Chrome on Android.

Sorry for the noob question but I think finally someone in this thread can answer this for me. Sometimes when I see a youtube short video it looks like its HDR is whacked up by like 500% as per the image in this page, but Im confused how this could be done. Is video processing on the video before it is uploaded somehow giving it some sort of encoding which chrome just wacks up? Or is it the hardware doing it and encoding it a certain way?

I am not talking about a slight brightness increase, I am talking Ill be scrolling youtube and suddenly this video is like a portal into another dimension its so bright.

Can anyone explain how its done?

More HDR shenanigans from some time ago: https://news.ycombinator.com/item?id=36389285

Demo: https://notes.dt.in.th/HDRQRCode

Interestingly that one worked on iPhone, while the new emojis one doesn't

Thanks to swankjesse's GitHub repo in a different comment, I learnt that it's possible to disable HDR on Chrome by setting the force-color-profile flag to sRGB:

chrome://flags/#force-color-profile

> works [...] not at all on Android devices.

It's working for me in Chrome on my Pixel. I've also noticed Instagram using it recently. Very fun effect, could imagine a good dark mode prank using it...

I don't think I understand HDR. It just looks brighter and more contrast. I can just do that with normal manipulations. What's this all about?

Edit: Maybe my hardware doesn't support it. I'm using an LG monitor with Windows. There's also a good chance I've never actually seen anything in HDR.

On MacOS, if you toggle the OS from dark to light mode and back, you can see for a second the HDR effect being turned off

It's just a white circle in firefox on linux and android, looks terrible. Even in chrome it looks terrible, are the eyes supposed to be red?

This might be the best use of HDR I've ever seen.

And will continue to see for quite some time when my eyes are closed.

If you take a screenshot of it, the effect is gone. The emoji and the background are just the same #ffffff in the screenshot. Seems like an easy way to make some unscreenshottable text or something. I don't know how I feel about that.

This worked well on my iPhone but my M3 MacBook Pro doesn't seem to render the HDR version of the image in Safari. Is that expected? Pretty sure the Photos app works with HDR.

This also works on Slack profile pictures if you want to be extra obnoxious!

To someone with light sensitivity issues, stumbling upon HDR content like this usually feels like an unexpected act of violence. I wish my phone featured a way to turn this off globally, as it's absolutely brutal in those endless video feed apps.

The first emoji here is just too bright. Even with my phone on low brightness, it's too blinding compared to everything else.

Time to make my Slack profile pic really stand out

I was playing around with this a ton yesterday.

One thing I was attempting to do was create an emoji that only had partial portions that had their brightness maxed, while the rest of the emoji displayed "normally". It turns out this was quite hard to do - most filters or scripts such as the one on this page simply max out the channels, which creates a "fried" look to the image.

Gimp luckily has support for this, but getting an existing image to display the "same" with the new color space proved fairly difficult. I found this curve to be the best starting point, after which I edited things from there manually: https://image.non.io/a3c227d4-56d6-40bd-a898-3879fd062cf3.we...

I used this to create a companion emoji to the :mean-jacob: emoji (https://html.non.io/emoji/mean-jacob.png) my team is quite fond of using (I'm Jacob). I made :angel-jacob:, which has a halo that shines with the brightness of a thousand suns. I don't expect my team will use it, but still it was a fun exercise: https://html.non.io/emoji/

I'm on Wayland, and get very different results between Firefox and Chromium. On the former, it's white with yellow eyes and mouth, while on the latter the face is yellowish, with whites in the eyes, and red pupils and mouth.

To forestall confusion: If the smiley face on the right is not much much brighter than the page background (which is #ffffff), then your hardware does not support this and you are not seeing what others are seeing.

Thanks, I hate it.

>Works great in Chrome and Slack, and not at all on Android devices

Working fine here on my pixel 8 in Vivaldi

> Works great on iPhones

Funnily enough, on my iPhone I'm getting the blue box question mark instead of the images on the page.

HDR is terrible

The fact that you can't turn it off system wide shows the macOS leadership is asleep at the wheel

> Works great in Chrome and Slack, and not at all on Android devices.

Hurmm it does work for me in Chrome on Android.

The Loudness War has come to Slack.

https://en.wikipedia.org/wiki/Loudness_war

I don't have any interest in HDR. HDR is a very new technology that is just a gimmick. The human eye is barely able to perceive more than a few colors. Therefore anything above 16.7 million colors is not useful. And even that is overkill, 250-300 shades of a single color is more than enough for anybody.

This creates an additional reason to run Firefox: innate HDR abuse blocking. :)

Doesn't seem to work at all on linux in any browser I test. My laptop and distro support HDR and it's turned on.

Instructions on turning ’em off: https://github.com/swankjesse/hdr-emojis