Today I Learned

Convert iPhone HDR .heic photos to web-compatible HDR images

4 min read

My iPhone makes HDR photos and saves them as .heic files. I would like to convert these such that they can be viewed on my Hugo blog, with HDR, which is often quite visible in highlights in dark photos, or very bright sunny photos.

TLDR: Using toGainMapHDR I can create web-compatible Ultra HDR (jpg + gainmap) from iPhone HDR .heic images, BUT Hugo‘s built-in image processing does not support the extra metadata, and so scaled srcset images render without HDR.

It seems I have two main options for displaying in people’s web browsers:

  • Ultra HDR: jpg + gainmap, widely supported
  • avif with gainmap: better compression, more features, not as widely supported

Ultra HDR:

libvips has recently added libultrahdr:

imagemagick uses libvips, but does not support these gainmaps yet

With pyvips, I have not (yet) been able to convert my HDR heic files into Ultra JPG although this should be possible.

For me on 2025-12-23, the only solution that worked was https://github.com/chemharuka/toGainMapHDR

  • after a quick build with xcode (product / build, then product / copy build folder path)
  • the command $BUILD_FOLDER_PATH/Products/Debug/toGainMapHDR IMG_5775.HEIC ./ -g -j yielded a jpg that rendered with HDR in Edge!
  • note that you need -g (older Apple gainmap), the newer ISO does not yet work in Edge / Chrome 143
  • readme is full of interesting info about the different ways that HDR information can be encoded. Two main approaches are
    1. single image with more bit depth and
    2. base SDR image with gainmap

However, Hugo’s recent(ish) word on this was that they were not currently interested in pursuing HDR in the context of Ultra JPG:

That means my figure shortcode srcset image resizing is not going to work, a problem that I have experimentally confirmed.

There is perhaps some hope with (far) future avif support in Hugo, possibly via the new wasm modality

random notes

  • For .heic HDR photos from the iPhone, image info in macOS preview shows 10-bit depth, >1 headroom and “PQ (Adaptive Gain Curve …)” under profile
  • Great Stack Overflow discussion of options for displaying HDR images in web browsers: https://stackoverflow.com/questions/51936897/how-does-one-create-and-display-hdr-images-in-web-browsers
  • Affinity 3.0.2 for macOS imports only the SDR part of HDR .heic images. When I import the full range HDR tiff I exported with Preview, my only options for HDR capable export are PNG and “Radiance HDR 32-bit ilnear”
  • Gimp 3.0.6 imports only SDR part of HEIC and of the full-range HDR tiff
  • https://hdrjpg.com/ - web-app that converts HDR heic’s into various web-compatible HDR formats
  • GraphicConverter 12.4.3 has great HDR support, but neither of the two JPG gainmap output settings renders correctly on latest Edge or Chrome on macOS. I have contacted their support to ask for help with this.

try modified libultrahdr + imagemagick recipe

From here: https://github.com/ImageMagick/ImageMagick/pull/7199#issuecomment-2646570977

homebrew magick already has uhdr linked in, but libultrahdr built without the recommended XMP setting:

magick: resources required for uhdr_encode() operation are not present `IMG_5775_magick.jpg' @ error/uhdr.c/WriteUHDRImage/966.

I rebuilt libultrahdr with the XMP setting:

brew uninstall imagemagick
brew edit libultrahdr
# do the recommended changes: , "-DUHDR_WRITE_XMP=ON"
brew reinstall --build-from-source libultrahdr
brew install imagemagick

… after which I got the same error when starting from the .heic file. It looks like imagemagick does not correctly read the HDR info from that file.

I tried the full-range HDR tiff which did not raise that error, but the output jpg did not render with HDR in macOS preview.

This will become possible in ImageMagick, just not right now.