【发布时间】：2021-10-30 20:44:08
【问题描述】：
我的网站上有一张以各种尺寸显示的图片：
- 该网站具有响应性，并且明显的图像大小通常是浏览器的大小，但在浏览器非常宽的情况下会有一些例外。因此，图片的宽度可以在 200 到 1000 像素之间变化。
- 我们希望图像在高分辨率设备 (Retina) 上以原始分辨率显示。
所以，我们的图像以三种分辨率呈现，我们称它们为 i1.png、i2.png 和 i3.png。
我想做的就是这样：
<img src="i1.png" srcset="i1.png 420w, i2.png 840w, i3.png 1260w" />
在我看来，浏览器应该有足够的信息来确定它需要哪个图像。
- 在标准分辨率设备（无视网膜屏幕）上，它只取
<img />元素的宽度，然后加载宽度大于或等于元素宽度的图像。例如。如果图片元素是 600px 宽，那么它将加载i2.png。 - 在 Retina 设备上，它只会将
<img />元素的宽度乘以设备像素比。例如。在“2x”设备上，它会为 600px 的图像加载i3.png，因为2 x 600 = 1200，所以它需要宽度为1260px的图像。
看起来浏览器确实做了类似的事情，但在某些情况下它会加载840px 图像，即使420px 图像就足够了。
浏览器使用哪些因素来确定要加载的图片大小？
- 是否使用 CSS 规则来确定图像的表观宽度？
- 还是忽略 CSS，只查看
<img />上的width和height属性（如果存在）？ - 如果 CSS 的某些部分尚未加载怎么办？
关键点：我不想使用sizes 属性，因为我需要对设备像素比率和浏览器窗口宽度的所有可能组合进行媒体查询。这应该没有必要，因为正如我所说，浏览器应该有足够的信息。
我查看了关于该主题的Mozilla Docs，但他们说如果省略了sizes，那么我们需要在srcset 属性中使用2x 描述符（而不是420w 描述符）。这对我的场景没用：目标是让浏览器找出要加载的图像，不仅基于设备像素比，还基于响应能力。
【问题讨论】：