浏览器加载同一张图是因为匹配逻辑被破坏：media属性位置错误、缺少括号或置于之后均导致失效；必须从宽到窄排序且为强制兜底；适用于构图变化而非单纯分辨率切换。
为什么写了 <source></source> 却总加载同一张图
不是浏览器“不响应”，而是匹配逻辑被破坏了。浏览器对 <source></source> 是线性扫描、遇真即停，根本不会比对全部规则。常见失效点集中在三处：
-
media属性写在<picture></picture>标签上（如<picture media="(max-width:768px)"></picture>）→ 浏览器完全忽略该属性 -
media="(max-width: 768px)"缺少括号（写成media="max-width: 768px"）→ 静默失效，对应<source></source>被跳过 -
<source></source>放在<img alt="HTML代码中picture响应式切图实战" >后面 → 所有<source></source>被忽略，只加载<img src alt="HTML代码中picture响应式切图实战" >
验证方法：打开 DevTools 的 Network 面板，看哪些 srcset 地址实际发起了请求；如果全没发，说明 <source></source> 没被识别。
<source></source> 的顺序为什么必须从宽到窄
浏览器不“计算最优”，只“取第一个匹配”。比如你写：
<source media="(max-width: 767px)" srcset="mobile.jpg"> <source media="(min-width: 768px)" srcset="desktop.jpg">
那么所有宽度 ≤ 767px 的设备永远命中第一条，desktop.jpg 永远不会被加载——哪怕窗口拉到 2000px 宽也一样。
立即学习“前端免费学习笔记（深入）”；
正确顺序应是限制更强的放前面：
-
media="(min-width: 1200px)"（桌面大屏） -
media="(min-width: 768px)"（平板/小桌面） -
media="(max-width: 767px)"（手机）
注意断点不要重叠：(min-width: 768px) 和 (max-width: 768px) 并存时，768px 宽度会命中前者，后者无机会执行。
<img alt="HTML代码中picture响应式切图实战" > 不是可选装饰，而是强制兜底节点
<picture></picture> 本身不渲染任何内容，<img alt="HTML代码中picture响应式切图实战" > 才是最终呈现和可访问性的唯一载体。漏掉或写错会导致空白、404 或屏幕阅读器无法读取。
- 必须写成
<img src="fallback.jpg" alt="描述">，不能自闭合（<img alt="HTML代码中picture响应式切图实战" >或<img alt="HTML代码中picture响应式切图实战" >） -
src必须存在且可访问，否则现代浏览器直接渲染为空白（无报错提示） - 推荐给
<img alt="HTML代码中picture响应式切图实战" >也加srcset和sizes，尤其当 fallback 图需适配 Retina 屏时
如果发现页面图片区域一片空白，先检查 <img alt="HTML代码中picture响应式切图实战" > 是否缺失 src，再查 Network 中 fallback 图是否返回 404。
什么时候该用 <picture></picture>，而不是 srcset + sizes
<picture></picture> 的核心价值不是“换分辨率”，而是“换构图”——也就是 art direction。它解决的是语义级变化，不是像素级优化。
- ✅ 该用
<picture></picture>：桌面端展示全景横图，移动端只裁切人物脸部特写；卡片图在小屏上要突出文字区域，大屏上保留背景留白 - ❌ 别硬套
<picture></picture>：只是同一张图在不同宽度下加载 400w / 800w / 1200w 版本 → 直接用<img srcset="a.jpg 400w, b.jpg 800w" sizes="..." alt="HTML代码中picture响应式切图实战" >更简洁、兼容性更好
真正容易被忽略的一点：服务器若不支持按 Accept 请求头返回不同 MIME 类型（如 image/avif），type="image/avif" 就形同虚设——浏览器不会降级尝试下一个 <source></source>，只会跳过。
