Safari 26 新增 HDR 图像支持与新的 CSS 控制

为何现在重要

• HDR（High Dynamic Range）图像相比 SDR（Standard Dynamic Range）能捕获更宽动态范围和更大色域，提供更鲜艳真实的视觉保真度。
• Safari 21 在 2020 年引入 HDR 视频。Safari 26 beta 将其扩展到 Web 上的静态图像，支持 macOS、iOS、iPadOS 与 visionOS。
• 新的 CSS 属性 dynamic-range-limit 让你控制 SDR 与 HDR 混合内容的呈现方式。

HDR 为 Web 带来什么

更宽的动态范围与色域

• HDR 图像可呈现比 SDR 更亮的亮部与更深的暗部。
• 扩展色域（如 Display P3）带来更鲜艳色彩。

使用场景

• 摄影作品集与画廊
• 设计稿与原型展示
• 对真实光线敏感的产品展示
• 沉浸式叙事或纪录片

dynamic-range-limit CSS 属性

Safari 26 beta 新增此属性用于控制混合 SDR/HDR 的显示：

/* 不限制：HDR 以原生方式呈现 */
.container {
  dynamic-range-limit: no-limit;
}

/* 标准：把所有 HDR 转成 SDR */
.container {
  dynamic-range-limit: standard;
}

| 值 | 行为 | 何时使用 | |----|------|----------| | no-limit | HDR 以 HDR 呈现（原生） | 想要完整 HDR 体验；用户设备支持 HDR | | standard | 全部 HDR 转 SDR | 想要一致 SDR 渲染；防止 HDR 在 SDR 内容旁显得过亮 |

这在使用用户或第三方提供的、质量不一的内容时特别有用。

实现要点

嵌入 HDR 图像

<!-- HDR 在 HTML 中 -->
<img src="photo.hdr" alt="HDR photo">

<!-- HDR 在 CSS 背景中 -->
.hero {
  background-image: url("hero.hdr");
}

Canvas 支持

HDR 图像也可在 <canvas> 元素中使用，用于程序化渲染。

浏览器支持

• Safari 26 beta（macOS、iOS、iPadOS、visionOS）
• 其他浏览器：使用前检查；建议特性探知。

决策框架

| 场景 | 推荐 dynamic-range-limit | 理由 | |-----|------------------------|-----| | 作品集，HDR 为核心特性 | no-limit | 为 HDR 显示设备的用户展示 HDR 能力 | | UGC 平台，内容质量不一 | standard | 确保不管内容来源，呈现一致 | | 混合内容，HDR 可能压制 SDR | standard | 防止视觉失衡，控制亮度一致性 |

实践清单

• [ ] 制作或引入 HDR 图像，视觉保真度对内容重要时考虑。
• [ ] 在 Safari 26 beta 与 HDR 支持显示的设备上测试 HDR 图像。
• [ ] 按需添加 dynamic-range-limit 以确保渲染一致。
• [ ] 验证 SDR 内容不会被 HDR 冲淡或压制。
• [ ] 为其他浏览器记录支持度与兜底策略。
• [ ] 为 Web 优化 HDR 文件大小；HDR 文件体积可能较大。

避免什么

• 不要假定所有用户都有 HDR 显示；对 SDR 用户要优雅降级。
• 不要在 HDR 没实质价值的地方用 HDR；带宽与文件成本会上升。
• 不要忘记在非 HDR 显示上测试，确保 dynamic-range-limit: standard 按预期工作。
• 不要对不支持 HDR 的浏览器提供 HDR 而没有充足兜底或内容协商。

对用户的含义

支持 HDR 的显示器用户，现在可以在 Web 上获得更丰富、更鲜艳的视觉体验。对创作者而言，HDR 扩展了超越 SDR 限制的 Web 艺术表现力。

dynamic-range-limit 属性让你掌控：可以在合适的时候展示 HDR 的最佳效果，或在混合内容来源时确保一致的 SDR 体验。

下一步

• 审计视觉资产，寻找适合 HDR 的内容。
• 创建测试 HDR 图像，并在 Safari 26 beta 上试用。
• 在需要的地方增加 dynamic-range-limit。
• 为不支持 HDR 的浏览器准备兜底策略。
• 更新设计系统文档，列出 HDR 使用指引。