的 srcset + sizes 是正确解法，因其专为响应渲染宽度设计：sizes 告知浏览器图片实际布局宽度，srcset 提供对应固有宽度（w）的图源，浏览器据此匹配最适资源；混用 x/w、缺失 sizes 或 sizes 与 css 布局不一致均会导致选图失效。
用 <img> 的 srcset + sizes 就够了，<picture></picture> 在这种场景下反而多余、易出错。
为什么 srcset + sizes 是正确解法
你想要的是“图片按外层容器宽度自动选图”，这本质是**响应渲染宽度**，不是按设备类型或格式切换。浏览器需要知道两件事：这张图在页面里大概占多宽（sizes），以及你准备了哪些固有宽度的图源（srcset 中带 w 描述符）。它会拿渲染宽度 × DPR，去匹配最接近的 w 值。
常见错误是误以为 srcset="a.jpg 1x, b.jpg 2x" 能响应宽度——它只响应像素密度，和容器宽毫无关系。
-
srcset必须用w单位（如"img-400w.jpg 400w, img-800w.jpg 800w"），不能混x -
sizes必须存在，且单位不能省（"50vw"✅，"50"❌） - 如果外层容器用了
max-width: 600px，但sizes写成"100vw"，浏览器就会按视口宽度（比如 1440px）去选图，直接加载 1200w 甚至更大图
sizes 怎么写才不翻车
sizes 不是 CSS，它是给浏览器看的“提示语”，告诉它：“这张图在当前断点下，CSS 渲染出来的宽度大概是多少”。它必须和真实布局一致，否则选图就偏。
- 如果图片父容器是
width: 100%; max-width: 768px;，那么sizes="(min-width: 769px) 768px, 100vw"更准，而不是笼统写"100vw" - 用 CSS Grid 或 Flex 布局时，如果图片占 3 列（每列
1fr），且容器有gap，sizes得估算净宽，比如"calc(33.33vw - 12px)"（需实测） - 写了
media查询但没覆盖到当前宽度？浏览器会 fallback 到100vw—— 这就是为什么小屏加载了桌面大图
检查是否真生效的硬办法
别信“看起来没问题”，打开 DevTools → Network 面板 → 刷新（禁用缓存）→ 找对应图片请求 → 看 Request Headers 里有没有 Sec-CH-DPR 或 Width。没有，说明浏览器压根没走响应式逻辑，还在用 src 或 fallback。
- 路径 404 不报错，只会静默 fallback 到
src；确认所有srcset中的 URL 都能直连访问 - 用
srcset时漏了alt？部分旧版 Safari 可能不触发加载 - 如果图片实际渲染高度被 CSS 压缩（比如
height: 200px），但宽高比和 srcset 图源不一致，会出现拉伸或留白 —— 所有图源保持相同宽高比是最稳妥的
真正难的不是写对语法，而是把 sizes 的值和真实 CSS 布局严丝合缝地对上。很多人调了三天发现还是加载大图，最后发现只是 sizes="(max-width: 768px) 100vw" 漏了个逗号，浏览器直接当无效值处理，回退到了默认 100vw。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
