仅在需艺术方向切换、格式降级或断点专属构图时必要；多数相册用即可，更轻量易维护。
直接说结论：用 <picture></picture> 做相册不是为了“每张图都写一堆 <source></source>”，而是按场景分组控制——同一张图在不同断点/设备下换尺寸、换裁剪、换格式，<picture></picture> 才真正有用；盲目套用反而让 HTML 膨胀、维护困难。
什么时候该用 <picture></picture>，而不是只靠 srcset + sizes
相册里多数图片其实只需要分辨率适配（比如小屏加载 400w，大屏加载 1200w），这时单用 <img srcset="..." sizes="..."> 就够了，更轻、更易维护。<picture></picture> 真正该上场的场景只有三个：
- 需要「艺术方向切换」：比如手机端展示人脸特写裁剪图，桌面端展示完整场景图
- 需要「格式优先级」：统一用
type="image/avif"试加载 AVIF，失败则降级 WebP，再失败才 JPEG - 需要「断点专属资源」：平板横屏用一张宽图，竖屏却必须换窄构图图（
media="(orientation: portrait)"）
其他情况硬塞 <picture></picture>，只是把简单问题复杂化。
<source></source> 的 media 顺序写错，整张图就失效
浏览器对 <source></source> 是「从上到下匹配，命中即停」。如果你把小屏规则放最上面，宽屏设备永远看不到后面的规则：
<picture><source media="(max-width: 768px)" srcset="photo-mobile.jpg"><source media="(min-width: 769px)" srcset="photo-desktop.jpg"> @@##@@ </source></source></picture>
这看起来没问题，但实际隐患很大：
- 768px 宽度会命中第一条（
max-width: 768px），桌面规则不触发 - 如果某台设备宽度恰好是 768.5px，而你没写
769px以上全覆盖，它可能 fallback 到<img src="photo-desktop.jpg" alt="相册图片">—— 但你根本收不到报错提示 - 推荐写法是用「从宽到窄」+ 明确覆盖：
media="(min-width: 1200px)"→media="(min-width: 768px)"→media="(max-width: 767px)"
<img> 不是可选的，漏掉或写错会白屏
<img> 是强制 fallback，不是装饰。常见错误包括：
- 只写
<img>，没带src→ 整个区域空白，控制台无警告 - 写成自闭合形式
<img alt="描述">或<img>→ 大部分浏览器忽略，直接不渲染 - 旧版 Safari（16.4 之前）完全依赖
<img>渲染，哪怕<source></source>全部匹配成功，缺src也会白屏 - 建议始终给
<img src>加上srcset和sizes，让它自己也适配 DPR，别只当摆设
AVIF/WebP 格式切换要靠 type，但顺序不能乱
现代相册想减体积，优先推 AVIF，但得确保降级链可靠：
<picture><source srcset="photo.avif" type="image/avif"><source srcset="photo.webp" type="image/webp"> @@##@@ </source></source></picture>
关键点在于：
- 浏览器按
<source></source>顺序检查type，第一个支持的就用，不往后看 - 如果服务器没配对 MIME 类型（比如返回
text/plain），即使写了type="image/avif"，浏览器也会跳过该<source></source> - 别在同一个
<picture></picture>里混用type和media规则——例如<source type="image/avif" media="(min-width: 1200px)"></source>，一旦用户设备支持 AVIF 但宽度不满足，就会跳过所有 AVIF 源，直接 fallback 到 JPG，失去格式优势
最稳的做法是：先按格式分层（AVIF → WebP → JPG），再在每一层内用 media 或 srcset 控制尺寸和 DPR。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
