HTML img的srcset属性不符合预期？Chrome/Safari响应式图片加载异常

这个问题我之前调试响应式图片时也碰到过，根源其实是Chrome和Safari对**高DPI屏幕（比如Retina屏）**的像素密度处理逻辑，和你预期的“仅按CSS视口宽度选图”不一样~

为什么会出现“宽度翻倍”的情况？ #

现代高DPI设备（比如iPhone、MacBook Retina）的设备像素比（DPR）通常是2或更高——简单说就是1个CSS像素对应2个实际屏幕像素。浏览器在处理srcset的w单位时，会把CSS视口宽度 × DPR作为实际需要的像素宽度来匹配图片。

比如你说的386px CSS宽度的屏幕，如果DPR=2，浏览器计算出需要的像素宽度是386×2=772px，所以会优先选择800w的图片（因为它是最接近且不小于772px的选项），这就造成了“屏幕宽度被翻倍”的错觉。而Firefox在某些场景下的处理逻辑可能更贴近纯CSS宽度，但从标准规范来说，结合DPR选图才是合理的（保证高DPI屏显示清晰）。

两种解决方案，看你的需求选择 #

方案1：遵循标准，让高DPI屏加载清晰的图（推荐） #

如果你希望图片在高DPI屏上显示清晰，同时尽量匹配视口尺寸，只需要给<img>添加sizes属性，明确告诉浏览器图片的CSS显示宽度（你的场景是100vw）：

<img 
  src="/images/pages/arrivals/02_exterior_1000.jpg" 
  srcset="/images/pages/arrivals/02_exterior_400.jpg 400w,
          /images/pages/arrivals/02_exterior_600.jpg 600w,
          /images/pages/arrivals/02_exterior_800.jpg 800w,
          /images/pages/arrivals/02_exterior_1000.jpg 1000w" 
  sizes="100vw"  <!-- 关键：定义图片的CSS显示宽度 -->
  alt="Blank" 
/>

原理：sizes告诉浏览器“这张图会占满整个视口宽度”，浏览器会结合这个值和设备DPR计算需要的像素宽度，然后从srcset里选最适合的图。比如386px CSS宽度+DPR=2时，会选800w的图，这样在高DPI屏上显示不会模糊；如果是普通DPI屏（DPR=1），386px宽度就会选400w的图，完全符合你的预期。

方案2：强制按CSS视口宽度选图（忽略DPI） #

如果你确实想完全忽略设备像素比，只按CSS视口宽度加载对应图片（注意：高DPI屏上图片会因拉伸变得模糊），可以用<picture>元素结合媒体查询来实现：

<picture>
  <!-- 视口宽度≤399px时加载400px图 -->
  <source media="(max-width: 399px)" srcset="/images/pages/arrivals/02_exterior_400.jpg" />
  <!-- 视口宽度≤599px时加载600px图 -->
  <source media="(max-width: 599px)" srcset="/images/pages/arrivals/02_exterior_600.jpg" />
  <!-- 视口宽度≤799px时加载800px图 -->
  <source media="(max-width: 799px)" srcset="/images/pages/arrivals/02_exterior_800.jpg" />
  <!-- 兜底：加载最大尺寸图 -->
  <img src="/images/pages/arrivals/02_exterior_1000.jpg" alt="Blank" />
</picture>

这种方式下，浏览器会严格按照媒体查询的CSS视口宽度来选择图片，不管设备的像素密度。

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