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" loading="lazy" decoding="async" style="image-rendering: -webkit-optimize-contrast;"> 
    </picture>
</div>

Then add the hdrjpg-js script to the page. It plays the HDR video in place of the picture in the browsers that cannot show the image in HDR, such as Firefox and Safari on a Mac, and leaves the page alone everywhere else:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hdrjpg.min.js" defer></script>

If you're using npm, install the package instead:

npm install hdrjpg-js

And import it in your app:

import 'hdrjpg-js';

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.