HDR soft proofing (confirm your images look great ANYWHERE)

You may drag and drop images here

Selected preview. Click to replace image.
SDR (least capable screen) HDR (best on your screen)
Cannot run test: JavaScript not allowed

This page may be used to soft proof your HDR images to see how they will look on monitors less capable than yours. The key to sharing great HDR images is to include a gain map so that your audience can see a great result on any monitor. See the video and text below for full details.

To test your image:

  • Drag and drop it into the area above.
  • You’ll see notes on image quality (with details for JPG gain maps). This written info is supported on any system.
  • Drag the slider left to see how the image will look on monitors less capable than yours. The right side is the best version your monitor can display.
  • To properly soft proof anything above SDR, you will need an HDR monitor.
    • Click the headroom test button to confirm how many stops of support you have.
    • If this test is greater than the encoded headroom of a given image (shown in the image-specific info), then the right side of the slider is showing you the full HDR rendering. If your display headroom is less than the image is encoded to use, the right side of the slider is showing the version for your display’s current headroom (as you cannot soft proof something above the limits of your display).
    • Please see recommended HDR monitors if you need help finding an ideal display.
  • You may use arrow keys for shortcuts:
    • left/right to toggle between images
    • up for max HDR or down for SDR.
  • A good use of this comparison would also be to compare your original image to the version you see after uploading to a website (you’ll have to download it from the site). This can help ensure the uploaded image retains full quality.

Important lessons from the included samples:

  • Images with a gain map look much better than just a simple HDR on limited displays (which you’ll see when sliding left and toggling image A/B).
    • This is because the browser relies on automated tone mapping and won’t optimize the image the way an artist would. But a gain map lets you specify both the full HDR and limited SDR to ensure everyone sees a great image.
    • Note that gain map shows an SDR result with better cloud details, color, no shrinking of the Joshua tree leaves, etc.
    • The SDR view exactly matches what I created with Web Sharp Pro. You may or may not edit the SDR the way I did, but the key point is that the gain map looks exactly the way I want it to. This gives you full control and a predictable result.
    • Note that gain maps are ideal for any format, not just JPG. If I created the sample AVIF image with a gain map, it would look as good or better than the JPG – and also be about half the size.
  • High-quality gain maps produce much better HDR images.
    • It is common for smart phones to capture or export images with low quality (luminosity-only maps at 1/2 resolution for iPhone or 1/4 resolution for Android).
    • Notice the loss of color and fine detail in the mosque sample image B at any level of HDR. This loss of quality is due to a 1/2 resolution, luminosity-only mask.
    • Note that the base (SDR) version is not affected by a low quality map, because the map is only used to generate the alternative (HDR).

Browser-specific bugs / limitations for images:

  • Firefox does not support HDR, which reinforces why gain maps are always better than simple HDR without a map (it will show a great SDR from the gain map, vs a very dark image for the HDR-only image).
  • The slider on this page won’t work on Safari for anything but the SDR-only view (far left). Safari does not yet support the mechanism for limiting headroom, so the slider will show the max headroom until you slide all the way to the far left. This just limits your ability to soft proof here, Safari will otherwise adapt to any display.
  • Safari does not appear to decode gain maps per the ISO specification.
    • My visual headroom test (#1c) shows no adaptation as I change brightness (1.7 to 4.0 stops on my Pro Display XDR) in Safari. At all times, that test shows 3.0 stops, suggesting that the gain map is decoded to a 3-stop HDR and then tone mapped down if display headroom is below that.
    • By comparison, Chrome shows the expected adaptation (the visuals match actual headroom reported in test #1a at all times).
    • As a result, Chrome-related browsers will show a superior result nearly any time your display headroom is not 3 stops:
      • adaption is inferior below 3 stops (your iMac or MacBook Air will look better under Chrome, as well as your MacBook Pro if you’re in ambient light which limits your headroom).
      • images encoded for 4 stops will only show 3 stops of benefit and will look dark (your MacBook Pro will look better under Chrome)
    • While it is great that Safari supports HDR / gain maps now (especially on iOS where WebKit is the basis of all browsers and there was no previous HDR option), this still falls short of the HDR experience on Chrome or a related browser like Brave. I recommend using those alternative browsers on MacOS for now for the best HDR experience.
  • Safari may fail to render HDR gain maps on some complex page layouts (my website is generally not affected), or while CSS transitions are active (hover over this gallery to see the transitions bug in Safari).
  • Chrome-related browsers may show artifacts at edges for extreme cases.
    • This is a minor edge case and mostly affects extreme test patterns like my cats vs dogs demo image. Using CSS (image-rendering: pixelated) will avoid that (you may enable that on this page by clicking the blue button below).
    • Safari does not show this issue.
  • Chrome-related browsers show a slight hue shift in bright highlights for AVIF on displays supporting the full 4 stops rendering (notice the sample clouds shift yellow, while the gain map perfectly matches what you would see in Photoshop). This is yet another reason to share JPG gain maps, which are not affected by this.
  • Chrome will not render headroom >4 stops even when the display supports it. This is a minor issue today as few people have displays which would support it. However, a Pro Display XDR can achieve these levels at low brightness, and a TV like the TCL X11L should support up to 6.6 stops (as it theoretically supports the full 10,000 nits PQ spec). So this could impact your personal use at home (I expect to purchase such a display in the near future).

Note: This page is experimental. If you see any errors, please comment below or email Greg. Known limitations: 

More information on gain maps:

Greg Benz Photography