无sizes属性时浏览器如何确定srcset中需加载的图片

浏览器srcset选图逻辑说明 #

你遇到的选图不符合预期的核心原因是：使用宽度描述符（w）的srcset时，如果省略sizes属性，浏览器会默认sizes = 100vw，也就是直接默认图片的最终展示宽度等于整个视口的宽度，不会按照你实际的CSS布局宽度计算。

针对你提出的三个判定因素问题，逐一说明：

• 是否通过CSS规则判断图片的展示宽度？
  不会。浏览器的图片预加载逻辑执行时机非常早，在HTML解析的预扫描阶段就会启动，此时CSS文件还没完成下载和解析，CSSOM树都没有构建完成，浏览器根本拿不到你写的图片宽度样式，所以不可能参考CSS规则选图。
• 还是会忽略CSS，仅读取<img />上存在的width和height属性？
  也不是。img标签上的原生width/height属性现在仅用于计算图片的宽高比，避免布局偏移，不会作为srcset选图的宽度依据。
• 如果部分CSS尚未加载完成会如何处理？
  图片预加载本来就优先于CSS加载和解析流程，所以CSS是否加载完成不会影响预加载阶段的选图决策，浏览器只会按照你显式声明的sizes规则（没有声明就默认100vw）计算所需的图片分辨率。

你的场景最优解决方案 #

你对sizes属性的理解有误区，不需要为设备像素比和所有窗口宽度组合写复杂媒体查询，针对你的场景（图片大多和窗口等宽，仅极宽时不超过1000px），只需要给img加一行非常简单的sizes属性即可：

<img src="i1.png" 
  srcset="i1.png 420w, i2.png 840w, i3.png 1260w"
  sizes="(min-width: 1000px) 1000px, 100vw"
/>

这行声明的意思是：视口宽度大于等于1000px时，图片展示宽度为1000px，其余情况下图片展示宽度等于视口宽度。浏览器会自动结合设备像素比计算需要的图片分辨率，完全匹配你的需求，不需要额外配置。

如果坚持不使用sizes属性，那么宽度描述符的srcset确实无法满足你的场景，这是HTML响应式图片的规范要求，没有绕开的实现方式。

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