Why your HDR photos look flat after uploading

You export an HDR photo and open it on your phone or laptop. The highlights glow. You upload it to your site and open the page on the same screen. Now it looks like any other photo. Nothing is broken, nothing warned you, and the HDR is gone.

There are two usual causes, and they often come together:

1. The browser cannot show that file in HDR. No single HDR image format works in every browser. A photo published as one file shows in HDR for some visitors and flat for the rest.
2. The file was re-encoded somewhere between your export and the page. The re-encoding kept the picture but dropped the part that made it HDR.

One file is not enough

Most HDR photos are published as a single file, very often a JPEG with a gain map: a standard picture plus a second, small image that tells an HDR screen how much brighter each part should be. That format has a real advantage, because every browser can at least show its standard picture. But only some browsers show the HDR in it, and only in recent versions. Firefox never does. HDR AVIF and HDR video each cover a different set of browsers. The formats guide has the details.

So if your photo looks flat in one browser and fine in another, the file may be intact: that browser simply cannot show that format in HDR. The fix is not a better single file but several files of the same photo, in several formats, and markup that lets each browser use the one it shows in HDR. That is what HDRJPG produces, and what its recommended embedding does. More on it at the end of this guide.

What re-encoding removes

The second cause applies to every format. Take the gain map JPEG as the example: it is two images in one file.

Any software that decodes the JPEG and writes a new one starts from the standard picture. Resizing, recompressing, stripping metadata and converting to WebP all do this. Unless the software was written to understand gain maps, it never looks at the second image, and the file it writes has none. The image libraries most of the web runs on, such as GD and older versions of ImageMagick, have not carried gain maps over. That is why the problem shows up in so many different tools.

Where it usually happens

Your CMS or website builder. Most of them create several sizes of every uploaded image and put those on the page, not your original.

• WordPress has been adding gain map support. But its generated image sizes have long been reported to lose the gain map, and bug reports say cropping or rotating an image in the editor still removes it. The Full size image keeps it, because WordPress does not re-encode that one.
• Squarespace has been reported to strip gain maps on upload.
• Other builders vary, and most do not say. Test before relying on one (see below).

Image CDNs and resizing services. Services that resize, compress or convert on the fly produce a new file each time. Unless the service says it supports gain maps, assume the HDR is removed. A plain storage bucket or CDN that serves files as they are keeps it.

Optimization plugins and build tools. Plugins that shrink JPEGs, and build steps that recompress images, re-encode them too.

Messaging and social apps. Most of them recompress every image. Instagram and Threads have been reported to keep gain maps. Most others do not.

How to tell whether the HDR survived

1. Look at it on an HDR screen, in more than one browser. With a single gain map JPEG, expect HDR in Chrome and Edge, and in Safari 26 or later, and a flat photo in Firefox: that is the format's limit, not a broken file. With HDRJPG's multi-format embedding, almost every browser should show it in HDR. That means a recent iPhone, iPad, MacBook Pro or iMac, a recent Android phone, or a monitor with HDR turned on. The bright parts should be brighter than the white of the page. Check your screen first on the examples page, where each photo has a slider between its standard and HDR versions.
2. Compare the files. Download the image from your live page and compare it with the file you exported. A gain map JPEG is noticeably larger than the same photo without one. A published file that is much smaller, or has different dimensions, was re-encoded.
3. Look inside the file. A gain map JPEG carries the gain map as a second image inside the file. exiftool lists it as MPImage2:

exiftool -MPImage2 published-photo.jpg

If it prints nothing, the file has no second image, and so no gain map.

How to publish so it stays HDR

• Publish several formats, not one file. For the widest reach, publish each photo as a gain map JPEG, an HDR AVIF and a short HDR MP4, and embed them with HDRJPG's recommended markup. Each browser then gets a version it shows in HDR, and every screen that cannot show HDR gets a normal photo. This is the way to reach the most browsers, including ones that show no HDR image format at all.
• Publish the files you exported, at the size you need. Resize before you export the HDR files, not after.
• Bypass the resizing. In WordPress, insert the Full size image. With other builders, look for an option to use the original file, or host HDR images elsewhere and embed them by URL.
• Serve HDR images from a path your CDN does not transform, or turn transformation off for them.
• Exclude HDR images from optimization plugins.
• Make every size and format you need from the HDR source. The HDRJPG API does this in one call: each size as a gain map JPEG, an AVIF and an MP4, plus JPEG XL if you want it, ready to serve as they are. Unlike a resizing tool, it keeps the HDR in every file it produces.

Once the files reach the page untouched, the embedding guide covers the HTML. With the full set of files and that markup, the same photo shows in full HDR on almost every phone, tablet and computer that has an HDR screen, whatever the browser, and as a normal photo on the rest.