picture 标签
<picture> 比 srcset 更强：可以按媒体条件切换“完全不同的图”——窄屏载入竖版裁剪图、宽屏载入横版大图，甚至给不支持 WebP 的浏览器提供 JPG 回退。
写法像 select：source 从上到下匹配，第一个命中的生效，img 是兜底。
- picture 内部可有多个 source + 一个 img
- source 用 media 切换图片，用 type 切换格式（WebP/AVIF）
- 最后的 img 是兜底：宽高、alt、loading 都写在它身上
HTML
<picture> <!-- 不支持 WebP 的浏览器跳过这个 source --> <source type="image/webp" srcset="hero.webp"> <!-- 窄屏用竖版图 --> <source media="(max-width: 600px)" srcset="hero-mobile.jpg"> <!-- 宽屏用横版图 --> <source media="(min-width: 601px)" srcset="hero-wide.jpg"> <img src="hero.jpg" alt="封面图" width="1600" height="900" loading="lazy"> </picture>
本节要点picture = 按媒体/格式切换图片的总开关；img 标签永远兜底，宽高与懒加载写在 img 上。
