IE和旧Android WebView忽略<picture>只渲染内部<img>，若<img src>缺失或404则显示空白；现代浏览器按顺序匹配<source>，首个满足条件者加载。
IE 和旧 Android WebView 会直接忽略 <picture>，只渲染内部的 <img>；只要 <img src> 存在且可访问，就能保底显示。其他现代浏览器按顺序匹配 <source>，第一个满足条件的就加载，后面全跳过。
为什么 IE 显示空白或 alt 文本
根本原因不是 <picture> 写错了，而是 <img> 缺了 src 或指向了 404 路径、带查询参数的动态地址（如 ?format=webp）。
-
<img>的src是强制必需项，不是可选兜底——没有它，整个<picture>在不支持环境下就是空的 - IE 完全不解析
<picture>标签，只会把里面的内容当普通 HTML 渲染；若<img>外还包了<div>或写了display: none，DOM 可能错乱导致不可见 - 旧版 Android WebView（如 4.4.x）对
<picture>解析不稳定，有时会跳过所有<source>又忽略<img>，结果白屏——此时必须确保<img src>是静态、直连、无重定向的 JPEG/PNG 地址
media 查询顺序写反了，高 DPR 设备却加载低清图
浏览器是“短路匹配”：从上到下扫描 <source>，遇到第一个 media 为真就停，不会继续判断分辨率或格式。
- 错误写法：
<source media="(max-width: 768px)" ...>放最前 → 所有手机都卡在这条，哪怕 DPR=3 也只加载 1x 图 - 正确写法：把限制更强的条件放前面，比如
media="(min-width: 1200px) and (min-resolution: 2dppx)"，再往下是宽屏普通 DPR、窄屏高 DPR、最后窄屏普通 DPR -
<source>里写2x描述符无效——DPR 适配必须交给最外层<img>的srcset，且要配sizes（如果用了w）或明确写1x/2x
WebP/AVIF 加载失败，但控制台没报错
浏览器根本没发请求，是因为 type 声明和服务器返回的 Content-Type 不一致，直接跳过了该 <source>。
立即学习“前端免费学习笔记（深入）”；
-
type="webp"或type="image.webp"都错，必须是type="image/webp"（image/前缀 + 正确斜杠） - Nginx 需显式配置
types { image/webp webp; }，否则返回text/plain或空Content-Type - CDN 若未透传
Accept: image/webp请求头，后端无法协商格式，统一返回 JPEG，导致<source type="image/webp">永远不命中 - DevTools Network 面板里看到状态是
blocked:mime-type或406 Not Acceptable，基本锁定服务端 MIME 配置问题
为什么写了 srcset 还是只加载一张图
常见于混用描述符或漏掉关键属性——<source> 的 srcset 只配合 media 生效，不参与 DPR 计算；而 <img> 的 srcset 若没配 sizes（用了 w）或没写 src，浏览器会退化为只加载 src。
-
<source srcset="a.jpg 400w, b.jpg 800w">必须配media，否则被忽略（规范要求<source>至少含srcset或type，但没media就无法触发条件匹配） -
<img srcset="a.jpg 1x, b.jpg 2x">必须带src，否则 DPR=1 时无 fallback，可能白屏 - 同一
srcset中混用400w和2x，整个值被解析为无效，浏览器直接忽略该属性
最容易被忽略的是：所有格式图片（AVIF/WebP/JPEG）必须尺寸一致、构图一致。否则响应式切换时，<img> 的宽高比突变，造成拉伸、裁剪偏移或布局抖动——这不是兼容性问题，是视觉一致性失控。
