90%的响应式图片场景用srcset+sizes就够了，它更轻量、兼容性更好、预加载更可靠；仅当需艺术方向裁剪（如移动端竖构图、桌面横构图）或格式降级（webp→jpeg）时才必须用。
什么时候该用 srcset + sizes，而不是 <picture></picture>
90% 的响应式图片场景，srcset 配合 sizes 就够了——比如图片在小屏占满宽度、大屏只占 50vw，或者要适配 1x/2x/3x 像素密度。它比 <picture></picture> 更轻量、兼容性更好、浏览器预加载也更可靠。
常见错误现象：srcset 只写了 2x 却没配 sizes，结果大屏设备仍加载了低清图；或 sizes 值和实际 CSS 渲染宽度不一致（比如写成 sizes="100vw"，但图片父容器有 padding/margin），导致选错资源。
-
srcset中的w描述符（如800w）必须和sizes提供的布局宽度一起计算，浏览器才能量化“哪个图最接近所需像素数” - 如果图片宽度固定（如头像、icon），优先用
x描述符：srcset="avatar.jpg, avatar@2x.jpg 2x" - 不要在
srcset里混用w和x，浏览器行为不一致，Chrome 和 Safari 处理逻辑不同
<source></source> 的顺序为什么必须从“最具体”到“最宽泛”
<picture></picture> 不是“匹配所有条件再挑最优”，而是“遇到第一个匹配就停”。顺序错了，高分辨率设备可能永远加载不到高清图。
常见错误现象：把 media="(min-width: 400px)" 放在 media="(min-width: 1200px) and (min-resolution: 2dppx)" 前面，结果 4K 笔记本直接命中前者，跳过后面更精准的规则。
- 高 DPR + 大视口组合（如
media="(min-width: 1200px) and (min-resolution: 2dppx)"）必须放最前 - 格式降级（如 WebP → JPEG）靠
type属性，但不回退：Chrome 支持image/avif就用它，不支持就跳过该<source></source>，不会尝试下一个 -
<img>必须在<picture></picture>内部末尾，且至少带src和alt——这是唯一强制渲染的 fallback 节点，漏掉就白写了
美术裁剪（art direction）才是 <picture></picture> 的核心价值
当你要的不是“同一张图缩放”，而是“小屏用竖构图、桌面用横构图”“打印时用高对比度版本”“暗色模式用深底图”，这时候才真正需要 <picture></picture>。
常见错误现象：用 <picture></picture> 仅为了切分辨率，却放弃 srcset 的预加载优势；或为每种屏幕宽度都写一个 <source></source>，导致 HTML 膨胀、维护困难。
- 每个
<source></source>应对应明确的美术意图，而非机械切分断点 - 移动端竖图建议用
media="(max-width: 768px) and (orientation: portrait)"，避免平板横屏误触 - 不要指望服务端协商（如
Accept请求头）参与选择——<picture></picture>完全由客户端运行时决定
现代框架里别手写 <picture></picture>，优先用内置图片组件
Next.js 的 <image></image>、Nuxt 的 <nuxtimg></nuxtimg>、Remix 的 <img> 都已自动处理 srcset、sizes、格式降级、懒加载和占位逻辑。手写容易漏掉关键细节，比如忘记 decoding="async" 或 fetchpriority="low"。
容易被忽略的地方：即使用了框架组件，也要确认它是否生成了正确的 sizes 值——很多默认配置假设图片占满容器，但如果你的图片被 flex gap 或 grid 挤压，实际宽度会变小，这时得手动传 sizes prop。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
