Chrome在sizes值微调后错误选择srcset图片的原因探究

这是浏览器基于**设备像素比（DPR）**和srcset/sizes的匹配逻辑导致的，核心是像素需求的临界点计算：

• 浏览器选择图片的基本逻辑
  浏览器会先根据sizes属性确定图片在页面中的CSS渲染宽度，再乘以当前设备的设备像素比（DPR），得到需要的最小设备像素宽度——也就是图片实际需要具备的像素尺寸，然后从srcset里挑选最匹配（优先选不小于该需求的最小尺寸）的图片。

• 临界点的计算
  假设当前设备的DPR约为1.418（很多非整数DPR的设备会出现这个情况，比如部分Android机型）：

  • 当sizes="282px"时，计算所需像素宽度：282 × 1.418 ≈ 400，刚好等于400w图片的像素宽度，所以浏览器选择_400x.png。
  • 当sizes="283px"时，所需像素宽度变为：283 × 1.418 ≈ 401，这时候400w的图片像素宽度已经小于需求，浏览器就会切换到下一个更大的800w规格图片。

• 补充说明
  哪怕是整数DPR的设备（比如常见的2x Retina屏幕），也可能因为浏览器的计算精度、图片尺寸的向上取整规则，出现类似的临界点切换——比如当计算后的需求像素刚好卡在两个图片尺寸的边界时，微小的sizes数值变化就会触发图片选择的跳转。

内容的提问来源于stack exchange，提问作者Rijk