该用 w 单位配合 sizes 属性，而非 x；w 匹配图片实际渲染宽度，sizes 声明各断点下图片真实占用宽度，二者协同才能让浏览器精准选图，x 在现代布局中极易失效且不可控。
srcset 里该用 w 还是 x？关键看你要控制什么
用 w 是为了匹配图片在页面中实际渲染的宽度，用 x 是为了匹配设备像素比（DPR），但后者只在没写 sizes 时才生效。现代响应式布局中，图片宽度由 CSS 决定，x 描述符极易失效——比如你写了 srcset="logo-2x.png 2x" 却没配 sizes，浏览器就默认按 100vw 计算，小屏也加载 2x 图，纯属浪费。
真正可控的做法是：所有 srcset 条目都用 w 单位（如 img-400.jpg 400w），再配合 sizes 告诉浏览器“这张图在当前断点下会占多宽”。这样浏览器才能基于真实布局宽度选图，而不是靠猜设备类型。
- 混用
400w, logo-2x.png 2x→ 整个srcset被忽略，回退到src -
srcset只有2x没sizes→ 高清屏不一定加载高分图，尤其在 flex/grid 容器里 - 提供图片时，固有宽度（
w值）必须和文件实际像素宽一致，否则匹配逻辑错乱
sizes 属性不是可选项，而是计算依据
sizes 不是“建议”，它是浏览器决定加载哪张图的唯一输入。它声明的是“这张图在当前视口下会渲染多宽”，单位必须是 vw、px 等合法长度，不能是 % 或 rem。写错或漏单位（比如 sizes="50" 而非 sizes="50vw"）会导致解析失败，控制台报 Failed to parse 'srcset' value，整套机制瘫痪。
常见写法：sizes="(max-width: 768px) 100vw, 50vw" 表示：≤768px 时占满视口，>768px 时占视口一半。但如果实际 CSS 把图片设为 width: 300px，而 sizes 还写 100vw，浏览器就会去选 1200w 图——哪怕你根本用不上。
立即学习“前端免费学习笔记（深入）”；
- 必须和 CSS 布局真实一致，不能凭感觉写
- 兜底值建议显式写出，如
(max-width: 768px) 100vw, 50vw（现代浏览器支持），旧版 Safari 13.1 前需补(min-width: 769px) 50vw, 50vw - 如果父容器用
flex或grid控制宽度，sizes必须反映该容器最终计算出的宽度，而非原始 CSS 声明
src 是 fallback，不是摆设
src 属性必须存在，且应指向一个体积适中、清晰度够用的版本（比如 768w 或 800w）。IE、旧版 Safari、部分 Android WebView 完全不支持 srcset，此时只有 src 生效；某些低版本 WebView 会静默丢弃整个 srcset，src 是唯一兜底。
别把 src 设成最小图（如 320w），否则老设备用户看到的就是模糊图；也别设成最大图（如 1920w），否则不支持 srcset 的浏览器直接卡顿，且无降级缓冲。
-
src应是「可用性优先」的中间档，兼顾体积与清晰度 - 它不参与响应式选择逻辑，仅作降级使用
- 即使你用了
<picture>，<img>的src仍需存在，否则语义和可访问性受损
验证是否真生效，只看 Network 面板请求
别信“看起来清晰”，也别靠模拟器缩放判断。真正在意的是浏览器到底发了哪个请求：打开 DevTools → Network → 过滤 img → 勾选 Disable cache（Chrome）或关闭缓存（Safari）→ 切换设备预设或拖动视口宽度 → 刷新页面，看加载的是 hero-400w.jpg 还是 hero-1200w.jpg。
右键请求 → Copy response headers → 对照 Content-Length 确认没被缓存干扰。如果始终只加载 src 指向的图，优先检查控制台错误和 sizes 单位是否遗漏。
- 一旦发现加载错图，先查
sizes是否与 CSS 实际渲染宽度一致 - 再确认
srcset中每个w值是否对应图片真实固有宽度 - 最后验证
src是否真的能被老浏览器安全加载
sizes 的值必须严格跟随 CSS 布局的运行时结果，而不是开发时写的样式声明。哪怕你写了 width: 50%，只要父容器最终计算出来是 320px，sizes 就得按 320px（或对应 vw）来写。 
