srcset中1x/2x失效主因是误用sizes属性，一旦设置sizes浏览器即切换为w匹配模式，x描述符被忽略；正确做法是删sizes或改用w+sizes组合，并确保src存在有效fallback图。
srcset里写1x/2x却没加载高清图，根本不是浏览器不认
浏览器只在 img 标签**没设 sizes 属性**时，才按 1x/2x 匹配设备像素比（DPR）；一旦加了 sizes，它立刻切换成宽度匹配模式，x 单位被完全忽略——哪怕你写了 srcset="a.jpg 1x, b@2x.jpg 2x"，也会静默失效。
常见错误现象：
- Network 面板始终加载
1x图，Sec-CH-DPR请求头缺失 - Safari DevTools “Rendering” 面板显示
devicePixelRatio是 2，但图片仍是模糊的 -
img有sizes="(max-width: 768px) 100vw"，却指望2x生效
正确做法：删掉 sizes 属性（除非你真要按布局宽度切图）；srcset 必须完整写清倍率，且最高倍率放最后：srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x"；src 必须存在，且指向可用 fallback 图（不能是占位符或 404）。
用w描述符配sizes才是现代响应式布局的标配
写 1x/2x 是告诉浏览器“这张图专为某设备像素比准备”，但它只在图片占满视口（或你没写 sizes）时才可靠生效；现代 CSS 布局中，图片宽度由 max-width、grid 或 flex 控制，x 描述符极易失效。更稳妥的是用 w 单位——它对应图片的固有宽度（比如 400w 表示这张图原始宽 400 像素），配合 sizes 才能真正匹配渲染需求。
立即学习“前端免费学习笔记（深入）”；
关键要点：
-
sizes不是“建议”，而是浏览器计算加载哪张图的唯一依据；它声明的是“这张图在当前视口下会渲染多宽”，单位必须是vw、px等合法长度，不能是%或rem - 例如
sizes="(max-width: 768px) 100vw, 50vw"意味着：≤768px 视口时图片占满视口（如 iPhone SE 的 375px 视口 → 需约 750w 图）；＞768px 时只占视口一半（如 1200px 视口 → 需约 600w 图） - 如果实际 CSS 把图片设为
width: 300px，而sizes还写100vw，浏览器就会去选 1200w 图——哪怕你根本用不上
为什么写了srcset却总加载最大图？缓存和兜底逻辑常被忽略
浏览器不会仅根据视口宽度选图，还会结合设备像素比（如 iPhone 的 DPR=2/3）、网络条件（如 Save-Data）、用户偏好等综合决策。最常见干扰项是浏览器缓存：已加载过的高清图会被复用，即使切换到小屏也不会重新请求更小图——这是性能优化行为，不是 bug。
验证是否生效，只看 Network 面板里的实际请求：
- 打开 Chrome 无痕窗口
- DevTools → Network → 勾选
Disable cache - Device Toolbar 中设置视口为 450px 宽度，刷新页面，应加载
./480.png - 再切至 600px，应加载
./768.png；900px 时加载./1200.png - 如果始终只加载
src指向的图，检查控制台是否报错Failed to parse 'srcset' value，或sizes里有没有漏掉单位（比如写了sizes="50"而不是sizes="50vw"）
background-image模糊？别硬刚，换![HTML图片srcset多倍图属性怎么做清晰度兼容]()
+object-fit
用 background-image 做全屏背景，当需求是「全屏覆盖 + 多 DPR 适配 + 老浏览器兜底」时，就是自找麻烦。它的可控性远不如 img。换成 <img src="" srcset="" sizes=""> + object-fit: cover，配合 position: absolute 覆盖容器，既绕开 background-image 的 DPR 适配黑盒，又避免了 image-set() 在 Safari 旧版中的兼容问题。
替代方案对比：
-
image-set(url(bg.jpg) 1x, url(bg@2x.jpg) 2x)：Safari 13.1 之前不支持，且无法 fallback 到其他格式 - @media (-webkit-min-device-pixel-ratio: 2)：需重复写样式，维护成本高
-
background-attachment: fixed必须禁用——它在滚动时频繁触发重绘，部分浏览器会主动降质渲染
真正容易被忽略的是：所有 srcset 写法都依赖浏览器对 sizes 的解析精度，而这个解析过程在低版本 Android WebView 中存在静默失败风险——所以 src 永远不能指向最小图（比如 320w），而应是一个体积适中、清晰度够用的中间档（如 768w）。
