HDR Image Browser Support: Chrome, Safari, Edge and Firefox
HDR image support is an end-to-end capability, not a browser name alone. The file, browser build, operating system, GPU path, HDR display mode, power settings, and color management all have to cooperate. If any link tone-maps to SDR, the image will look like normal white.
Why browser support is not a simple chart
A browser can decode a JPEG yet still tone-map its HDR values into SDR. The operating system may disable HDR, the window may be on a non-HDR monitor, battery saver may reduce available headroom, or the graphics pipeline may use a different color-management path.
For that reason, a green checkmark beside a browser name can be misleading. Support should be tested as a matrix of browser, OS, device, display, connection, and power state.
What the dynamic-range media query tells you
CSS exposes the dynamic-range media feature. A match for high means the output device reports high peak brightness, contrast ratio, and color depth.
Glowhite uses that signal only to label the preview. The downloaded file’s embedded profile is verified separately because capability detection and file validation answer different questions.
Why Firefox can look different
If Firefox shows ordinary white while Safari, Chrome, or Edge appears brighter, the most likely explanation is that Firefox or the underlying graphics path is tone-mapping that image to SDR. The file can still contain valid HDR metadata. Browser support and file correctness are separate.
- Confirm the display itself supports HDR and the OS setting is enabled.
- Turn off battery saver or low-power mode.
- Test another current browser on the same screen.
- Open the downloaded file directly rather than a screenshot.
Design for graceful fallback
The right goal is enhancement, not dependency. Text should remain readable, the brand mark should retain contrast, and the image should still make sense when every highlight is mapped back to normal white. HDR becomes a bonus layer for compatible viewers.
Frequently asked questions
Why can Chrome show HDR when Firefox does not?
They may use different image decoding, color-management, GPU, or operating-system rendering paths. One path can preserve HDR while another tone-maps it to SDR.
How does Glowhite check HDR support?
JavaScript reports display capability; Glowhite verifies the embedded profile separately.
Will an SDR user see a broken image?
A well-prepared file should remain readable as an ordinary tone-mapped image, though exact appearance varies by renderer.