<picture>标签不能启用HDR显示，它仅根据条件选择合适图片源；HDR生效需同时满足浏览器支持HDR输出、设备开启HDR模式、图片含真实HDR元数据。
<picture> 标签本身不处理 HDR 图像的解码或渲染逻辑，它只负责根据条件选择最合适的 <source> 候选图片。HDR 显示效果是否生效，取决于浏览器是否支持 HDR 输出、目标设备是否具备 HDR 能力，以及你提供的图片格式是否真正包含 HDR 元数据。
为什么 <picture> 无法“启用”HDR 显示
常见误解是把 <picture> 当作 HDR 开关——实际上它只是资源分发器。即使你写了 <source type="image/avif" srcset="hdr.avif">，如果：
• 浏览器（如 Chrome 125+）未开启 HDR 渲染通道
• 系统未启用 HDR 模式（Windows 设置中关闭 / macOS 显示设置未设为“高动态范围”）
• hdr.avif 文件本身只是 SDR 编码的 AVIF（无 PQ 或 HLG 传输特性）
那么最终仍以 SDR 方式显示，<picture> 完全无感知。
真正起作用的三个关键点
要让 HDR 图像在 <picture> 流程中被正确选用并呈现，必须同时满足：
- 图片源必须是真 HDR 格式：目前仅
image/avif（含 PQ 曲线）和image/webp（Chrome 127+ 实验性支持 HLG）能携带 HDR 元数据；JPEG-XR 和 HEIC 不被主流浏览器支持 - 使用
media属性做设备能力探测：不能只靠srcset的分辨率匹配，应结合(dynamic-range: high)媒体查询（Chrome/Firefox 已支持，Safari 尚未） - 避免 fallback 降级破坏 HDR 链路：若
<img>的src指向一张 JPEG，即使前面<source>匹配了 HDR AVIF，当媒体查询失效时，仍会加载 SDR fallback，导致 HDR 丢失
实际可用的最小可行写法
以下代码在 Chrome 128 + Windows HDR 开启状态下可触发 HDR 渲染：
立即学习“前端免费学习笔记（深入）”；
<picture>
<source
media="(dynamic-range: high)"
type="image/avif"
srcset="sunrise-hdr.avif"
sizes="100vw">
<source
type="image/webp"
srcset="sunrise-sdr.webp">
<img src="sunrise-fallback.jpg" alt="Sunrise">
</picture>
注意：
• sunrise-hdr.avif 必须用 libavif 编码时显式指定 --color-primaries=9 --transfer-characteristics=16 --matrix-coefficients=9（对应 BT.2020 + PQ）
• Safari 目前忽略 (dynamic-range: high)，所以对苹果用户，HDR 仍不可用——这不是 <picture> 的问题，而是平台限制
最易被忽略的一点：开发阶段用 chrome://flags/#enable-hdr-output 手动开启 HDR 渲染开关，否则本地调试永远看不到效果。
