<picture> 仅是容器，浏览器按顺序匹配 <source> 的 media 并结合 srcset/sizes 选图，不匹配则回退到 <img> 的 src；<img> 不可省略，<source> 必须前置且 media 条件不可重叠；x 描述符仅用于 <img srcset>，w 描述符必须配 sizes，二者不可混用。
picture 标签本身不决定加载哪张图，真正起作用的是 source 或 img 的 srcset + media
很多人以为 <picture> 是“智能选图”的主体，其实它只是个容器。浏览器根本不解析 <picture>，而是按顺序检查每个 <source> 的 media 是否匹配，再结合其 srcset 和（可选的）sizes 做选择；都不匹配才 fallback 到 <img> 的 src。所以写错 <source> 顺序或漏掉 <img>，图片就直接不显示。
-
<source>必须放在<img>前面，否则被忽略 - 多个
<source>的media条件不能重叠且应有明确优先级，比如用(max-width: 768px)、(min-width: 769px)而不是两个都用min-width -
<img>不是可选的——没有它，不支持<picture>的旧浏览器（如 IE）会渲染空白
想按设备像素比（如 Retina 屏）切图，必须用 x 描述符，且只能写在 img[srcset] 里
你不能在 <source> 的 srcset 中混用 2x 和 media，这是无效组合。浏览器会直接跳过该 <source>。正确做法是：把 1x/2x 放在最外层 <img> 的 srcset 中，并确保 <source> 只负责尺寸/格式切换。
- 错误写法：
<source media="(min-width: 768px)" srcset="hero@2x.jpg 2x">→ 浏览器无视 - 正确写法：
<img src="hero@1x.jpg" srcset="hero@1x.jpg 1x, hero@2x.jpg 2x" alt="..."> - 如果同时要适配像素密度和视口宽度，
<img>的srcset必须用w描述符 +sizes，x描述符此时失效
用 w 描述符时，sizes 属性不是可选的，缺了它浏览器就按 100vw 算，常导致加载过大图
当你在 srcset 里写 hero-400w.jpg 400w, hero-800w.jpg 800w，浏览器需要知道“这张图在页面中实际占多宽”，才能选最接近的候选。这个信息来自 sizes（对 <img>）或由 <source> 的 media 隐式限定（对 <source>）。没配 sizes 的 <img srcset>，浏览器默认按视口全宽（100vw）算，哪怕它只显示为 300px 宽，也会倾向加载 1200w 甚至更大的图。
- 移动端常见坑：
<img srcset="a-320w.jpg 320w, a-640w.jpg 640w" src="a-320w.jpg">→ 没sizes，小屏也常加载 640w - 修复方式：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 400px" - 注意空格：
srcset中地址与描述符之间只能有一个空格，"a.jpg 320w"（两个空格）会导致整个值被丢弃
pixel density 切图和 responsive width 切图不能混在同一 srcset 里
一个 srcset 只能用一种描述符：要么全是 w（配合 sizes 或 media），要么全是 x（仅用于 <img>）。混用会令整个属性失效。如果你既要适配不同屏幕宽度，又要适配不同像素密度，得靠组合策略：用 <source> 分宽度区间，每个 <source> 内部用 srcset 提供 1x/2x，但注意——这只有在 WebP/JPEG 格式降级等场景下才真正可行；主流做法仍是用 w + sizes，让浏览器根据 DPR 自动缩放选图。
立即学习“前端免费学习笔记（深入）”；
- 合法：
<source media="(max-width: 480px)" srcset="a-400.jpg 1x, a-800.jpg 2x" type="image/jpeg"> - 非法：
srcset="a-400.jpg 400w, a-800.jpg 2x"→ 整个值被忽略 - 更稳妥的实践：放弃
x，统一用w+sizes，现代浏览器会基于 DPR 自动选取更高倍率的w图（比如 DPR=2 时，320w 图会被当成 640px 渲染，浏览器自然倾向选 640w 候选）
sizes 的动态性——它写死在 HTML 里，但图片实际渲染宽度可能受 CSS flex/grid、max-width、aspect-ratio 影响。这时候光靠 sizes 不够，得配合 container queries 或 JS 补充，不过那是另一层问题了。 
