cmahnke/awesome-browser-hdr

A List of Tools for browser HDR

Awesome HDR in the Browser

A curated list of awesome tools, issues, resources and other awesomeness. Inspired by awesome-python, awesome-bigdata & awesome itself.

Your contributions are always welcome!

The list is about displaying HDR contents in a browser, currently leaning heavily towards images. HDR video might be added later. This is is only a list, it doesn't contain an introduction. A great good starting point on the topic is the HDR page by Greg Benz.

Contents

• Formats
• Tools
• JavaScript libraries
• Ressources

Formats

There are more HDR image formats (like OpenEXR, JPEG XR, JPEG XT), this list only only contains those that are supported by current browsers.

Images

• Ultra HDR
  • Gainmap specification
• AVIF (HDR)
• JPEG XL
• PNG - with HDR support.

Video

Several video formats support HDR videos, sites like YouTube usually support some or all of the above, see also Wikipedia on HDR video / television.

Container formats

These container formats allow the for HDR require metadata.

• MKV
• MOV/QuickTime
• MP4

Codecs

These formats support HDR video content. there are others as well, but those usually have very limited browser support, if at all.

• AV1
• HEVC/H.265
• VP9 Profile 2

3D

WebGPU

• WebGPU Extended Range Brightness

WebGL

• WebGL Extended Range Brightness

Browser support

Since browser change rapidly this list might be outdated soon, currently there is an afford to add this data to CanIUse.

Tools

Currently graphic programs are missing. The focus is (currently) on libraries and command line tools.

AVIF HDR

• Avif HDR diagnostic page

Ultra HDR (Adobe Gain Map)

General

• OpenHDR Viewer (Browser based)

libultrahdr

• libultrahdr on GitHub
• libultrahdr and Python
  • discussion
  • demo - by Albert Zeyer

Other

• Gainmap Creator
• gainmap-js - A JavaScript (TypeScript) Port of Adobe Gainmap Technology for storing HDR Images using an SDR Image + a gainmap.
• libultrahdr-wasm - WASM build of `libultrahdr.
• ultrahdr-js - A Node implementation for UltraHDR.

Apple HDR

• Applying Apple HDR effect to your photos
• AppleJPEGGainMap

Viewer / Desktop browsers

Currently the only Chrome seems to be able to display Ultra HDR images. Since it's based on Chromium, other Browsers using this base will work as well, some might need to be configured accordingly:

• Edge - works.
• Brave - needs configuration - brave://flags/#gainmap-hdr-images.
• Opera - need configuration - opera://flags/#gainmap-hdr-images.
• Vivaldi - need configuration.

Firefox currently only has limited HDR support.

Issues / feature requests for important tools

The first step to foster the adoption of HDR in the browser is to improve tooling. Several projects already have requests to improve support for UltraHDR JPEGs.

• LibVips
• ImageMagick
• Tev
• HDRImageViewer
• ffmpeg
• Python Pillow
• memories
• CanIUse
• libjxl

JavaScript libraries

Note: Some JavaScript libraries are also listed in the tools section.

• gainmap-js - A JavaScript (TypeScript) Port of Adobe Gainmap Technology for storing HDR Images using an SDR Image + a gainmap.
• hdr-canvas - by the author of this list: A JavaScript library for handling HDR in a canvas element and HDR detection.

Ressources

The specifications and technical documentations are linked in the first section on file formats.

Documentation

Examples

• Greg Benz on HDR

Other HDR awesome lists

Mostly outdated / unmaintained

• Awesome-Deep-HDR - A collection of deep learning based methods for HDR image synthesis.
• Awesome-HDR - Collect High Dynamic Range Imaging (especially for Multi-exposure Fusion and High Dynamic Range Imaging) Related Papers and Codes.
• Awesome HDR Deghosting - A curated list of multi-frame HDR deghosting resources.
• awesome-hdr-imaging - A collection of methods for high dynamic range imaging High dynamic range imaging is an important topic on image processing, especially in mobile photography.