Embedding HDR images

JPG Images created with hdrjpg.com 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" />

When embedded like this, images will display in HDR in Chrome, Brave, Opera, and other Chromium-based browsers in HDR displays. When the user does not have an HDR compatible device, a regular standard dynamic range is shown instead.

Q4 2024 recommended embedding method

However, to attain the best possible compatibility, the recommended method uses the <picture> HTML tag with a combination of the JPEG-XT, JPEG-XL and AVIF formats:

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