只有当需不同构图、格式降级、响应系统偏好或同一断点内独立优化高DPR小图时，才必须用<picture>；否则纯DPR适配用<img srcset>更安全简洁。
直接用 <img> 的 srcset 就够了，<picture> 在纯设备像素比（DPR）适配场景下反而容易出错、增加维护成本。
什么时候非得用 <picture>？
只有当你需要同时满足以下至少一个条件时，才该上 <picture>：
- 不同屏幕宽度下，图片构图必须不同（比如小屏裁竖图、大屏用横图）
- 要按浏览器支持的图片格式分流（如优先
image/avif，降级image/webp，最后image/jpeg） - 需要响应系统偏好，比如
media="(prefers-color-scheme: dark)"切换深色版大图 - 同一断点内还要为高 DPR 设备提供独立优化的小图（如小屏 + 2x →
icon-sm@2x.png，而非拉伸大图）
<source> 的 media 必须带括号且顺序不能错
浏览器从上到下匹配第一个满足条件的 <source>，之后全部跳过。写错括号或顺序，整个逻辑就废了：
- ✅ 正确：
media="(max-width: 767px)"、media="(min-width: 768px) and (max-width: 1200px)" - ❌ 错误：
media="max-width: 767px"（缺括号，静默失效） - ❌ 错误：把
(max-width: 767px)放最上面 → 所有设备都命中它，后面规则永远不会执行 - 推荐顺序：桌面 → 平板 → 手机，用开区间避免重叠，比如
(min-width: 1201px)→(min-width: 768px) and (max-width: 1200px)→(max-width: 767px)
srcset 里别混用 w 和 x，<img> 的 src 不可省
<source> 的 srcset 只负责断点内的候选图，最终 DPR 匹配只发生在末尾的 <img> 标签上：
立即学习“前端免费学习笔记（深入）”；
- 每个
<source>的srcset可以只写路径（如hero-tab.jpg），不带描述符；也可以带x（如hero-tab@2x.jpg 2x），但仅当该<source>被激活后才生效 - 绝对不要在同一个
srcset里混写400w和2x—— 浏览器会直接忽略整条srcset -
<img>的src是硬性要求：IE 等老浏览器、DPR 不匹配、<source>全部未命中时，全靠它兜底；漏掉就会空白 -
<img>的srcset最好也带上，比如srcset="hero@1x.jpg 1x, hero@2x.jpg 2x"，确保 fallback 场景仍有 DPR 适配能力
验证到底加载了哪张图？别只看 Network 面板第一个请求
Network 里第一个图片请求常是预加载或 fallback，真正渲染用的是哪张，得看最终结果：
- 在 Elements 面板中右键图片 → “Open in new tab”，检查 URL 是否含
@2x或-800w - DevTools → Rendering → 勾选 “Emulate CSS media features”，手动设
device-pixel-ratio为 2 或 3，刷新后观察 Network 请求变化 - 控制台执行
window.devicePixelRatio，确认当前环境真实 DPR；模拟器里必须开启 Device Pixel Ratio 设置，光调视口缩放没用 - 如果始终加载
@1x，先查服务器是否返回了正确 MIME 类型（image/png，不是text/plain）和 HTTP 状态码（404 会导致降级）
真正容易被忽略的点是：所有 @2x 图片必须和 @1x 保持完全相同的构图与 CSS 渲染尺寸，仅分辨率不同；否则高倍图会被拉伸或裁剪，失真比模糊更糟。
