Safari 26 adds HDR image support with new CSS controls

Why this matters now

• HDR (High Dynamic Range) images capture a wider dynamic range and increased color gamut compared to SDR (Standard Dynamic Range) images, offering more vivid and realistic visual fidelity.
• Safari 21 introduced HDR video support in 2020. Safari 26 beta extends this to still images on the web, for macOS, iOS, iPadOS, and visionOS.
• The new dynamic-range-limit CSS property lets you control how a mix of SDR and HDR content is presented.

What HDR brings to the web

Wider dynamic range and color gamut

• HDR images can represent brighter highlights and deeper shadows than SDR.
• The expanded color gamut (e.g., Display P3) enables more vibrant colors.

Use cases

• Photography portfolios and galleries
• Visual design mockups and prototypes
• Product showcases where realistic lighting matters
• Immersive storytelling or documentaries

The dynamic-range-limit CSS property

Safari 26 beta adds this property to control how mixed SDR/HDR content is displayed:

/* No limit: HDR content is presented as HDR */
.container {
  dynamic-range-limit: no-limit;
}

/* Standard: convert all HDR to SDR */
.container {
  dynamic-range-limit: standard;
}

| Value | Behavior | When to use | |-------|----------|-------------| | no-limit | HDR presented as HDR (native) | When you want the full HDR experience; user has HDR-capable display | | standard | All HDR converted to SDR | When you want consistent SDR rendering; to prevent HDR from appearing overly bright beside SDR content |

This is particularly useful when:

• Users or third parties provide content, and you want consistency.
• You mix SDR and HDR content and need to prevent visual imbalance.

Practical implementation notes

Embedding HDR images

<!-- HDR image in HTML -->
<img src="photo.hdr" alt="HDR photo">

<!-- HDR image in CSS background -->
.hero {
  background-image: url("hero.hdr");
}

Canvas support

HDR images can also be used in <canvas> elements for programmatic rendering.

Browser support

• Safari 26 beta (macOS, iOS, iPadOS, visionOS)
• Other browsers: Check before using; feature detection recommended.

Decision framework

| Scenario | Recommended dynamic-range-limit | Rationale | |----------|------------------------------|-----------| | Portfolio where HDR is a core feature | no-limit | Showcase HDR capabilities for users with HDR displays | | UGC platform where content quality varies | standard | Ensure consistent presentation regardless of source type | | Mixed content where HDR may dominate SDR | standard | Prevent visual imbalance and maintain controlled brightness |

Practical checklist

• [ ] Create or source HDR images where visual fidelity matters.
• [ ] Test HDR images on Safari 26 beta with an HDR-capable display.
• [ ] Apply dynamic-range-limit where needed for consistent rendering.
• [ ] Verify that SDR content alongside HDR doesn't look washed out or overpowered.
• [ ] Document browser support and fallback strategies for other browsers.
• [ ] Optimize HDR file sizes for the web; HDR files can be large.

What to avoid

• Don't assume all users have HDR displays; degrade gracefully for SDR users.
• Don't use HDR for content where it doesn't add value—bandwidth and file size costs apply.
• Don't forget to test on non-HDR displays to ensure dynamic-range-limit: standard works as expected.
• Don't serve HDR to browsers that don't support it without proper fallbacks or content negotiation.

What this means for users

Users with HDR-capable displays now get web experiences that leverage their hardware for richer, more vibrant visuals. For creators, HDR expands the artistic palette available on the web beyond SDR limitations.

The dynamic-range-limit property gives you control: you can choose to showcase HDR at its best, or ensure a consistent SDR experience when mixing content sources.

Next steps

• Audit your visual assets where HDR could add value.
• Create test HDR images and try them on Safari 26 beta.
• Apply dynamic-range-limit in your CSS where needed.
• Plan fallback strategies for browsers that don't support HDR images.
• Update your design system documentation to cover HDR usage guidelines.