标签不处理色域，仅按type匹配mime类型；色域呈现取决于avif/webp是否内嵌icc配置文件、服务端正确返回content-type，以及浏览器对宽色域解码的支持。
picture 标签本身不处理色域，靠 type 和服务端配合
HTML 的 <picture></picture> 标签不识别色域（P3、Rec.2020 等），它只按 type 属性匹配 MIME 类型，并交给浏览器解码。真正决定是否显示高色域图片的，是：图片文件是否内嵌色彩配置文件（如 ICC Profile）、服务端是否返回正确的 Content-Type、浏览器是否支持该格式的宽色域解码。
目前只有 AVIF 和部分 WebP（带 ICCv4）能可靠携带 P3 色彩空间；JPEG/PNG 即使嵌入了 P3 配置文件，多数浏览器也会降级到 sRGB 渲染。
实操建议：
- 用
convert -profile DisplayP3.icc input.jpg output.avif（ImageMagick）生成带 P3 元数据的 AVIF - 确保服务端对
.avif返回Content-Type: image/avif，错配为image/jpeg或text/plain会导致 Chrome 显示blocked:mime-type - 不要依赖
<meta name="color-scheme" content="dark light">控制色域——它和色彩空间无关
srcset + sizes 必须与真实渲染尺寸对齐，否则色域“有图无感”
即使你用了 P3-AVIF，如果 srcset 加载了错误分辨率的图，比如在 2x 设备上只拉了 800w 图（本应拉 1600w），浏览器会缩放渲染，导致色域信息被插值稀释、边缘发灰。这不是色域失效，而是采样失真。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
常见错误现象：MacBook Pro 上看起来鲜艳，iPad mini 上同一张图偏淡——大概率是 sizes 写成了 "100vw"，但实际 CSS 设了 max-width: 375px，浏览器误判所需物理宽度，选了过小源图。
验证方式：
- DevTools → Network → 刷新并筛选图片请求 → 查看响应头
Content-Length和 URL 中的宽度参数（如?w=1200）是否匹配设备 DPR × CSS 渲染宽度 - 在 Safari 开发者工具中勾选 “Show color gamut overlays”，可直观看到哪些区域触发了 P3 渲染
- 避免混用描述符：
logo.avif 2x, logo-1200.avif 1200w→ 整个srcset被忽略，回退到<img src>
Safari 对 P3-AVIF 的支持有隐藏门槛
iOS / macOS Safari 自 16.4 起支持 AVIF，但默认仅在满足以下全部条件时启用宽色域渲染：
- 图片是 AVIF 格式且含有效 ICC Profile（非空、版本 ≥ 4）
-
<picture></picture>中未设置media属性（或media匹配当前视口） - 页面未启用强制 sRGB 模式（如设置了
<meta name="color-scheme" content="only srgb">，此标签虽非标准，但 Safari 会响应） - 用户系统偏好未禁用“增强对比度”或“降低透明度”（这些辅助功能会关闭 P3 输出）
最容易被忽略的一点：Safari 不会为 <source type="image/avif"></source> 自动 fallback 到 WebP 或 JPEG——如果 AVIF 文件缺失 ICC Profile，它就当普通 AVIF 解码，不报错也不提示，结果就是“图对了，色不对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
