How to publish HDR photos on your website

Phones and cameras have been taking HDR photos for years. Many phones, tablets and laptops on sale have screens that can show them. Yet most HDR photos that reach the web arrive flat. The sun becomes a white disc and the sky loses its glow. Usually there was nothing wrong with the photo. Somewhere between the camera and the page, the extra light got thrown away.

This guide covers the whole path: which files to publish, the HTML to use, the steps that strip HDR without warning, and how to check what your visitors see.

1. Publish several formats, not one file

No single HDR image format is shown in HDR by every browser. Each one covers a different set:

• A gain map JPEG is an ordinary JPEG plus a small map of how much brighter each part of the photo can be. Chrome and the other Chromium browsers (Edge, Brave, Opera) show it in HDR, and so does Safari 26 or later on iOS 26, iPadOS 26 or macOS 26. Firefox, older Safari and Safari 26 on an older macOS show only the ordinary JPEG inside it. It never breaks, which makes it the right fallback, but on its own it leaves many visitors without HDR.
• An HDR AVIF is usually smaller, and shown in HDR by Chrome, Edge and Safari 26 or later on iOS 26, iPadOS 26 or macOS 26. A plain HDR AVIF has no standard version inside and shows far too dark in Firefox, so it should never be the only file.
• A short, silent HDR MP4 reaches browsers that show HDR video but no HDR image format, such as Safari 14 to 25 and Firefox on macOS and Windows. HDRJPG makes it in two codecs. H.264 plays almost everywhere. 10-bit HEVC keeps skies and other smooth gradients free of banding, and its colors are closer to the original, but not every browser plays it.

So the most compatible way to publish an HDR photo is as a set of files: a gain map JPEG, an AVIF and an MP4 of the same photo, at each size you need. The formats guide covers these and the other formats (JPEG XL, HEIC, EXR) in detail.

Where the HDR photo comes from:

• Lightroom or Camera Raw. Edit in HDR mode, then export as JPEG with Enable HDR Output and Maximize Compatibility checked. That gives you the gain map JPEG.
• An Android phone with Ultra HDR. Pixel 7 and later, Samsung Galaxy S24 and later, and a growing number of other Android 14 phones already save their photos as gain map JPEGs.
• An iPhone photo (HEIC) or an EXR. These have the HDR data but need converting.

Whatever the source, HDRJPG turns it into the whole set, online or through its API when you have many photos, keeping the HDR in every file.

2. Put it on the page

The files need markup that offers all of them and makes sure each browser uses one it shows in HDR. The HDRJPG embedding guide gives the snippet we recommend. In outline, it wraps a <picture> element with the AVIF and the gain map JPEG, and adds the MP4. Copy the exact snippet from the embedding guide: it carries details this outline leaves out, such as a workaround for Edge.

<div class="hdrjpg" data-mp4-src="photo-hdr.mp4" data-mp4-hevc-src="photo-hdr.hevc.mp4">
    <picture>
        <source srcset="photo-hdr.avif" type="image/avif">
        <img src="photo-hdr.jpg" alt="Sailboat at sunset" width="1800" height="1349">
    </picture>
</div>

A few lines of JavaScript, given in the embedding guide and in the hdrjpg-js package, replace the picture with the HDR video in the browsers that cannot show the image formats in HDR. The script plays the HEVC video where the browser can, and the H.264 one everywhere else. With the full set of files and this markup, the photo shows in HDR in almost every current browser on a phone, tablet or computer with an HDR screen (the exceptions are Firefox on Linux, Safari before 26 on macOS, and Windows with HDR switched off), and as a normal photo everywhere else.

A plain <img> with only the gain map JPEG also works, and is the simplest option, but it shows HDR only in the browsers listed above:

<img src="photo-hdr.jpg" alt="Sailboat at sunset" width="1800" height="1349">

Two details matter for HDR in particular:

• Give the image its size. Use width and height, or a CSS aspect-ratio, as you would for any image. HDR files are larger than standard ones, so a page with no reserved space jumps around more while they load.
• Be careful with CSS effects on the image. Safari 26.0 and 26.1 showed gain map JPEGs in their standard version when the image used CSS positioning or transforms, or while a CSS transition ran nearby. Both are fixed in later versions, but many visitors keep an older one for a long time. If an image shows in HDR on its own but not in your layout, try it without those styles.

3. Do not let the upload strip the HDR

This is where most of the damage happens. Anything that re-encodes the JPEG usually writes a new JPEG without the gain map. Resizing, recompressing and converting to WebP all re-encode. The image libraries most tools use did not carry gain maps over until 2026, and most still do not: ImageMagick does from version 7.1.2-26 when built with the libultrahdr library, libvips from 8.18, sharp from 0.35 only if the tool asks for it, and GD and Pillow not at all. The usual culprits:

• Website builders and CMSs that generate their own sizes of every upload. Since WordPress 7.1 the sizes generated at upload keep the gain map, but only when you upload from Chrome or Edge; from Firefox or Safari the server generates them and drops it. Cropping, rotating or flipping in the editor still removes it. Squarespace has been reported to strip it on upload.
• Image CDNs and optimization plugins that resize or convert on the fly.
• Messaging and social apps, which recompress images. Instagram and Threads have been reported to keep the gain map in posts, and Google Photos and Google Messages keep it. Most others do not.

The fix is to publish the exact files you exported, at the sizes you need, and keep the tools in between from touching them. In WordPress, insert the Full size image rather than a generated size, and keep the upload under 2560 pixels on its long side, because above that WordPress's "full" size is itself a scaled copy. With a CDN, serve HDR images from a path it does not transform. The guide why HDR photos look flat after uploading goes through this in more detail.

4. Check what your visitors see

You need an HDR screen: an iPhone 12 or later, an iPad Pro, a 14 or 16-inch MacBook Pro from 2021 on (other recent Macs show a milder effect at moderate brightness), a recent flagship Android phone, or a monitor with HDR turned on in your display settings (on Windows laptops it is off on battery by default). Then:

1. Open the page in Chrome, in Safari (on iOS 26 or macOS 26 or later) and in Firefox. The highlights should be clearly brighter than the white of the page around the photo. If they are in Chrome but not in Firefox or an older Safari, the page is serving only the gain map JPEG: add the AVIF and MP4 with the embedding markup.
2. On a screen without HDR, you should see a good standard image, not a broken or washed-out one. That is the fallback working.
3. Download the image from your live page and compare its size with the file you exported. If it is a lot smaller, the gain map was most likely removed on the way.

The examples page is a quick way to check your own screen first. Each photo there has a slider between its standard and HDR versions. On an HDR screen the difference is obvious.

Doing it for many photos

For a portfolio, a shop or an app with many photos, converting each one by hand is not an option. The HDRJPG API takes an iPhone, Android, Lightroom or EXR photo and returns the whole set in one call, at every size you need: gain map JPEG, AVIF and MP4, plus JPEG XL if you want it. Each file keeps the HDR of the original, which is the part ordinary resizing tools get wrong. With the embedding markup on the page, almost every visitor's browser gets a version it can show in HDR, on any phone, tablet or computer with an HDR screen. The PHP SDK wraps it all in a single function.