At ThoughtFox Media, we believe premium hardware deserves premium assets. If you’ve ever noticed that a professional YouTube video or a high-end logo “glows” on your iPhone 17 or MacBook Pro, but your brand logo looks dull and gray in comparison, you are suffering from the SDR Slump.
Standard sRGB (SDR) assets are capped at approximately 100 nits of relative brightness. Modern Apple XDR (Extreme Dynamic Range) displays, however, can hit peaks of 1,600 nits. To close this gap, you need to transition to HDR Branding. But how?
By using Gain Maps, you ensure your logo literally outshines the competition on high-end displays while remaining perfectly compatible with older screens.
Apple’s EDR (Extended Dynamic Range) technology treats non-HDR assets as “flat.” When your display ramps up its brightness to show a bright sunset in a video, your SDR logo remains clamped to the bottom of the luminance range. This makes the logo appear muted, “muddy,” or grayed out compared to the vibrant HDR content surrounding it.
What Is a JPG Gain Map (ISO 21496-1)?
A Gain Map is a secondary metadata layer embedded within a standard JPG file (following the ISO 21496-1 standard). It acts as a dual-layer instruction set for the display:
- SDR Base: Tells older, standard screens to show the logo at normal brightness.
- Gain Metadata: Tells HDR-capable screens exactly which pixels to “boost” beyond 100 nits.
The result is a single file that works everywhere but provides a luminous, high-end “pop” on modern hardware.
Prerequisites: Software and Hardware Requirements
Before you begin, ensure your workflow supports HDR metadata. You cannot simply “save as” a standard file to get these results.
- Software: Adobe Lightroom (Desktop) v7.0 or Lightroom Mobile v7.0+. Older versions do not support the ISO-standard Gain Map export.
- Hardware: An Apple Silicon Mac (M1/M2/M3/M4/M5) with a Liquid Retina XDR display, a Pro Display XDR, or an iPhone 12 Pro or newer.
- Source File: You must start with a high-bit-depth file. Use a 16-bit TIFF or a high-quality PNG-24. Upscaling an 8-bit web JPG into HDR will cause severe banding and digital artifacts.
Step 1: Enable HDR Editing in Adobe Lightroom
Once you’ve imported your high-bit-depth logo into Lightroom, you’ll need to break the SDR ceiling.
- Enter the Edit Panel: Open the Light or Edit tab.
- Enable the HDR Toggle: Look at the top of the Histogram. Click the button labeled HDR.
- Analyze the Histogram: The histogram will expand to the right. The left side represents the standard SDR range (0–100 nits). The new sections to the right represent “stops” of HDR headroom (up to 4+ stops of additional brightness).
Step 2: Define Peak Luminance/Glow
The goal isn’t to make the whole logo white; it’s to make the highlights “sing” without distorting the brand colors.
- Activate HDR Visualizer: Check the HDR Highlight Clipping box (or press the ‘J’ key). This overlays bright colors on your logo to show which parts are pushing into the HDR range.
- Adjust the White Point: Use the Whites and Exposure sliders. Gradually increase them until the highlights of your logo (the whites or bright brand colors) move into the first or second stop of the HDR range.
- Maintain Color Integrity: Be careful with the Saturation slider. HDR displays can represent colors more vividly, but you don’t want to distort your brand’s specific hex codes. Focus on Luminance rather than saturation to achieve the professional “glow.”
Step 3: Export HDR JPG with ISO Metadata
This is the most critical stage. If you export incorrectly, the Gain Map will be stripped, and the file will revert to a flat SDR image.
- Open Export Dialog: (Cmd+E on Mac).
- File Type: Select JPG.
- Check “HDR Output”: This box must be checked. This is what embeds the ISO 21496-1 metadata.
- Color Space: Select HDR P3. This is the native gamut for Apple’s XDR and Super Retina displays.
- Quality: Set to 90 or higher. Since you are adding a metadata layer, you want to avoid compression artifacts that become more visible at high brightness levels.
How to Verify Your HDR Assets on macOS and iOS
Once exported, you’ll need to confirm the metadata is triggering the display hardware.
- The “Flicker” Test: Open your exported JPG in Safari on a MacBook Pro. As the page loads, you might see the logo “snap” or “flicker” into a higher brightness state a split second after the image appears. This is the OS reading the Gain Map. Compare the image on an HDR-capable Apple display against an SDR display. Bright highlight regions should appear noticeably more luminous on the HDR display while the SDR appearance remains unchanged.
- The Photos App Sync: AirDrop the file to an iPhone Pro. Swipe through your photos; when you land on the logo, the screen should noticeably brighten in the highlight areas.
- Fallback Check: View the file on a standard office monitor. It should look like a normal, high-quality logo without any “blown out” sections.
Best Practices for Web Deployment
- Browser Compatibility: Currently, Safari (macOS/iOS) and Chrome (v116+) fully support Gain Map JPGs. Firefox support is currently in development.
- CSS Considerations: You do not need special CSS or JavaScript to trigger HDR. The display hardware reads the JPG’s metadata automatically. Treat it like a regular
<img>tag. - File Size: An HDR Gain Map JPG is typically 10–20% larger than a standard JPG. Given the visual impact, this is a negligible trade-off for premium branding.
Conclusion
HDR branding is the next frontier for digital identity. As XDR displays become the standard for mobile and desktop users, flat SDR assets will increasingly look dated and dim. By mastering the HDR JPG export with Gain Maps, you ensure your brand occupies the full dynamic range of your customer’s hardware.
ThoughtFox Media Pro Tip: If your logo isn’t using the full nit-range of your customer’s device, you’re leaving visual real estate on the table. Start exporting in HDR today to ensure your brand stands out in a crowded digital landscape.
Thanks for reading!
Leave a Reply