picture标签的性能价值在于请求前决策，避免下载不匹配的图片，从而减少流量和首屏延迟；错误使用反而增加开销。
picture 标签本身不提升性能，但能避免浏览器下载不该下的图——这才是它真正的性能价值。
为什么 picture 能减少流量和首屏延迟
关键在「请求前决策」：浏览器解析 <picture></picture> 时，会按顺序检查每个 <source></source> 的 media 和 type，一旦匹配就立即发起请求，跳过后续所有 <source></source>。这意味着：
- 小屏设备不会拉取 2000w 宽的桌面图，哪怕 CSS 把它缩成 100px 宽
- 支持
image/avif的新浏览器直接加载 AVIF，旧版 Safari 遇到不支持的type就跳过该<source></source>，继续往下找 - 没有 JS 干预、没有重绘重排、没有 onload 后替换的闪烁
常见错误导致性能反降
写错顺序或漏条件，反而让浏览器多下图、甚至下错图：
-
<source type="image/webp"></source>放在<source type="image/jpeg"></source>后面 → Safari 16.6 之前会忽略 WebP，直接走 JPEG，白准备 -
media="(max-width: 768px)"和media="(min-width: 768px)"在 768px 视口时行为不一致，部分浏览器两个都匹配，实际取第一个；建议用(max-width: 767px)/(min-width: 768px)明确分界 - 加了
<source></source>却没写media或type→ 该<source></source>无条件命中，后面所有条件失效 - 在
<source></source>里滥用sizes（<source></source>不支持sizes，只<img>和srcset中的宽度描述符起作用）
picture 不如 img 快的两种情况
不是所有图都值得套 <picture></picture>，强行上反而增加 HTML 体积和解析开销：
- 仅适配 DPR（比如
logo.png+logo@2x.png）→ 直接用<img srcset="logo.png 1x, logo@2x.png 2x">更轻量 - 同一构图、仅需不同宽度（如 banner 图始终居中裁剪）→
srcset+sizes已足够，<picture></picture>多一层 DOM 和匹配逻辑
真正省流量的地方，从来不在“怎么缩”，而在“根本不下”。<picture></picture> 的性能优势只在你明确需要控制「下哪张」而非「怎么显示」时才成立；否则，它只是多写了几个标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
