<picture>不提升性能，写错就拖慢加载；media属性括号缺失会导致整条<source>被静默忽略而回退到<img src>，type与Content-Type不一致、sizes缺失或单位错误、srcset混用w/x描述符均会引发加载失败或失真。
<picture> 不提升性能，写错就拖慢加载——它只是把选择权交给浏览器，而浏览器只在你所有条件都合法时才敢跳过兜底图。
media 属性括号缺失导致全部回退
浏览器对 media 值校验极严：写成 media="max-width: 768px" ❌，必须是 media="(max-width: 768px)" ✅。缺一对括号，整条 <source> 被静默忽略，不报错、不警告，只走 <img src>。
常见错误场景：
- 复制粘贴 CSS 媒体查询时漏掉外层括号
- 用 JS 动态拼接
media字符串却忘了加括号 - 断点重叠，如
(max-width: 768px)和(min-width: 768px)同时存在，768px 宽度下行为未定义，Chrome 可能跳过全部
实操建议：移动端优先用开区间写法 —— max-width: 479px → min-width: 480px → min-width: 1024px，确保互斥、可预测。
立即学习“前端免费学习笔记（深入）”；
type 与服务器 Content-Type 不一致
type="image/webp" 写得再准也没用，如果 Nginx 或 CDN 返回的响应头是 Content-Type: text/plain 或 image/jpeg（注意大小写、拼写、空格），Chrome 会在 Network 面板标为 blocked:mime-type，直接跳过该 <source>。
验证方法：
- 打开 DevTools → Network → 点击对应图片请求 → 查看 Response Headers 中的
Content-Type - 确保和
type属性值完全一致：image/webp✅，webp❌，image/WebP❌ - WebP + JPEG 双格式回退时，每个
<source>的type必须严格匹配其srcset中所有图片的真实格式
sizes 属性缺失或单位错误
没有 sizes，浏览器默认按 100vw 计算所需图像宽度 —— 即使你的图在 CSS 中只占 300px 宽，它也可能拉一张 1920w 的图下来，浪费带宽且延长首屏时间。
sizes 必须是媒体条件 + 宽度单位组合：
- ✅ 正确：
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" - ❌ 错误：
sizes="100%"、sizes="300px"、sizes="(min-width: 768px) 50%"（百分比在 sizes 中无效） - 要真实反映 CSS 布局：grid 中三列等分 → 大屏下图宽 ≈
33vw；全宽轮播图 →100vw
调试技巧：在 Elements 面板中查看目标 <img> 的 computed width，再反推 sizes 值。
srcset 混用 w 和 x 描述符
同一 srcset 中混写 photo-400w.jpg 400w, photo@2x.jpg 2x 是未定义行为。Safari 可能整条忽略，Chrome 表现不一，结果就是 Retina 屏仍加载低清图。
正确做法分两路：
- 按视口宽度选图（构图变化）：只用
w描述符 +sizes+media - 按设备像素比（DPR）选图（仅分辨率升级）：只用
x描述符，sizes仍需存在（用于预取估算） -
x图顺序很重要：把3x放最后，浏览器从左到右匹配，遇到第一个满足 DPR 的即停；1x在前更稳妥
真正容易被忽略的是：<img> 的 src 必须可用——它是 DPR=1 时的保底，也是老浏览器唯一入口；漏掉或路径 404，页面就留白。
