浏览器从srcset中为视口选择了错误的图像

Question

我有一个具有srcset和size属性的响应式图像代码。作为定义，浏览器应选择到每个断点最近的小图像。我有以下图像尺寸：

100x100
350x350
550x550
750x750
1000x1000

这是我的代码：

<img src="image1.jpg"
     srcset="image1-100x100.jpg 100w,
             image1-350x350.jpg 350w,
             image1-550x550.jpg 550w,
             image1-750x750.jpg 750w,
             image1-1000x1000.jpg 1000w"
     sizes=" (max-width:319px) 131px,
             (max-width:479px) 208px,
             (max-width:575px) 254px,
             (max-width:767px) 346px,
             (max-width:991px) 350px,
             (max-width:1199px) 205px,
             255px"
     alt="image1">

作为sizes，对于所有sizes，应加载350x350的图像。

但是浏览器负载

350x350 image for 131px image slot (correct)
350x350 image for 208px image slot (correct)
550x550 image for 254px image slot (wrong)
750x750 image for 346px image slot (wrong)
750x750 image for 350px image slot (wrong)
350x350 image for 205px image slot (correct)
550x550 image for 255px image slot (wrong)

我看到了视口大小和加载图像大小之间的模式，但是根据srcset的定义，该模式应介于图像插槽尺寸和加载图像大小之间 。为什么会这样？

Answer 1

问题是 DPR（设备像素比率）。浏览器将尝试获取图像插槽大小乘以DPR。如果DPR为2.0或更高，则图像插槽的原始像素将乘以大于1。然后浏览器将从srcset中选择一个更大尺寸的图像。

如果我需要检查具有确切预期尺寸的图像，则应将DPR设置为1.0