picture标签本身不减少下载，真正减少非必要下载靠精准匹配media、精简srcset、配对sizes并杜绝fallback失效；media写错会导致所有source静默失效而只加载fallback图。
picture 标签本身不减少下载，它只提供选择权；真正减少非必要下载，靠的是精准匹配 media、合理精简 srcset、配对 sizes，并杜绝 fallback 失效。
media 写错就等于没写
浏览器按 <source></source> 顺序逐个检查 media 是否满足，第一个命中即用，后续全跳过。写错语法或逻辑重叠，会导致所有 <source></source> 静默失效，最终只加载 <img> 的 fallback 图——你以为切图了，其实一张都没少下。
- 必须加括号：
media="(max-width: 768px)"✅，media="max-width: 768px"❌（缺括号，被忽略） - 断点要互斥：用
(max-width: 479px)→(min-width: 480px) and (max-width: 1023px)→(min-width: 1024px)，避免(min-width: 768px)和(min-width: 1024px)同时存在 - 移动端优先就别写
screen前缀：media="screen and (max-width: 768px)"是冗余且部分浏览器会拒识
srcset 列太多反而拖慢预加载
浏览器在 HTML 解析阶段就会扫描 srcset 列表，对每个候选图做路径解析、尺寸推导、DPR 匹配。哪怕某个 400w 图在你整个 CSS 媒体查询里根本没对应断点，它仍参与计算，浪费 CPU 和网络预连接资源。
- 只保留真实布局断点对应的尺寸：比如你只在
@media (min-width: 768px)和@media (min-width: 1200px)改容器宽度，那srcset就只需768w和1200w两档 - 别混用
w和x：同一<source></source>里写photo.jpg 1x, photo@2x.jpg 2x或photo-400w.jpg 400w, photo-800w.jpg 800w，但不能交叉 - 用 Chrome DevTools → Network → Disable cache 刷几次，看哪些
<source></source>对应的请求压根没发出——那些就是冗余项，直接删
sizes 缺失会让浏览器瞎猜宽度
没有 sizes，浏览器默认按 100vw 计算所需像素宽度，哪怕你的图只占侧边栏 300px 宽，它也可能拉一张 1200w 的图下来。这不是“多下了一张”，而是“本不该下的这张，硬是下了”。
-
sizes必须覆盖全部视口范围：sizes="(max-width: 479px) 100vw, (max-width: 1023px) 50vw, 300px"✅；漏掉max-width: 479px就会让小屏回退到100vw❌ - 值要和实际 CSS 布局一致：如果媒体查询里
.hero-img { width: 100% }在768px下，那sizes就得写(max-width: 768px) 100vw，不能凭空写800px -
<picture></picture>里的<source></source>不支持sizes，只有最内层的<img>支持——所以sizes必须写在<img>上，不是<source></source>
fallback 图失效是最隐蔽的流量黑洞
很多人以为写了 <picture></picture> 就万事大吉，结果 Network 面板里全是 photo.jpg 请求——因为 <img src> 没写，或 type 和响应头不一致，或服务器返回了 text/plain 却声明了 type="image/webp"，Chrome 直接标为 (blocked:mime-type)，然后静默走 <img>，但若 <img> 也没 src，页面就留白。
-
<img>必须存在且带src：它是兜底，不是可选项 - 服务端 Content-Type 必须匹配
type属性：type="image/webp"→ 响应头必须是Content-Type: image/webp - 别把
src写在<source></source>上：<source src="xxx.webp"></source>无效，浏览器只认<img src>
最容易被忽略的一点：图片是否真被跳过，不看控制台报错，而要看 Network 面板里哪些请求根本没发出去；而判断是否该跳过，核心不是“我写了多少”，而是“浏览器根据 media + sizes + srcset 组合，实际能排除掉哪些”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
