picture标签失效的主因是media、srcset、sizes或type配置错误，导致浏览器静默回退至img兜底图；需确保媒体查询合法、type与响应头一致、sizes存在且正确、src不缺失，并按优先级顺序排列source。
picture 标签本身不“智能”，它只是把选择权交给浏览器——你写对了 media、srcset 和 sizes，浏览器才真正完成匹配；写错一个括号、漏掉 src、type 与响应头不一致，就静默回退到 img 的兜底图。
为什么写了 picture 却始终只加载同一张图
这是最隐蔽的失效点：页面看起来正常，但 Network 面板里全是 fallback 图，说明所有 source 都没被选中。
-
media值不是合法媒体查询：比如写成media="max-width: 768px"（缺括号）或media="small"（非法值），浏览器直接忽略该source -
srcset单独存在但没配media或type：该source不参与匹配，等于白写 - 服务器返回的
Content-Type和type="image/webp"不一致：例如路径是.webp，但服务端返回text/plain，Chrome 会标记为(blocked:mime-type) -
img缺src：区域留空，不是报错，是静默失败
用 media 切断点时，断点必须互斥且语法严格
浏览器从上到下顺序匹配，第一个满足即停。重叠或空隙都会导致高 DPR 设备永远拿不到大图。
- ✅ 正确写法：
media="(max-width: 479px)"→media="(min-width: 480px) and (max-width: 1023px)"→media="(min-width: 1024px)" - ❌ 错误写法：
media="screen and (max-width: 480px)"（冗余）、media="(min-width: 768px)"和media="(min-width: 1024px)"同时存在（1024px 设备命中第一个，跳过第二个） - 移动端优先建议用开区间：
max-width: 479px→min-width: 480px→min-width: 1024px
srcset + sizes 是适配 DPR 更轻量可靠的方案
当不需要换构图、只希望 Retina 屏自动加载双倍图时，比 media 更高效——不触发重排，浏览器在 HTML 解析阶段就能预取。
立即学习“前端免费学习笔记（深入）”；
-
srcset必须用x描述符："photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x"；浏览器按window.devicePixelRatio自动选 -
sizes必须存在且合法：sizes="(max-width: 600px) 100vw, 50vw"；否则浏览器无法估算所需像素宽度，srcset中的w描述符直接失效 - 顺序很重要：把
3x图放在最后，因为浏览器从左到右匹配，遇到第一个满足 DPR 的就停；如果1x放最后，2x设备永远选不到1x - 不要混用
w和x：photo-400w.jpg 400w, photo@2x.jpg 2x是未定义行为，Chrome 可能整个srcset忽略
type 和 media 是 AND 关系，不是 OR
media 控制「何时用这张图」，type 控制「这张图是否能被解码」，两者必须同时满足才启用该 source。
-
media必须是有效媒体查询（如(min-width: 768px)），空值或语法错误会让该source被忽略 -
type必须是 MIME 类型字符串（如image/webp），拼错（如image/webp;多了个分号）或浏览器不支持，就会跳过 - 顺序决定优先级：把最具体、最高优先级的规则放前面；
source按顺序解析，第一个同时满足media和type的即被采用 - 务必保留兜底的
img src：IE、旧版 Safari 和部分低版本 Android WebView 完全不解析srcset，只看src；漏掉整张图就空白
最容易被忽略的是 sizes 必须写在 img 上，source 上写的会被忽略；还有 img 的 alt 是唯一可访问性出口，source 不参与语义传达。
