9 ms·
HDR‑Infused Emoji
- efemoney 1y agoHow 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
- jchw 1y agoLooks like this works on Chrome for Android, but Firefox doesn't seem to support HDR at all. https://bugzil.la/hdr https://bugzil.la/hdr Maybe some day.
- lxgr 1y agoNeither 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 1y agoSafari only shows HDR in videos, not photos. It's possible to just show a single-frame video though.
- lxgr 1y agoAnd 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.
- jchw 1y agoIt looks like the current Safari developer preview supports it for images, according to the Mozilla bug.
- zamadatix 1y agoIf 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).
- tshaddox 1y agoWhy 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?
- zamadatix 1y agoWebsites can't autoplay audio anymore (which is actually really annoying in a few use cases) precisely because of abuse. I don't think it'll be problematic though because a site can already choose to show you images a lot more bothersome than a bright light (I say this as I type on a 1600 nit HDR monitor) already and that's not a particularly common problem to worry about either. Same for videos, which already HDR support in browsers.
- tshaddox 1y ago> Websites can't autoplay audio anymore (which is actually really annoying in a few use cases) precisely because of abuse. But this is hardly true. There are some complicated heuristics (like Chrome's "Media Engagement Index") but many websites can and do autoplay video and audio. And browser policies are even more relaxed for playing audio on user events (like clicking).
- zamadatix 1y agoMEI (and the like) is what I'm referring to, though perhaps we look at this from different angles. Sites can still mark audio should autoplay but it's now up to the browser to decide if it actually does it (because shitty sites would abuse that).
- new_user_final 1y agoSo many people push for more browser engines yet Firefox can't implement HDR in 6 years.
- LoganDark 1y agoWonder if Ladybird will ever support it. (Imagine HDR on SerenityOS!)
- matsemann 1y agoFeels 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.
- Groxx 1y agoThis 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.
- pier25 1y agoyes it's blinding on my MBP lol
- BoorishBears 1y ago> These examples will work best when posted to Slack. I should not have been clued into this power.
- lxgr 1y agoFor 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/ 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 https://prolost.com/blog/edr
- joshuaturner 1y agoTime to make my Slack profile pic really stand out
- globular-toast 1y agoInteresting, 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.
- muglug 1y agoCan 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.
- tasuki 1y agoDo y'all have HDR screens? Apparently I don't! And judging by this thread, I'm not missing much?
- Jeremy1026 1y ago> Works great on iPhones Funnily enough, on my iPhone I'm getting the blue box question mark instead of the images on the page.
- ionwake 1y agoSorry 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 1y agoScreens 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 https://en.wikipedia.org/wiki/Hybrid_log%E2%80%93gamma [2] https://en.wikipedia.org/wiki/Colour_banding https://en.wikipedia.org/wiki/Colour_banding [3] https://en.wikipedia.org/wiki/Chroma_subsampling https://en.wikipedia.org/wiki/Chroma_subsampling
- ionwake 1y ago
- recursive 1y agoI 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.
- detaro 1y ago> 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.
- pjerem 1y agoYou 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.
- donohoe 1y agoI used (abused) HDR in an editorial project last year. We were working with an amazing illustrator doing a take on series of stories exploring the intersection of faith, storytelling, and technology. As the early versions of the images emerged we thought we could used HDR to provide more or a aura to some elements. We tried to make it subtle and not overwhelm. This example is my favorite: https://restofworld.org/2024/divinity-altered-reality-muslim-gaming/ https://restofworld.org/2024/divinity-altered-reality-muslim... I think it worked well - and this technique would have been useful. We tried something similar but could not get it to work. Our method was to use a stretched HDR video in the background. Here are the steps I used: In Photoshop create white image to proportions required. Save as MP4: File > Export > Render Video Save as "sample.mp4" With the MP4, generate a HDR version in WEBM: ffmpeg -i sample.mp4 -pix_fmt yuv420p10le -color_primaries 9 -color_trc 16 -colorspace 9 -color_range 1 -profile:v 2 -vcodec libvpx-vp9 sample.webm With the plain MP4, generate the HDR version: ffmpeg -i sample.mp4 -pix_fmt yuv420p10le -color_primaries 9 -color_trc 16 -colorspace 9 -color_range 1 -profile:v high10 -vcodec libx264 sample.mp4
- timciep 1y agoThat looks amazing!
- shahahmed 1y agothese look so tasteful and well done
- Forgeties79 1y agoBig fan of the final result. Very striking
- tobr 1y agoRemember seeing this when it was published. Excellent work, great use of HDR.
- InsideOutSanta 1y agoWow, this is super smart, and the effect is really compelling and novel.
- 1y ago
- dmd 1y agoTo 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 1y agoTo forestall more confusion: If your system is set to dark mode, the page background is not #fff, and is instead #1d1e20.
- moron4hire 1y agoThere'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 1y ago> 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 1y agoA 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 1y ago> 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.
- jessewilson 1y agoInstructions on turning ’em off: https://github.com/swankjesse/hdr-emojis https://github.com/swankjesse/hdr-emojis
- 1970-01-01 1y agoThanks, I hate it.
- ChrisArchitect 1y agoHDR-Infused Slack emoji that is, not unicode emojis.
- dangoodmanUT 1y agoHDR is terrible The fact that you can't turn it off system wide shows the macOS leadership is asleep at the wheel
- Night_Thastus 1y agoHDR 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.
- benbayard 1y agoI 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.
- jofzar 1y agohttps://www.elevenforum.com/t/enable-or-disable-hdr-screenshot-color-corrector-in-snipping-tool-in-windows-11.24243/ https://www.elevenforum.com/t/enable-or-disable-hdr-screensh... It's actually a setting in snipping tool (unbelievably)
- jofzar 1y agoNot 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_paper_white_gamma_reference_settings/ https://www.reddit.com/r/nvidia/comments/1b03yfg/rtx_hdr_pap... I just want my hdr mapping to work
- LoganDark 1y ago> 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.
- LoganDark 1y agoFun 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-P2POQ277/C88D9BFD-661D-42D5-8ACB-43F2E235DD9C.mp4 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)
- Spunkie 1y agoDoesn't seem to work at all on linux in any browser I test. My laptop and distro support HDR and it's turned on.
- nialv7 1y ago> Works great in Chrome and Slack, and not at all on Android devices. Hurmm it does work for me in Chrome on Android.
- A_Duck 1y agoHere are all the emojis in HDR format, ready to import to Slack My apologies to your co-workers https://we.tl/t-CV83O4r74f https://we.tl/t-CV83O4r74f
- MasterScrat 1y agoMore HDR shenanigans from some time ago: https://news.ycombinator.com/item?id=36389285 https://news.ycombinator.com/item?id=36389285 Demo: https://notes.dt.in.th/HDRQRCode https://notes.dt.in.th/HDRQRCode Interestingly that one worked on iPhone, while the new emojis one doesn't
- WhyNotHugo 1y agoNice! Using HDR to improve contraste of a QR code is a really neat idea.
- MasterScrat 1y agoOn 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
- basisword 1y agoThis 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.
- sgt 1y agoYes, that is expected. I think it is intentional as it can be pretty disturbing.
- ALLTaken 1y agoHere's how you do that in CSS4! For an image or video: - https://github.com/ccameron-chromium/hdr-headroom-limit/blob/main/EXPLAINER.md#example https://github.com/ccameron-chromium/hdr-headroom-limit/blob... - https://drafts.csswg.org/css-color-hdr/#controlling-dynamic-range https://drafts.csswg.org/css-color-hdr/#controlling-dynamic-... For a canvas element: - https://github.com/w3c/ColorWeb-CG/blob/hdr_canvas_r2/hdr_html_canvas_element.md#add-display-color-volume-information-to-screen-interface-of-the-css-object-model https://github.com/w3c/ColorWeb-CG/blob/hdr_canvas_r2/hdr_ht... Resource: https://www.w3.org/TR/mediaqueries-5/#dynamic-range https://www.w3.org/TR/mediaqueries-5/#dynamic-range
- ValveFan6969 1y agoI 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.
- thunderfork 1y ago[dead]
- jjcm 1y agoI 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.webp 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 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/ https://html.non.io/emoji/
- matsemann 1y agoThanks for this! I was also trying to do the same, what I ended up doing was making a mask and only apply the multiply/pow to things inside that mask, but the profile still messed up the colors of the remaining pixels. So I dimmed the parts not in the mask by taking away -30% saturation or so. But your result is much better, will try it.
- neilv 1y agoThis creates an additional reason to run Firefox: innate HDR abuse blocking. :)
- jillyboel 1y agoIt'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?
- 0xTJ 1y agoI'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.
- ValentineC 1y agoThanks 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
- paradox460 1y ago>Works great in Chrome and Slack, and not at all on Android devices Working fine here on my pixel 8 in Vivaldi
- pxc 1y agoTo 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 1y agoOn 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 1y agoThat sounds very good. Unfortunately in this instance I'm on Android.
- aizk 1y agoThis is exactly the kind of stuff I come to hacker news for.
- markrages 1y agoThe Loudness War has come to Slack. https://en.wikipedia.org/wiki/Loudness_war https://en.wikipedia.org/wiki/Loudness_war
- globular-toast 1y agoIt 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.
- notpopcorn 1y agoIf 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.
- yobananaboy 1y agoThis also works on Slack profile pictures if you want to be extra obnoxious!
- OisinMoran 1y ago> 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...
- sintax 1y agoTo test if your OS+browser combo actually supports HDR: https://www.wide-gamut.com/test https://www.wide-gamut.com/test
- boarnoah 1y agoUgh, 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%
- Modified3019 1y agoHere’s what I see on iPhone safari vs saving the images to photos https://imgur.com/a/dSva7S9 https://imgur.com/a/dSva7S9 What you will see however, is completely unknown.