HDR‑Infused Emoji

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

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.