响应式img元素srcset加载疑问：223px槽位为何加载200w图片？

我使用了如下<img>元素：

<img
    srcset="https://placehold.co/200x200 200w, https://placehold.co/1000x1000 1000w"
    sizes="(max-width: 600px) 223px, 1000px"
    src="https://placehold.co/1000x1000"
    alt="Dog"
/>

依据MDN文档中关于响应式图片的第3、4点规则：

3 - 查看媒体查询对应的槽位尺寸。
4 - 加载srcset列表中与槽位尺寸相同的图片，若无则加载第一个比槽位尺寸大的图片。

按照规则，当槽位为223px时，200w的图片小于该尺寸，我预期会加载1000x1000的图片，但实际却加载了200x200的图片。而当我将槽位改为224px时，就会加载1000x1000的图片。我想知道是忽略了什么关键点，还是浏览器在后台做了特殊处理？

原因解析 #

这是浏览器对响应式图片加载的容差机制导致的——浏览器会为srcset中的图片尺寸计算一个「可接受范围」，避免因微小的尺寸差异就加载更大的图，浪费带宽。

具体来说，浏览器会为每个候选图片计算「有效像素比」，当槽位尺寸与候选图片的w值的差异在某个阈值内时，浏览器会优先选择更小的图。对于你的情况：

• 当槽位是223px时，200w的图片和槽位尺寸的比例是223/200 = 1.115，这个比例在大多数浏览器默认的容差范围内（通常是1.1，也就是10%的误差），所以浏览器认为200w的图足够覆盖槽位需求，会加载它。
• 当槽位是224px时，比例变成224/200 = 1.12，超过了默认阈值，浏览器就会选择下一个更大的1000w图片。

MDN的规则描述是简化版的，实际浏览器的加载逻辑会包含这个容差优化，目的是平衡图片清晰度和加载性能。

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