HDR‑Infused Emoji

147 comments

·April 17, 2025

donohoe

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

jjcm

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.

zamadatix

Safari on macOS does not have HDR support in images shipping to general user channels yet.

jofzar

This is probably why the emojis are working in slack, because it's just electron.

razkarcy

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!

mzs

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
    }

altairprime

Would using a color() instead of #fff permit a brighter selection than srgb #rgb/rrggbb?

HatchedLake721

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!

donohoe

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.

OisinMoran

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

donohoe

I know Apple devices support HDR but won’t use it if you have a low battery. I wonder it’s something similar?

OisinMoran

Checked both one after the other but no luck. Must just be different methods and one isn't supported.

mattlondon

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

baobabKoodaa

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

ben0x539

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

hatthew

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.

ben0x539

I guess not! I'm toggling something on and off and can't tell a difference. Maybe after my next upgrade!

jjcm

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/

dmd

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.

ZeWaka

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

moron4hire

There's a dark/light mode switcher at top of the page, but the page background still looks grey, even when going to another page on the blog that doesn't have the HDR images.

zimpenfish

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

astrange

A funny thing I've noticed in Safari is that the play buttons on video elements are HDR white, and so the screen will adapt (turn grey) when you scroll past one.

kllrnohj

> and I am thankful that Safari does not support it because good grief

Safari absolutely will support HDR images if it doesn't already. It might not support this PNG hack, but it's inevitable that it'll support HDR HEVC or JPEG images since those are what's produced by iOS and Android cameras respectively, and they obviously aren't going to just ignore them.

iPhones have supported HDR photos for over a decade, since at least the iPhone 5S; for whatever reason, they've ignored them for at least that long.

nine_k

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

Groxx

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.

BoorishBears

> These examples will work best when posted to Slack.

I should not have been clued into this power.

pier25

yes it's blinding on my MBP lol

pxc

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.

BillinghamJ

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

pxc

That sounds very good. Unfortunately in this instance I'm on Android.

MasterScrat

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

WhyNotHugo

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

A_Duck

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

My apologies to your co-workers

https://we.tl/t-CV83O4r74f

jchw

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.

matsemann

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.

lxgr

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.

lights0123

Safari only shows HDR in videos, not photos. It's possible to just show a single-frame video though.

lxgr

And I could see Safari changing its behavior to only allow HDR for actually playing videos (or even playing videos with actually varying content, if websites start playing clever games with one second loops of still images), or maybe only after confirming an "I am wearing sunglasses right now" prompt.

new_user_final

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

LoganDark

Wonder if Ladybird will ever support it. (Imagine HDR on SerenityOS!)

sintax

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

boarnoah

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%

ionwake

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?

harrall

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

kllrnohj

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

There's no system that does that. The only thing that's kinda similar is at the display level there's a concept known as the "window size" since many displays cannot show peak brightness across the entire display. If you've ever seen brightness talked about in context of a "5%" or "10%" window size, this is what it means - the brightness the display can do when only 5% of the display is max-white, and the rest is black.

But outside of fullscreen this doesn't tend to be much of any issue in practice, and it depends on the display.

drodgers

> There's no system that does that.

You mean the darkening of everything else to highlight bright HDR areas? All recent Macs do, including the one I'm typing on right now. It's a little disconcerting the first time it happens, but the effect is actually great!

dr_kiszonka

I use YouTube on my rather inexpensive TV. When a thumbnail of an HDR video starts playing, the whole screen brightens up significantly. I don't know as much about HDR as you do, so maybe they are using some other perceptual trick. It might also not be "full brightness." BTW, why can't screens do full brightness on the whole screen?

ionwake

Thank you so much for your reply - I will look into it!

detaro

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.

ionwake

Would this be specific software on the iphone used to record a video ? Or a default setting on a certain iphone? I ask because I only very rarely see this whacked up HDR youtube short, like super rarely.

detaro

Fairly sure a stock iPhone can do it, but you might need to enable it explicitly for compatibility reasons? And depending how you edit or upload the video it could get lost there too, it's still something where support is not really universal.

LoganDark

Does this video look super whacked up to you too? It is HDR: https://www.youtube.com/watch?v=ceSiK-0HX_I

kllrnohj

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

ionwake

You clearly know alot about this, but I think there could be a misunderstanding. Not trying to offend but when I see the youtube link mentioned above in the other comment, my macbook screen literally goes darker AROUND the video , which gets brighter. I am not making this up. I think its how chrome on macbooks handles raw HDR encoding.

Can someone else confirm I am not mad?

PS - I am not trying to shut you down, you clearly know alot in the space I am just explaining what Im experiencing on this hardware.

kllrnohj

> my macbook screen literally goes darker AROUND the video , which gets brighter. I am not making this up

This is almost certainly your eyes playing tricks on you, actually. Setup that situation where you know if you scroll down or whatever it'll happen, but before triggering it cover up the area where the HDR will be with something solid - like a piece of cardboard or whatever. Then do it. You'll likely not notice anything change, or if there is a shift it'll be very minor. Yet as soon as you remove that thing physically covering the area, bam it'll look gray.

It's a more intense version of the simultaneous contrast illusions: https://en.wikipedia.org/wiki/Contrast_effect & https://en.wikipedia.org/wiki/Checker_shadow_illusion

Eyes be weird.

joshuaturner

Time to make my Slack profile pic really stand out

tuetuopay

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

Hamuko

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

ALLTaken

Here's how you do that in CSS4!

For an image or video:

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