为何devicePixelRatio=2时srcset断点变为1200px？技术咨询

测试场景代码 #

<img
  srcset="new-york-skyline-wide.jpg 3724w, new-york-skyline-4by3.jpg 1600w"
  sizes="100vw"
/>

观察到的现象 #

• 当devicePixelRatio = 1时，断点为1600px：屏幕宽度超过1600px加载new-york-skyline-wide.jpg（3724w），低于则加载new-york-skyline-4by3.jpg（1600w）。
• 当devicePixelRatio = 2时，断点变为1200px：屏幕宽度超过1200px加载宽图，低于则加载4:3图。

核心疑问 #

为什么devicePixelRatio=2时断点变为1200px？浏览器是如何基于断点变化决定加载的图片？

解答：浏览器的图片选择逻辑 #

浏览器选择srcset中图片的核心是匹配当前场景下的实际像素需求，具体步骤如下：

1. 确定图片的CSS显示宽度 #

sizes="100vw"表示图片的CSS宽度等于视口宽度（即屏幕宽度的100%），比如屏幕宽度是1200px，图片的CSS宽度就是1200px。

2. 计算所需的实际像素宽度 #

高DPI屏幕（devicePixelRatio>1）需要更多像素保证图片清晰，实际所需像素 = 图片CSS宽度 × devicePixelRatio：

• dpr=1时，1600px宽的屏幕需要1600×1=1600像素的图片；
• dpr=2时，1200px宽的屏幕需要1200×2=2400像素的图片。

3. 匹配srcset中的图片 #

浏览器会遍历srcset里的图片，优先选择宽度（w描述符）大于等于所需像素宽度的最小图片；如果所有图片都小于需求，就选最大的那张。

断点变化的原因（结合你的场景） #

• dpr=1时的断点1600px：当屏幕宽度≤1600px，所需像素≤1600，刚好匹配1600w的4:3图；屏幕宽度超过1600px，所需像素超过1600，1600w的图像素不够，所以选3724w的宽图。
• 关于dpr=2时的1200px断点：按照标准逻辑，屏幕宽度超过800px时，所需像素=800×2=1600，就该切换到3724w的图。你观察到的1200px断点，大概率是浏览器的优化策略导致的：
  • 浏览器会结合网络状况、图片文件大小做权衡，如果1600w的图文件远小于3724w，在所需像素略超过1600时（比如屏幕宽度900-1199px，所需像素1800-2398），浏览器可能优先加载更小的1600w图，直到所需像素接近3724w的一半（约1862px屏幕宽度）才会切换；
  • 也可能测试场景中存在其他CSS规则（比如图片的max-width限制），间接改变了图片的实际CSS宽度，导致断点偏移到1200px。

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