HDR‑Infused Emoji

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".

To forestall more confusion: If your system is set to dark mode, the page background is not #fff, and is instead #1d1e20.

> If the smiley face on the right is not much much brighter than the page background [...] then your hardware does not support this

Or you're using Safari because my hardware absolutely does support this (tested in Chrome and I am thankful that Safari does not support it because good grief.)

Works in mobile Chrome, not in mobile Firefox; increases the overall screen brightness a bit to add the dynamic range. Shines!

> These examples will work best when posted to Slack.

I should not have been clued into this power.

yes it's blinding on my MBP lol

On iPhones, there is an option - "reduce white point" in the vision/display accessibility settings, and also low power mode. You can force low power mode to remain on with the Shortcuts app

Nice! Using HDR to improve contraste of a QR code is a really neat idea.

Feels like either Chrome or my android phone is cheating, because if I cover the hdr image with my finger and switch between Firefox and Chrome, the page background in Chrome is noticeable more grey than the one in Firefox.

Neither does Safari on macOS – which honestly seems like the correct behavior, given that this will inevitably be used by websites in user-hostile ways.

So many people push for more browser engines yet Firefox can't implement HDR in 6 years.

Screens can't often do full brightness on the whole screen so if you come across a video or image that is supposed to have a higher contrast ratio, the system will darken everything and then brighten up the pixels that are supposed to be brighter.

Yes, there are formats that able to store a higher contrast ratio so that's why it doesn't happen on non-HDR content but the actual brightening of a portal on your screen isn't because of the format but because of your hardware (and software) choosing to interpret the format that way.

For more a practical example, if you had an 8-bit HDR image, 255 on the red channel (after inputting this number through a math function like HLG[1] to "extract" a brightness number) might mean "make this pixel really bright red" whereas 255 on a SDR format would mean "just regular red." However, each red channel is still a number between 0 and 255 on both formats but your hardware decided to make it brighter on the HDR format.

(Although in reality, HDR formats are often 10-bit or higher because 256 values is not enough range to store both color and brightness so you would see banding[2]. Also, I have been using RGB for my example but you can store color/brightness number many other ways, such as with chroma subsampling[3], especially when you realize human eyes are more sensitive to some colors more than others so you could "devote fewer bits" to some colors.)

[1] https://en.wikipedia.org/wiki/Hybrid_log%E2%80%93gamma

[2] https://en.wikipedia.org/wiki/Colour_banding

[3] https://en.wikipedia.org/wiki/Chroma_subsampling

The video is marked as containing a different color space with a higher brightness/color range. That could either be because the initial camera recorded it that way (e.g. iPhones can do that) or because someone took a "normal" video and edited it.

There's many factors in play from what your SDR white point is at, how your OS handles HDR video, what the content contains, and finally what your brain is doing.

HDR10(+) & Dolby Vision, for example, encode content at absolute luminance, so they are basically completely trash formats since that's an insane thing to expect (the spec for authoring content in this format literally just goes "lol idk do X if you think it's going to be seen in a movie theater of Y for TV and hope"). Sadly, they are also quite common. Mobile phones (both Android & iOS) are instead pushing HLG, which is better. Although then hilariously MacOS's handling of HLG was atrocious until the latest update which fixed it but only if the video contains a magic flag that iPhone sets, but isn't standard so nobody else sets it (the "avme" tag https://developer.apple.com/documentation/technotes/tn3145-h... )

There's then also just how your eyes & brain react. When HDR shows up and suddenly the white background of a page looks like a dim gray? That's 100% a perceptual illusion. The actual light being emitted didn't change, just your perception of it did. This is a very hard problem to deal with, and it's one that so far the HDR industry as a whole has basically just ignored. But it's why there's a push to artificially limit the HDR range in mixed conditions, eg https://github.com/w3c/csswg-drafts/issues/9074

Ugh, that reminded me again that Firefox doesn't support HDR outside of OSX.

Although to be fair it is not like Windows in general supports HDR well for desktop use anyway, SDR colours are way too DIM like brightness is at 25%

Oh god it fucking works. It's brilliant in every sense of the word.

oh god. off my evening goes tweaking the multiply value for proper effect.

It seems this is the sad inevitability whenever a high dynamic range format doesn't include loudness/brightness normalisation in the standard. We just can't help ourselves. If I understand correctly, things like Dolby Vision do include some kind of normalisation.

Do y'all have HDR screens? Apparently I don't! And judging by this thread, I'm not missing much?

> I can just do that with normal manipulations

Then you are probably not viewing this with HDR-capable hardware and software. Otherwise it'd go past what you can just do with normal manipulation on an sRGB image.

You need an HDR screen, what that basically means hardware-wise is that each pixel can control its brightness.

On compatible screens, those emojis are appearing super bright. In fact brighter than the maximum brightness setting while the rest of the screen doesnt change.

Yes, that is expected. I think it is intentional as it can be pretty disturbing.

HDR is terribly implemented, in most cases. (Especially Windows)

macOS handles it about the best of the bunch.

What I hate is on Windows, you need to basically explicitly set the program, the OS, and the monitor into an "HDR mode". Then, once you're done, you need to un-set it or the colors and brightness will be screwed up.

That is tedious AF. I refuse to use it until it doesn't require constantly toggling crap on and off.

Agreed. I've used it on my PS4, and all that it accomplished was an annoying screen blank and restart every time I started a game which used HDR. It didn't actually make anything look better. I turned it off after some experimentation and I don't plan to ever mess with it again with how underwhelming it was.

That strikes me as an odd opinion. Surely the colorspaces and display technologies that predate HDR had as much dynamic range as they could reasonably squeeze out of the technology at the time. Is it the brightness specifically that bugs you? I could understand that, although brightness is not directly related to HDR (in the same way that loudness in digital audio is not directly related to bit depth).

Of course I do agree that these things should be configurable. And on my MacBook Pro, I can set the built-in display to sRGB. Is that option not available on your particular Mac and display?

I love HDR for movies/shows on OLED but other than that I agree. It really sucks you can't disable HDR in apps like Netflix etc. It does look terrible on non OLED TVs. In Chrome you can force a specific color profile in the settings. I believe sRGB shouldn't allow HDR content.

Personally I think the biggest benefit of HDR is not even those super bright annoying colors but 10-12 bit colors and the fact that we can finally have dark content. If you look at movies from 10-20 years ago everything is so damn bright.

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

You totally can, at least on Apple's XDR displays.

Just go to System Settings -> Displays -> Preset and change it from "Apple XDR Display (P3-1600 nits)" (or whatever) to "Internet & Web (sRGB)". You lose the ability to change screen brightness (I assume because you're locked to reference brightness), but HDR is fully off.

[dead]