<picture>标签专为解决<img>无法处理的三类问题：艺术指导（不同构图）、格式分流（如WebP/AVIF→JPEG）和请求前资源选择，其核心是声明式、顺序匹配、不可逆的资源发现机制。
<img>，而是解决它根本处理不了的三类问题——浏览器在发请求前就得决定“下哪张图”，而不是等图下载完再缩放。
需要不同构图（艺术指导）时必须用 <picture>
比如桌面端展示横幅全景图、平板裁成中景、手机只保留人物特写。这种构图差异无法靠 CSS 缩放或 srcset 实现，因为它们只改尺寸，不换画面主体。
常见错误：把多个 <source> 的 media 写成重叠区间，例如 (max-width: 768px) 和 (min-width: 768px)，导致 768px 宽度时行为不确定；应改为 (max-width: 767px) 和 (min-width: 768px) 避免缝隙。
-
<source>按顺序匹配，第一个满足条件的就加载，后面的被忽略 - 没写
media也没写type的<source>会无条件命中，直接阻断后续所有判断 -
<img>是兜底项，必须存在，且不能省略alt
要按浏览器支持格式分流（如 WebP/AVIF → JPEG）时，<picture> 是唯一原生方案
仅靠 <img srcset="a.webp 2x, a.jpg 2x"> 不行——浏览器不会因格式不支持就跳过 .webp，它仍会尝试请求并失败，造成额外网络开销或降级延迟。
而 <picture> 的 type 属性让浏览器在发起请求前就过滤掉不支持的 MIME 类型。
立即学习“前端免费学习笔记（深入）”；
-
type="image/avif"必须放在type="image/webp"前面，否则 Safari 16.4 之前版本会跳过 AVIF 直接走 WebP - 旧版 Safari 不支持
type属性，但会忽略<source>继续向下执行，最终落到<img>，所以 JPEG 作为兜底是安全的 - 不要把
type和media混在同一<source>里却不测试组合逻辑，例如media="(min-width: 1200px)" type="image/avif"要确认目标设备既满足宽度又支持 AVIF
当 srcset + sizes 已经够用时，别硬套 <picture>
如果只是适配 DPR（1x/2x/3x）或同一构图下的分辨率变化（如 400w/800w/1200w），<img srcset="a.jpg 400w, b.jpg 800w" sizes="100vw"> 更轻量、更易维护，也更利于 CDN 缓存和预加载器识别。
滥用 <picture> 反而增加 HTML 体积、提高解析成本，还可能因 <source> 顺序或属性遗漏导致回退失效。
-
sizes中写calc()不被支持，写(max-width: 600px) 100vw, 50vw才可靠 -
srcset的宽度描述符建议按 1.5× 步进（320w → 480w → 768w → 1200w），比等比缩放更贴合真实设备逻辑像素分布 - 只要没涉及构图切换或格式分流，
<img>就是更优解
<source> 的匹配发生在资源发现阶段（resource discovery），早于 DOM 构建完成。这意味着 JavaScript 无法干预这个选择过程，也无法通过监听 resize 动态修改——它是一次性、声明式、不可逆的决策。写错一个 media 值或漏掉 <img>，结果就是白屏、404 或加载了完全不合适的图。
