Cats vs dogs (HDR gain map test)
I created this dog / cat test image to experiment a bit on my Instagram account. It’s a gain map which is designed to make it very easy to tell if you are viewing with HDR support. When you view this image and have HDR support, you will see a dog. But if you have an SDR display (or almost no HDR headroom at all), you will see a cat.
This test image is taking advantage of the fact that a “gain map” offers two different views of an image, based on the level of HDR headroom you have. The intent is that you would encode two variations of the same image: a basic SDR which is safe for viewing on any display, and an enhanced HDR which looks much better on displays which supports both HDR and gain maps.
But I’ve hacked the gain map format so that it is rendering two completely different images. If you lack HDR support, you see the base image (the SDR image of a cat). If you have at least 0.5 stops of HDR headroom, then the gain map is applied to generate the alternative version of the image. The intention would normally be to encode HDR content, but I’m not really using HDR pixel values in the dog image. So the effect is that you see one of two regular images, depending on your display’s capabilities.
What are you seeing here?
- This image is a JPG gain map.
- The base image is an SDR image of a cat.
- The alternative image shows a dog. This is encoded for HDR, but I’m not really using HDR values.
- So the effect is that you should see one of two different images based on whether your display supports HDR / gain maps (and whether you have more or less than 0.5 stops of HDR headroom, which you can confirm via test #1).
- (At the bottom below, I’ve added discussion on some ghosting you may see of the cat. It’s not a real concern, but the extreme nature of my test exposes an edge case.)
I have posted a higher-resolution version of this image on Instagram (IG), where the experience is also a bit different due to how IG uses it.
This simple test can teach us a lot about Instagram (IG), gain maps, and HDR support in general.
First, a few key things to know about gain maps:
- If you encode your HDR image properly, everyone gets a great experience every time on any device.
- The intended use is not to share two unrelated images like I am here, but this demonstrates how incredibly flexible gain maps are.
- For a real photo, the worst case is the same result you would have achieved if you did not share HDR – and those with support see a much better image.
- This makes gain maps the key to sharing HDR. Without them, you have no idea what your audience will see, and no ability to ensure a great result everywhere.
- The majority of people on IG will be able to see HDR photos properly
- IG is used primarily on phones and most phones less than 4 years old have great HDR support.
- Other people will see different versions of your image.
- This has always been the case even with SDR, primarily due to differences in color accuracy, color gamut, display brightness, and ambient light. HDR just introduces some additional variation.
- This is not at all a concern if you are doing #1 correctly (a proper gain map provides a very predictable and consistently excellent result).
- However, if you do not understand gain maps and do not check that the SDR fallback looks as you expect, others may have a poor experience. This is especially true if you simply share an HDR image with no gain map (in which case bad tone mapping is a risk and you have no artistic control over the fallback SDR image).
- This is easy to test by simply viewing your JPG gain map in Safari or Firefox, as neither support HDR gain maps at this time and will simply show the base SDR image.
- I will share more information on this topic in the future through this website and my newsletter in the future to help you get consistently great results. I recommend my tutorial on gain maps as a good starting point.
- Your image may be altered anytime you upload to a website.
- Whenever you upload your image, it will almost always be “transcoded” to a new image. For this reason, you ideally should confirm that your HDR image looks like your original when you upload it.
- This transcoding may be done to make the image smaller, lower resolution, cropped, check for hidden malware, etc.
- When the image is transcoded, the result may intentionally or accidentally strip the gain map from your image and result in an SDR-only experience. (It might even be converted to a static HDR as noted below, though this is very unlikely).
- In time, this should happen much less frequently as most of this is simply a lack of support in back end tools for transcoding gain maps. But there are some cases where a service provider may intentionally limit HDR (such as to minimize variability in a mix of SDR and HDR images in a grid).
- It is possible for pixels in an HDR image to be darker than in the SDR.
- Some of the dark pixels for the cat become much brighter in order to render the “HDR” dog.
- This isn’t terribly important for most people to know, but I think it nicely demonstrates the incredible power and flexibility of gain maps – even when working with just a pair of 8-bit JPG images.
On Instagram (IG), you may see only a cat, only a dog, or it may change!
Here are some examples of what I see:
- On a computer, the image will show as a dog in both the grid and large view, if you are viewing on a browser / display which supports HDR and gain maps.
- No real surprises here, this is how gain maps should work.
- If you are on MacOS, I recommend you consider using Chrome, Brave, Edge, or Opera. Apple has been producing outstanding HDR displays for six years, but unfortunately Safari does not yet support it for HDR photos.
- On a phone more than 4 years old (or using an operating system more than 1 year old), you are very likely only going to see the cat (SDR). Again, this is the expected behavior because these old phones simply do not have supporting hardware.
- On a Pixel 8 Pro running Android 15:
- The large view shows a dog, indicating HDR is supported (as expected).
- The grid also shows a dog, so the thumbnail is completely consistent with the large view of the image (as expected).
- If I change the phone’s brightness while viewing the large image, it remains a dog (as expected).
- On a Samsung S24 running Android 14:
- The experience is surprisingly quite a bit different. I don’t know if this is due to updates in the Android 15 (not yet available for Samsung), Samsung’s unique take on Android (One UI), or possibly something about the hardware (seems unlikely).
- The grid always shows a cat (SDR). This indicates that the small thumbnail generated by IG is SDR only. In other words, it is no longer a gain map.
- While it would be my preference that all derived versions of my image remain as I created them, I understand how IG may prefer to show a grid where the images appear more uniform by not mixing SDR and HDR content.
- Future web standards reference a middle ground where HDR may be rendered with partial support. This would offer a compromise so that HDR content shows some of its benefit, without looking so different from SDR content. I imagine that a grid view like this might adopt such an approach in the future (especially as HDR content becomes increasingly common).
- If I change the phone’s brightness while viewing the large image, the live view of the large image shows a cat. This indicates that I am seeing an SDR view of the image while I am actively changing the display brightness. It’s not a big deal, but I would prefer that I get an accurate preview of the display while I’m changing the brightness. Otherwise, the image I see on screen may be significantly brighter after I set brightness.
- On an iPhone:
- The experience is different from both Android scenarios above.
- The large view always shows a dog, even when the phone has zero HDR headroom (which would occur when I put the phone in direct sunlight or enable the “reduce white point” setting in iOS).
- This indicates that my image is not shared as a gain map on iOS. It is not adapting in an optimal way. Instead, the gain map has been converted to a simple HDR image (with no gain map), and some kind of tone mapping is being applied as needed (most likely the tone mapping provided by iOS).
- I never achieve the full headroom that the iPhone is capable of showing (which is 3 stops when brightness is no more than 80%). I’m getting something close though (between 2 and 2.5 stops of support).
- In my experience, the results are still extremely good and I have no concerns here.
- What is likely occurring is that IG uses the Google standard for sharing gain maps and iOS only supports the new ISO standard and Apple’s proprietary encoding). Computer browsers and Android do support that gain map format, but rendering on iOS is probably achieved by deriving a simple HDR.
- IG has been a leader in HDR and made numerous improvements to HDR support since launch. So assuming my theory that ISO gain map support is key, it is likely that the IG iOS experience will get even better in the future.
Your experience may differ from mine for several reasons including: phone hardware or operating system, the version of the IG app you’re using, the phone’s brightness setting, ambient brightness, split testing on IG (ie, an HDR display may be forced to SDR for testing), etc.
I’d love to hear your experience via the comments below. It would be helpful to know which hardware / operating system you are using, as well as your current level of “HDR headroom” (which you can find on a computer with test #1, or in a mobile phone via the histogram of an HDR photo in Lightroom mobile).
In addition, the image on this page (or IG) can help illustrate a quirk I have seen in numerous implementations of gain map decoders (including several browsers).
- Even when you have full HDR support, you may see a bit of a ghosted white outline of the cat eyes and ears or test over the dog.
- This helps illustrate that a gain map is not truly 2 photos in the same file. It is a base image (SDR here) and a psuedo image which provides instructions on how to multiply each base pixel to derive the alternate image (HDR here).
- The reason for the ghosting here is because you are not viewing the image at 100%. When the image needs to be resized, the base image and gain map should be combined and then rescaled as needed. However, you will likely see ghosting in some viewers because these two “images” are rescaled first and then combined. This causes potential misalignment at edges and/or errors in the gain map math.
- If you zoom in or out at the browser level (such as ctrl +/-), you may see the problem get worse or better. If you use the Adobe Gain Map Demo app and set the view to 100%, you’ll notice that the problem goes away.
- I consider this a bug, but you are unlikely to see this in a real image. It might occur near high contrast, hard edges – such as a sunset behind a building.
- Ideally, the decoders would be fixed to avoid this issue. However, there is a relatively simple fix for any image you share on your website. Just add CSS styling to use “image-rendering: pixelated;“.
- To demonstrate this, I have added this CSS to the image here. Just hover over the dog and the ghosting should disappear (as I am applying the fix only while you are hovering for demonstration – you should implement it without the “hover” restriction).
- Note that Adobe Camera RAW and Lightroom work well they do NOT exhibit this concern (as the image is rendered to HDR before you might rescale).
Note that if you are looking for an easy way to dive into sharing HDR images / gain maps, I recommend taking a look at the “enhance SDR to HDR” feature in my Web Sharp Pro plugin for Photoshop.