html - 浏览器从 srcset 中为视口(viewport)选择了错误的图像

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)

我看到视口(viewport)大小和加载图像大小之间存在一种模式，但作为srcset定义，模式应介于图像插槽尺寸和加载图像尺寸之间。为什么会这样？

Answer 1

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

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