是为条件化选择最适图片而设计的语义化结构，必须用于切换不同资源（如横/竖图、webp→jpeg）或不同裁剪构图；仅缩放时用 即可。
<picture></picture> 不是拿来“快速写”的替代品，它是为解决特定问题而设计的语义化结构：**让浏览器按条件选一张最合适的图片加载**。直接用 <img> 更快，但如果你真需要响应式图片、艺术指导（art direction）或格式降级（比如 WebP → JPEG），那 <picture></picture> 就绕不开。
什么时候必须用 <picture></picture> 而不是 <img>
核心判断点就两个：
- 是否要根据屏幕宽度、像素密度或支持格式，**切换完全不同的图片资源**（比如横图切竖图、WebP 降级为 PNG）
- 是否要对同一张图做**不同裁剪/构图**（例如桌面端展示全景，移动端只取人脸区域）
如果只是缩放尺寸或加个 srcset + sizes，用 <img> 就够了——<picture></picture> 在这种场景下纯属冗余，还可能因误写导致 fallback 失效。
<source></source> 的 media 和 type 别混用
<source></source> 的匹配逻辑是「从上到下第一个满足条件的生效」，且 media（媒体查询）和 type（MIME 类型）互斥：
-
media匹配失败 → 跳过该<source></source>，继续看下一个 -
type不被浏览器支持 → 同样跳过，不报错也不 fallback 到<img>标签内容 - 如果所有
<source></source>都不匹配或不支持，才退回到内部的<img>标签
常见错误：<source media="(min-width: 768px)" type="image/webp" srcset="hero-webp.jpg"></source> —— 这里 type 和 media 同时存在，但浏览器只认 type 是否支持，media 被忽略。想兼顾？得拆成两个 <source></source>。
最小可用 <picture></picture> 模板（带 fallback）
下面这个结构能跑通、可验证、不踩坑：
<picture><source media="(max-width: 767px)" srcset="mobile.jpg"><source type="image/webp" srcset="desktop.webp"> @@##@@ </source></source></picture>
说明：
- 第一行
<source></source>专供小屏设备（max-width: 767px），无论格式是否支持都用它 - 第二行只在支持 WebP 的浏览器中生效，且仅用于桌面断点（没写
media，所以默认兜底所有未被上面捕获的场景） - 最后一行
<img src="desktop.jpg" alt="描述文字">是强制 fallback：只要前面都没命中，就加载它；同时它也承担alt和可访问性职责
注意：<img> 必须存在且是 <picture></picture> 的最后一个子元素，否则整个结构无效。
srcset 和 sizes 在 <picture></picture> 里怎么配
在 <source></source> 中用 srcset + sizes，和在 <img> 中用法一致，但作用域仅限于该 <source></source>：
<source media="(min-width: 1024px)" srcset="large-1x.jpg 1x, large-2x.jpg 2x" sizes="(max-width: 1200px) 100vw, 1200px"></source>
关键点：
-
sizes描述的是「这张图在对应media条件下，最终会占据多宽的视口空间」，不是图片原始尺寸 - 浏览器先根据
media判断是否启用这个<source></source>，再用它的sizes+srcset算出加载哪张分辨率版本 - 别在同一个
<source></source>里既写media又写type，容易逻辑混乱
真正容易被忽略的细节是：<picture></picture> 本身不提供任何样式或布局能力，所有宽高控制、响应式行为仍得靠 CSS 或 <img> 上的属性来实现。它只管“选图”，不管“怎么画”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
