精简 picture 标签的关键是按需选用 media/srcset/sizes/type 属性：仅格式降级时只用 srcset+type；仅设备像素比适配时直接用 img+srcset+x；仅艺术指导时用 media+srcset（无描述符），且必须保留非空 img 作为 fallback。
只做格式降级时，删掉所有 media 和 sizes
如果你只是想优先用 WebP，不支持就退到 JPG，根本不需要断点或分辨率适配：<source></source> 只需 srcset 和 type，<img> 只需 src 和 alt。
-
media属性完全不用写——浏览器按<source></source>顺序检查type是否支持，第一个能用的就加载，后面的跳过 -
sizes必须写在<img>上，但此时没意义：你没用srcset的w或x描述符，sizes就不会参与选择逻辑 - 错误写法：
<source media="(min-width: 0)" type="image/webp" srcset="hero.webp"></source>——media是多余负担，还可能因语法错（比如漏括号）导致整条<source></source>被跳过
只做设备像素比适配时，别用 picture，直接用 img
纯 1x/2x/3x 切换，<picture></picture> 是过度设计。浏览器原生支持 srcset 中的 x 描述符，且更轻量、容错更强。
- 正确做法：
<img src="icon.png" srcset="icon@2x.png 2x, icon@3x.png 3x" alt="logo"> - 用
<picture></picture>实现同样效果反而多出三行代码、多个闭合标签，还容易因<source></source>顺序或media写错导致 2x 图完全不加载 - 特别注意：
srcset里不能混用w和x，比如"icon-400w.png 400w, icon@2x.png 2x"会让整个值被 Chrome 忽略
只做艺术指导（不同构图）时，去掉 srcset 中的 x/w 描述符
当你为手机、平板、桌面各准备了一张裁好的图（如 hero-mobile.jpg、hero-tablet.jpg、hero-desktop.jpg），srcset 里只需一个路径，不需要写 1x 或 800w。
-
<source media="(max-width: 767px)" srcset="hero-mobile.jpg"></source>✅ 简洁有效 -
<source media="(max-width: 767px)" srcset="hero-mobile.jpg 1x, hero-mobile@2x.jpg 2x"></source>❌ 多余：你已经用media锁定了小屏，再加2x是叠加控制，但此时高倍图应由该构图自身的 @2x 版本承担，而非靠srcset动态选——否则容易在小屏 2x 设备上加载错图（比如加载了桌面构图的 @2x） - 务必保证每个
<source></source>的media断点互斥、从宽到窄排列，否则浏览器线性扫描时会卡在第一条就停
<img> 不是装饰，而是强制 fallback。哪怕你写了十个 <source></source>，只要漏掉 <img src="...">，或者 src 是空字符串、404 路径，整个区域就会空白——尤其在 Safari 或旧版 iOS 上，连错误提示都不会有。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
