本身是调度器，真正提升加载效率依赖正确的 规则配置；它支持格式（type）与尺寸（media）分层决策，比 srcset 更精准，但需确保 兜底、路径正确及服务端 Content-Type 匹配。
<picture></picture> 标签本身不直接“提高加载效率”，它只是调度器；真正起效的是你给它配置的 <source></source> 规则和图片资源质量。浏览器按顺序匹配第一个满足条件的 <source></source>，跳过后续项，最终兜底到 <img>。用错结构或配错条件，反而会多加载、白屏、甚至不显示图片。
为什么 <picture></picture> 有时比 srcset 更高效
当你要同时控制「格式」+「尺寸」+「设备特性」时，<picture></picture> 是唯一能精确分层决策的方式。比如：
-
srcset只能告诉浏览器“不同宽度下选哪个文件”，但无法指定“只在支持 AVIF 的设备上才用 AVIF” -
<picture></picture>允许你先按type筛选格式（AVIF → WebP → JPEG），再按media筛选尺寸（大屏 → 小屏），逻辑更清晰 - 浏览器一旦命中某个
<source></source>，就不会解析后面的——这意味着你把高优先级规则（如现代格式）放在上面，能减少解析开销
<source></source> 的 type 和 media 别混用
这两个属性解决的是完全不同的问题，混在一起会导致条件失效或加载错误资源：
-
type="image/avif"：纯格式探测，浏览器看自己是否支持该 MIME 类型，跟屏幕尺寸无关 -
media="(min-width: 768px)"：纯媒体查询，只管视口宽度，不管格式支不支持 - 常见错误：
<source type="image/webp" media="(min-width: 1200px)" srcset="hero-1200.webp"></source>—— 这样写没问题；但如果你写成<source media="(min-width: 1200px) and (type image/webp)"></source>，语法非法，整个<source></source>会被忽略 - 正确组合方式是：先用
type做格式降级，再用media做尺寸适配，且每个<source></source>只负责一个维度
<img> 不是可选项，而是强制兜底入口
很多人删掉 <img> 或把它写成空标签，结果页面一片空白——因为 <picture></picture> 必须以 <img> 结尾，且这个 <img> 才是实际渲染载体：
-
<img>必须有src（不能只靠data-src），否则浏览器不会尝试加载任何图片 -
alt属性必须写在<img>上，<source></source>不支持alt - 即使你所有
<source></source>都匹配成功，浏览器仍会解析<img>的src，但不会加载它——所以这个src应该指向最小兼容图（如fallback.jpg），体积要小 - 如果想让关键图优先加载，
fetchpriority="high"必须加在<img>上，而不是<source></source>
懒加载与 <picture></picture> 的兼容陷阱
原生 loading="lazy" 对 <picture></picture> 无效——它只作用于 <img> 标签本身。所以懒加载必须落在 <img> 上，且所有 <source></source> 的 srcset 值要提前准备好：
- 错误写法：
<picture><source srcset="large.jpg" media="(min-width:1200px)"><img src="small.jpg" loading="lazy"></source></picture>—— 这样只会懒加载small.jpg，而large.jpg仍会立即请求 - 正确做法：把所有
srcset拆成data-srcset，用 IntersectionObserver 监听<img>进入视口后，再把对应data-srcset赋给srcset，并把data-src赋给src - 更稳妥的方案：放弃
<picture></picture>懒加载，改用<img srcset="..." sizes="..." loading="lazy">，它对现代浏览器兼容性更好，也更容易调试
最易被忽略的一点：<picture></picture> 的性能收益高度依赖构建流程——你得确保 AVIF/WebP 文件真实存在、路径正确、且服务端能返回正确的 Content-Type。否则浏览器看到 type="image/avif" 却收到 text/html，就会静默跳过，直奔下一个 <source></source>，最终可能加载了三倍体积的 JPEG。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
