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

Question

我有一个具有 srcset 和 size 属性的响应式图像代码。根据定义，浏览器应该select离每个断点最近的小图像。我有以下图像尺寸：

这是我的代码：

<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 select 更大尺寸的图像。

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

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

Browser choose wrong image from srcset for the viewport

html

css

responsive