为何Chrome在srcset有适配图时仍选择更大尺寸图片？

问题出在**设备像素比（DPR，Device Pixel Ratio）**上，这是高分辨率屏幕下浏览器的默认适配逻辑：

• 你给<img>设置的width="350"是CSS像素，而srcset里的w单位指的是图片的物理像素宽度。
• 现在的手机视网膜屏、2K/4K电脑屏DPR普遍是2或3——简单说，1个CSS像素对应2或3个屏幕物理像素。比如你的设备DPR是3，那350px的CSS宽度实际需要350 × 3 = 1050px的物理像素来清晰显示。
• 浏览器会自动计算这个需求，然后在srcset里挑最接近（且不小于）该值的图片版本。1200w刚好匹配1050px的需求，而400w的图片物理宽度远不够，拉伸后会模糊，所以Chrome不会选它。

你可以自己验证：

• 打开Chrome控制台，输入window.devicePixelRatio就能看到当前设备的DPR数值。
• 在开发者工具的Device Toolbar里切换到DPR=1的设备，刷新后浏览器就会选400w的版本。

如果非要让高DPR设备用低分辨率图，要么调整srcset的参数，要么加image-rendering CSS属性（但会牺牲清晰度，不推荐）。更合理的做法是根据不同DPR提供对应图片，平衡加载速度和显示效果。

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