Skip to content

cmahnke/awesome-browser-hdr

Repository files navigation

Awesome HDR in the Browser Awesome

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

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

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

WebGL

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

Ultra HDR (Adobe Gain Map)

General

libultrahdr

Other

Apple HDR

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.

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

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.