How to publish HDR photos on your website

Phones and cameras have been taking HDR photos for years. Most 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, Edge, Brave, Opera and Safari 26 or later show it in HDR. Firefox and older Safari 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 smaller, and shown in HDR by Chrome, Edge and Safari 26 or later. It has no standard version inside, 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 older Safari versions and Firefox on many systems.

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. Recent Pixel phones, and more and more other phones with Android 14 or later, 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">
    <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. With the full set of files and this markup, the photo shows in HDR in almost every browser, on any phone, tablet or computer with an HDR screen, 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. Bug reports for Safari 26 describe gain map JPEGs falling back to their standard version when the image is moved with CSS positioning or transforms, or while a CSS transition runs nearby. 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 do not carry gain maps over. The usual culprits:

• Website builders and CMSs that generate their own sizes of every upload. WordPress has been adding gain map support, but its resized copies, and images edited in its editor, have been reported to lose the gain map. 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. 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. 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: a recent iPhone or iPad, a MacBook Pro or iMac from the last few years, a recent Android phone, or a monitor with HDR turned on in your display settings. Then:

1. Open the page in Chrome, in Safari 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.