结论：90%的banner场景应优先用而非；仅当构图需变化（如手机裁人脸、桌面展全景）时才值得用，否则易出错且不必要。
直接说结论：用 <picture></picture> 搭响应式 banner 不是“快速”活，它只在构图必须变化时才值得上——比如手机裁人脸、桌面展全景。90% 的 banner 场景，用 <img srcset="" sizes=""> 更快、更稳、更少出错。
为什么写了 却只加载一张图
这不是 bug，是浏览器按规则执行：从上到下扫描 <source></source>，匹配第一个就停，其余全忽略。
-
media="(max-width: 768px)"写成media="max-width: 768px"（缺括号）→ 整个<source></source>静默失效 -
<source></source>放在<img>后面 → 浏览器跳过，直接 fallback 到<img src> - 所有
media都不满足（比如写成(min-width: 1200px)但你在 1000px 宽度测试）→ 没报错，默默加载<img src> -
media="(max-width: 480px)"放最前，media="(min-width: 768px)"放后面 → 小屏永远卡第一条，宽屏规则根本没机会触发
media 顺序必须从宽到窄，且避免边界重叠
浏览器不“计算最优”，只“找第一个 true”。顺序错了，高 DPR 设备可能加载低清图，小屏反而拉伸模糊图。
- ✅ 推荐顺序：
media="(min-width: 1200px)"→media="(min-width: 768px)"→media="(max-width: 767px)" - ❌ 危险写法：
media="(max-width: 768px)"和media="(min-width: 768px)"并存 → 768px 宽度会命中前者，后者永不执行 - ⚠️ 所有
<source></source>的srcset应指向语义等价但构图不同的图，不是同一张图缩放出来的——否则移动端裁掉关键信息，用户看不懂
![]()
不是可选的，漏了或写错就白屏
<img> 是强制 fallback，不是装饰。旧版 Safari（16.4 之前）甚至完全靠它渲染。
- 必须写成
<img src="fallback.jpg" alt="Banner 描述">，<img>或<img>无效 - 漏掉
src→ 整个区域空白；漏掉alt→ 无障碍失败，SEO 受损 - 推荐给
<img>也加sizes和srcset，尤其当它作为 fallback 还要适配 Retina 屏时 - 服务器必须返回正确的 MIME 类型（如
image/webp），否则type="image/webp"的<source></source>会被跳过
真正该用 的 banner 场景其实很少
如果你只是想让 banner 在不同屏幕显示清晰些，或者随视口缩放，<img srcset="" sizes=""> 就够了。它由浏览器自动算尺寸，兼容性更好，代码更轻。
- ✅ 适合
<picture></picture>：手机端裁切产品局部特写，桌面端展示完整包装盒；横幅文案在小屏需重排版，导致图像焦点必须偏移 - ❌ 不该硬套
<picture></picture>：同一张 banner 图，只换分辨率（如 1x/2x）、只换宽度（如 400w/800w）——用srcset + sizes更安全 - ⚠️ 最容易被忽略的一点：所有
<source></source>和<img>的宽高比必须一致。否则用object-fit: cover强撑，会导致人脸变形或文字被裁
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
