HDR Images on the Web: Complete Implementation Guide

HDR (High Dynamic Range) displays are now mainstream in phones, laptops, and monitors. This guide covers how to serve HDR images on the web, from format selection to display detection.

Understanding HDR on the Web

What Makes an Image HDR?

Property	SDR	HDR
Dynamic range	~6 stops	10+ stops
Peak brightness	100 nits	400-1000+ nits
Color space	sRGB	Display P3 / Rec. 2020
Bit depth	8-bit	10-bit or higher

HDR Display Adoption

Device Category	HDR Support
iPhone (12+)	HDR, Display P3
MacBook Pro	HDR, Display P3
iPad Pro	HDR, Display P3
High-end Android	HDR10
Most laptops	SDR only

HDR Image Formats

Format	HDR Support	Browser Support
AVIF	Excellent	Chrome, Firefox, Safari
JPEG XL	Excellent	Safari only
WebP	No	Wide
JPEG	No	Universal

AVIF is currently the best choice for HDR on the web.

Detecting HDR Displays

CSS Media Queries

@media (dynamic-range: high) {
  .hero-image {
    background-image: url('hero-hdr.avif');
  }
}

@media (dynamic-range: standard) {
  .hero-image {
    background-image: url('hero-sdr.jpg');
  }
}

@media (color-gamut: p3) {
  .product-image {
    background-image: url('product-p3.avif');
  }
}

JavaScript Detection

function getDisplayCapabilities() {
  return {
    hdr: window.matchMedia('(dynamic-range: high)').matches,
    p3: window.matchMedia('(color-gamut: p3)').matches,
    rec2020: window.matchMedia('(color-gamut: rec2020)').matches
  };
}

const capabilities = getDisplayCapabilities();
if (capabilities.hdr && capabilities.p3) {
  loadHDRImages();
}

Serving HDR Images

Picture Element Approach

<picture>
  <source
    media="(dynamic-range: high)"
    srcset="sunset-hdr.avif"
    type="image/avif"
  >
  <source srcset="sunset-sdr.avif" type="image/avif">
  <source srcset="sunset.webp" type="image/webp">
  <img src="sunset.jpg" alt="Vibrant sunset over mountains">
</picture>

Using Image CDNs

Sirv can serve optimized images automatically:

<img src="https://your-site.sirv.com/photos/sunset.jpg?format=optimal&q=auto">

Performance Considerations

HDR images are typically larger:

Version	Format	Size
SDR	AVIF 65%	95 KB
HDR	AVIF 65%	140 KB

Loading Strategy

const isHDR = window.matchMedia('(dynamic-range: high)').matches;
const imageSrc = isHDR ? '/hero-hdr.avif' : '/hero-sdr.avif';

const link = document.createElement('link');
link.rel = 'preload';
link.as = 'image';
link.href = imageSrc;
document.head.appendChild(link);

Best Practices

1. Always Provide Fallbacks

<picture>
  <source media="(dynamic-range: high)" srcset="hdr.avif" type="image/avif">
  <source srcset="sdr.avif" type="image/avif">
  <img src="fallback.jpg" alt="Description">
</picture>

2. Respect User Preferences

@media (prefers-contrast: high) {
  .hero {
    background-image: url('hero-sdr.jpg');
  }
}

3. Test on Real Devices

Test on iPhone 12+, MacBook Pro with XDR display, and HDR monitors with proper calibration.

Conclusion

HDR on the web is becoming practical:

1. AVIF is the best format for HDR web images today
2. Detect capabilities with CSS media queries and JavaScript
3. Always provide fallbacks for SDR displays
4. Use CDNs like Sirv to simplify delivery
5. Test on real devices - emulation has limitations