<picture>标签本身不提供图源，兼容性取决于<source type>声明、<img>兜底是否正确及服务器MIME类型；IE、Safari≤13等旧浏览器忽略<source>直接渲染<img>，故<img>必须存在且为完整标签，WebP需放<source>最前并配正确MIME。
picture 标签本身不“提供不同图源”，它只是把选择权交给浏览器；能否兼容主流/非主流浏览器，取决于 <source> 的 type 声明、<img> 的 src 兜底是否写对，以及服务器是否返回正确 MIME 类型。
为什么有些浏览器只加载 fallback 图（比如 IE 或旧版 Safari）
不是代码没写，而是浏览器根本不识别某些特性：
-
<source type="image/webp">在 IE、Android 4.4 WebView、Safari ≤ 13 中被完全忽略 —— 它们连type属性都不解析，直接跳过所有<source> - 旧版 Safari（16.4 之前）不执行
<source>匹配逻辑，只渲染最外层的<img>，所以<img src>必须存在且可用 - 如果
<img>写成自闭合形式（<img />或<img>），IE 和部分老安卓浏览器会渲染为空白 - 服务器返回
Content-Type: text/plain而不是image/webp，Chrome 会标记为blocked:mime-type，直接跳过该<source>
怎么写才能让 WebP 优先、JPEG 自动降级
关键不是堆 <source>，而是顺序 + type + 兜底三者配合：
- 把支持度最高的格式（WebP）放最上面：
<source type="image/webp" srcset="hero-800.webp 800w, hero-1200.webp 1200w" sizes="100vw"> - 紧接着放通用格式（JPEG）：
<source type="image/jpeg" srcset="hero-800.jpg 800w, hero-1200.jpg 1200w" sizes="100vw"> - 最后必须有
<img src="hero-800.jpg" alt="...">—— 这个src是给 IE、老 Safari、不支持type的所有浏览器用的 - 别在
<source>里写sizes：它会被忽略，只有<img>上的sizes生效 - 确保 WebP 文件真实存在，且服务器配置了
image/webpMIME 类型（Nginx/Apache 需显式声明）
怎么兼容黑暗模式 + 旧浏览器双重要求
不能只靠 prefers-color-scheme，得叠加 fallback 层级：
立即学习“前端免费学习笔记（深入）”；
- 先按颜色方案分：
<source media="(prefers-color-scheme: dark)" srcset="logo-dark.png"> - 再按格式降级：
<source type="image/webp" srcset="logo-light.webp"> - 最后兜底：
<source type="image/jpeg" srcset="logo-light.jpg"> - 最外层
<img src="logo-light.jpg" alt="Logo">—— 它是唯一能被 IE 渲染的节点 - 注意顺序：如果把
prefers-color-scheme放最后，IE 和老浏览器会跳过全部<source>，只走<img>，这反而是你想要的结果
最容易被忽略的兼容性细节
不是语法错，而是部署和结构层面的硬伤：
-
<img>必须写成完整标签：<img src="fallback.jpg" alt="...">，不能省略src，也不能自闭合 - 所有
<source>必须放在<img>之前，否则浏览器直接跳过 - media 查询写错括号（如
media="max-width: 768px"少了括号）→ 整个<source>被静默忽略，旧浏览器照样走<img>，但现代浏览器也失效 - WebP 图片用了有损压缩但没开透明通道，而原图有 alpha —— Safari 14+ 会加载失败并静默回退到 JPEG，但用户看不到任何提示
