### [picture 的 source 顺序：被匹配规则坑过一次](https://www.huociguo.com/article/1805)

**Published:** 2026-10-02T10:45:37

**Author:** 米了

**Excerpt:** 一次改版顺手把 picture 里几条 source 的顺序调了一下，上线后手机端全在加载桌面大图 📷。流量翻…

一次改版顺手把 picture 里几条 source 的顺序调了一下，上线后手机端全在加载桌面大图 📷。流量翻倍，版面还不对。查完才彻底记住匹配规则，写下来免得再犯。

![胶片相机特写](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-838680.jpeg)

source 的排列顺序决定最终加载哪一张图

## 规则一：自上而下，命中即停

浏览器从上往下逐条评估 source，第一个 media 条件为真的立即生效，后面全部跳过。顺序写反，兜底条件先命中，精心准备的窄屏图就成了摆设 ⚠️。

## 规则二：全不命中才轮到 img

所有 source 的 media 与 type 都不通过时，才回退到内部 img 的 src 或 srcset。img 不是第一选择，是最后一道保险。

## 规则三：评估时机不靠 JS

media 属性只在两个时机评估：元素插入 DOM，以及窗口 resize。用 JS 动态改 media 属性不会触发重新选择，想运行时切换图片只能替换 srcset 或换 DOM。

## 规则四：type 先行过滤

浏览器不支持 source 声明的 type 格式时，整条 source 直接跳过，media 都不再看。所以格式降级链与断点链可以混排，互不干扰 ✅。

## 推荐的排列方式

断点场景按宽屏优先、窄屏兜底书写，与 min-width 从大到小对应；格式场景按 AVIF、WebP、JPEG 排列，越新越靠前。两条链各管各的，顺序思路一致：条件越具体越靠后兜底，越特殊越靠前优先。

**Tags:** media属性, source标签, srcset, 图片回退, 资源选择

**Categories:** HTML5

---