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.
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!
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!
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.
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.
I kind of felt like Apple’s was the right approach, for that reason: they’d tend to support it in high-end video but not so much in image content. Although it sounds from downthread like that might be changing?
If the tech does seep into ads, as I guess it must eventually, I’ll be right behind you in turning it off…
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.
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.
> 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.
I'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.
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/
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.
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.
> 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.)
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.
> 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.
I think you're confusing which HDR is being used. HDR photography, the multi-expose combinations, was probably iPhone 5S but that still results in an SDR image. That's a completely different thing entirely.
iPhones have not captured HDR images until much, much more recently. No earlier than iPhone 12 at the soonest (when they first could capture HDR video), although they keep fiddling with which format they use for the result. iOS 17 was when they added support for displaying these images in UIKit & Swift, which was only like 2 years ago give or take. WWDC '23 was similarly when they started talking about handling HDR images. And they just recently announced they'll be adopting ISO 21496-1 at WWDC 2024. ISO 21496-1 being the gainmap style approach that Google & Adobe adopted with UltraHDR in 2023.
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:
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.
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
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.
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.
If it were to become a real problem I'd sooner see Apple, of all vendors, leave it as one of the many settings flags in Safari than intentionally avoid or remove support for wide range media in their app.
Related: there is also a CSS property coming which allows sites to control which page content should be clamped to standard range or not. Worst case you can just add an * !important override in your Safari->Preferences->Advanced->Style Sheet if nobody else considers it problematic but you still wanted to clamp things (in Safari, otherwise you can just disable HDR).
Apple is definitely not afraid to block otherwise widely available features behind flags or extra clicks. For example, Web Push is available on iOS only for "installed PWAs".
Why would we expect this to become more of a problem than, say, websites playing audio quietly to encourage you to turn your volume up, than playing extremely loud audio?
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.
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.)
> 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.
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!
Apple doesn't darken SDR to amplify HDR. They keep SDR the same brightness as it was before HDR showed up. It appears like SDR gets dimmer because of your perception of contrast, but it's not actually within a small margin of error.
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?
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.
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.
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.
Yes it is! But how does one make their video upload HDR? I am familiar with video editing but am unsure how I would perform a test, using a test video with my iphone, and upload it so it doesnt lose its HDR encoding? I believe there is a HDR setting for my phone, but I dont think it will upload by default in a HDR state such as the link you just gave me.
Thanks to everyone trying to help me understand this. I have heard of HDR for years but Ive never witnessed my macbook darken and brighten a video before like 2 months ago.
if you record in HDR, uploading that raw footage to YouTube should produce an HDR video. to get the raw footage, you can either upload the file directly from the phone, or AirDrop it to your Mac from Photos (you should get a .mov), or sync it to iCloud (or connect the phone over USB, maybe) and then use Photos' "File > Export Unmodified Original"
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
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.
> 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.
No, it literally isn't. It's literally doing the opposite, it increases the display brightness in order to show the HDR content. The SDR content is dimmed proportional to the increase such that SDR has the same emitted brightness before & after the change.
SDR brightness is not reduced to "add contrast". The blog post doesn't seem to say that anywhere, either, but if it does it's simply wrong. As a general note it seems wrong about a lot of aspects, like saying that Apple does this on non-HDR displays. They don't. It then also conflates EDR with whether or not HDR is used. EDR is simply the representation of content between apps & the compositor. It's a working space not entirely unlike scRGB where 0.0-1.0 is simply the SDR range, and it can go beyond that. But going beyond the maximum reported EDR range, which can be as low as 1.0, the result is simply clipped. So they are not "simulating" HDR on a non-HDR display.
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.
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.
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
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.
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.
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.
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.
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...
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:
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.
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.
I think with Windows 11 it's a little easier now. At least, I don't have to do this for playing games in HDR. But I can't take screenshots or record videos this way using most built-in tools. Like window's screencapture tools and steams tools.
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?
> 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.
Some of it was just bad historical decisions. In particular SDR video only uses the values 16-235 instead of 0-255 because of some NTSC compatibility thing I don't quite remember. That's a huge loss!
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.
That option only works with Apple's XDR enabled displays (internal and external). For non-Apple external displays with HDR10, there's a separate "High Dynamic Range" toggle in the display settings in the display. On some Intel macs, if you open Display preferences while holding down the Option key, another option appears to disable simulated HDR. I'm not sure how to disable simulated HDR on the internal display of current Macbook Airs.
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.
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:
Save as "sample.mp4"With the MP4, generate a HDR version in WEBM:
With the plain MP4, generate the HDR version: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.
I kind of felt like Apple’s was the right approach, for that reason: they’d tend to support it in high-end video but not so much in image content. Although it sounds from downthread like that might be changing?
If the tech does seep into ads, as I guess it must eventually, I’ll be right behind you in turning it off…
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.
> 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.
I'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.
[dead]
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/
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.
To forestall more confusion: If your system is set to dark mode, the page background is not #fff, and is instead #1d1e20.
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.
> 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.)
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.
> 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.
I think you're confusing which HDR is being used. HDR photography, the multi-expose combinations, was probably iPhone 5S but that still results in an SDR image. That's a completely different thing entirely.
iPhones have not captured HDR images until much, much more recently. No earlier than iPhone 12 at the soonest (when they first could capture HDR video), although they keep fiddling with which format they use for the result. iOS 17 was when they added support for displaying these images in UIKit & Swift, which was only like 2 years ago give or take. WWDC '23 was similarly when they started talking about handling HDR images. And they just recently announced they'll be adopting ISO 21496-1 at WWDC 2024. ISO 21496-1 being the gainmap style approach that Google & Adobe adopted with UltraHDR in 2023.
Works in mobile Chrome, not in mobile Firefox; increases the overall screen brightness a bit to add the dynamic range. Shines!
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.
> 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
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)
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.
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
That sounds very good. Unfortunately in this instance I'm on Android.
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
Nice! Using HDR to improve contraste of a QR code is a really neat idea.
Here are all the emojis in HDR format, ready to import to Slack
My apologies to your co-workers
https://we.tl/t-CV83O4r74f
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.
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.
Safari only shows HDR in videos, not photos. It's possible to just show a single-frame video though.
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.
If it were to become a real problem I'd sooner see Apple, of all vendors, leave it as one of the many settings flags in Safari than intentionally avoid or remove support for wide range media in their app.
Related: there is also a CSS property coming which allows sites to control which page content should be clamped to standard range or not. Worst case you can just add an * !important override in your Safari->Preferences->Advanced->Style Sheet if nobody else considers it problematic but you still wanted to clamp things (in Safari, otherwise you can just disable HDR).
Apple is definitely not afraid to block otherwise widely available features behind flags or extra clicks. For example, Web Push is available on iOS only for "installed PWAs".
Why would we expect this to become more of a problem than, say, websites playing audio quietly to encourage you to turn your volume up, than playing extremely loud audio?
It looks like the current Safari developer preview supports it for images, according to the Mozilla bug.
So many people push for more browser engines yet Firefox can't implement HDR in 6 years.
Wonder if Ladybird will ever support it. (Imagine HDR on SerenityOS!)
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?
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
> 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.
> 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!
Apple doesn't darken SDR to amplify HDR. They keep SDR the same brightness as it was before HDR showed up. It appears like SDR gets dimmer because of your perception of contrast, but it's not actually within a small margin of error.
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?
Thank you so much for your reply - I will look into it!
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.
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.
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.
Interesting Im starting to think that perhaps only certain video software on an iphone would allow it - which explains why its so rare?
Does this video look super whacked up to you too? It is HDR: https://www.youtube.com/watch?v=ceSiK-0HX_I
Yes it is! But how does one make their video upload HDR? I am familiar with video editing but am unsure how I would perform a test, using a test video with my iphone, and upload it so it doesnt lose its HDR encoding? I believe there is a HDR setting for my phone, but I dont think it will upload by default in a HDR state such as the link you just gave me.
Thanks to everyone trying to help me understand this. I have heard of HDR for years but Ive never witnessed my macbook darken and brighten a video before like 2 months ago.
which MacBook do you have?
if you record in HDR, uploading that raw footage to YouTube should produce an HDR video. to get the raw footage, you can either upload the file directly from the phone, or AirDrop it to your Mac from Photos (you should get a .mov), or sync it to iCloud (or connect the phone over USB, maybe) and then use Photos' "File > Export Unmodified Original"
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
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.
> 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.
The screen is literally getting darker so the HDR video will appear to have more contrast.
https://prolost.com/blog/edr
No, it literally isn't. It's literally doing the opposite, it increases the display brightness in order to show the HDR content. The SDR content is dimmed proportional to the increase such that SDR has the same emitted brightness before & after the change.
SDR brightness is not reduced to "add contrast". The blog post doesn't seem to say that anywhere, either, but if it does it's simply wrong. As a general note it seems wrong about a lot of aspects, like saying that Apple does this on non-HDR displays. They don't. It then also conflates EDR with whether or not HDR is used. EDR is simply the representation of content between apps & the compositor. It's a working space not entirely unlike scRGB where 0.0-1.0 is simply the SDR range, and it can go beyond that. But going beyond the maximum reported EDR range, which can be as low as 1.0, the result is simply clipped. So they are not "simulating" HDR on a non-HDR display.
Time to make my Slack profile pic really stand out
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.
To test if your OS+browser combo actually supports HDR: https://www.wide-gamut.com/test
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%
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.
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
Instructions on turning ’em off: https://github.com/swankjesse/hdr-emojis
The Loudness War has come to Slack.
https://en.wikipedia.org/wiki/Loudness_war
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.
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
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.
Do y'all have HDR screens? Apparently I don't! And judging by this thread, I'm not missing much?
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
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.
> 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.
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.
HDR-Infused Slack emoji that is, not unicode emojis.
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.
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.
> Works great in Chrome and Slack, and not at all on Android devices.
Hurmm it does work for me in Chrome on Android.
> 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...
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
This creates an additional reason to run Firefox: innate HDR abuse blocking. :)
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.
Yes, that is expected. I think it is intentional as it can be pretty disturbing.
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?
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
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.
> Works great on iPhones
Funnily enough, on my iPhone I'm getting the blue box question mark instead of the images on the page.
>Works great in Chrome and Slack, and not at all on Android devices
Working fine here on my pixel 8 in Vivaldi
HDR is terrible
The fact that you can't turn it off system wide shows the macOS leadership is asleep at the wheel
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.
I think with Windows 11 it's a little easier now. At least, I don't have to do this for playing games in HDR. But I can't take screenshots or record videos this way using most built-in tools. Like window's screencapture tools and steams tools.
https://www.elevenforum.com/t/enable-or-disable-hdr-screensh...
It's actually a setting in snipping tool (unbelievably)
Not to mention the default hdr mapping is just mega bad.
Even nvidias was wrong for a while.
https://www.reddit.com/r/nvidia/comments/1b03yfg/rtx_hdr_pap...
I just want my hdr mapping to work
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?
> 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.
Some of it was just bad historical decisions. In particular SDR video only uses the values 16-235 instead of 0-255 because of some NTSC compatibility thing I don't quite remember. That's a huge loss!
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.
That option only works with Apple's XDR enabled displays (internal and external). For non-Apple external displays with HDR10, there's a separate "High Dynamic Range" toggle in the display settings in the display. On some Intel macs, if you open Display preferences while holding down the Option key, another option appears to disable simulated HDR. I'm not sure how to disable simulated HDR on the internal display of current Macbook Airs.
thanks for the clarification
This is exactly the kind of stuff I come to hacker news for.
Thanks, I hate it.
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.
[dead]