Embedding HDR images

Recommended embedding method

This is the currently recommended embedding method, which uses JPEG-XT, AVIF and MP4 files generated by HDRJPG to attain a near-100% browser compatibility as per the current status of current standards and browser technology.

Embed the image in your HTML like this:

<div class="hdrjpg" data-mp4-src="image.mp4">
    <picture>
        <source srcset="image.avif" media="all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {}" type="image/avif" /> 
        <img src="image.jpg" style="image-rendering: -webkit-optimize-contrast;"> 
    </picture>
</div>

Run this Javascript in your app:

if (
    'MozAppearance' in document.documentElement.style /* Target Firefox */
    ||
    /^((?!chrome|android).)*safari/i.test(navigator.userAgent) /* Target Safari */
) {
    document.querySelectorAll('.hdrjpg[data-mp4-src]').forEach((element) => {
        element.querySelector('picture').remove();
        let video = document.createElement('video');
        video.src = element.dataset.mp4Src;
        video.muted = true;
        element.appendChild(video);
    });
}

If you're using npm, you can just install the hdrjpg-js package instead.

Users with obsolete browser versions or without an HDR compatible screen will see a standard dynamic range instead.

Low browser compatibility solution with no HTML/CSS integration

JPEG-XT images created with HDRJPG can be used in HTML pages just like regular images, and will be displayed in HDR in capable devices. Simply embed images like you would with any other image:

<img src="image.jpg" />

This is the simplest possible method of embedding HDR images because it works simply like any other image. However, this method is only compatible with Chrome, Brave, Opera and other Chromium-based browsers (~70% browser market share compatibility as of november 2024, according to StatCounter).

Users with other browsers like Safari or Firefox, or without an HDR compatible screen will see a standard dynamic range instead.