(Ab)use HDR images for marketing

Does one of these images look brighter to you? If not, try opening this on a recent iPhone (with battery saving disabled), a recent Pixel, or a recent Mac. Chrome / Safari are preferred. You can still continue to read, but sadly won't see the effect discussed here.

I was browsing LinkedIn to get my daily dose of motivational quotes and stumbled upon a promotion that instantly caught my attention, not because of its content, but because the white of the logo was brighter than anything else on my screen. I had never seen something like this and tried to screenshot it, to no avail, the effect was not captured . What was going on? Am I tripping? I won't link to the exact page I saw, but I created my own page with an extra bright picture. If your device passed the previous HDR image check, the company's logo should be abnormally bright. Works especially good on a recent MacBook Pro.

So what's going on? The image is an HDR image. This is not to be confused with the classic HDR tone mapping where, for example, you took three photos with different exposures, merged them, and created some artistically valuable or horrifying image. The HDR here refers to the newer display technology, which is capable of displaying colors outside of the classical 00 - FF range by using the dynamic brightness of the display to make certain parts extra bright or dark.

To properly see HDR images, you first and foremost need a display that has this capability, and then a software stack that can use it. My iPhone with Safari checked both of these boxes, enabling me to see this.

So while this technology is really cool and useful for games, videos, and looking at your own images, this use is firmly in abusive territory. I don't think it will take long until the major sites disable this behavior for images uploaded to their pages, or try to monetize it. But until then, let's have some fun and use the effect for ourselves. Try it out here (it's completely client-side):

I also made it into a standalone website for easier usage, as there was nothing like it yet: extrabrightimages.com.

But how does this actually work? Greg Benz has a really great overview about all this, so definitely check out his resources for a much more detailed breakdown.

There are several ways to create these images. The "best" is creating an Ultra HDR image, which is an extension of the JPEG file format. It consists of three things:

• The original JPEG
• A gain image, which is a black and white image (mask) that says which parts should be made brighter / darker. White will make something bright, black darker, and gray won't change anything.
• Metadata that says how strong the effect should be. For example, if a spot is white in the gain map, how bright should it be shown? If you set this value to the brightness of the literal sun, you might be disappointed about the actual brightness. Your display has a technical upper limit on how bright it can get. The important unit here is "nits". The more nits your display has, the brighter it can get. But this means there is no real max value here, future displays will get brighter and brighter and you cannot fully control how an HDR image will look. Depending on the display's brightness, it will differ.

It's pretty neat as it is backwards compatible and you can control how the image should look for non-HDR displays.

The actual heavy lifting is done by libraries that use this data to create the actual images. I used https://github.com/kleisauke/wasm-vips, which worked great and uses https://github.com/google/libultrahdr itself for this.

But this is actually not what I used for the image for LinkedIn, because Ultra HDR images sadly do not work there. Which is a shame, as they are so much simpler to create, backwards compatible, and offer complete freedom over the final look.

The other way to create an HDR image is to use an HDR color profile. The only one I found that's properly supported is Rec.2100 PQ. The PQ part is what makes this into an HDR image. The bigger color space or 10-12 bit colors just make it look better. You can even make 8 bit JPEGs into HDR images. But as they only have 255 values for each pixel per channel, you won't be able to create good gradients with that though, but good enough for e.g. a black and white logo. The only difficulty is correctly mapping an existing image into the new color space. Thankfully I found a project by shigedangao on GitHub that does exactly this and it worked perfectly: https://github.com/shigedangao/lymui.

So here is the same applet for this approach. You will notice that this image is not as backwards compatible, but at least we can now grab people's attention on LinkedIn now without what building this website taught me about B2B SaaS.

That is all, have fun with your extra bright images.