为什么 srcset 不选择更接近视口大小的较小图像

Question

<img src="/images/photo-236x61.png" srcset="/images/photo-170x44.png 170w, 
/images/photo-236x61.png 236w, 
/images/photo-300x72.png 300w, 
/images/photo-472x121.png 472w, 
/images/photo-600x154.png 600w, 
/images/photo-943x242.png 943w" 
sizes="(min-width: 1341px) 450px, 
(min-width: 1181px) 400px, 
(min-width: 961px) 350px, 
(min-width: 881px) 325px, 
(min-width: 801px) 300px, 
(min-width: 721px) 250px, 
(min-width: 561px) 220px, 
(min-width: 481px) 200px, 
(min-width: 401px) 170px, 
(min-width: 321px) 150px, 
(min-width: 160px) 130px, 
calc(100vw - 30px)" alt="My Photo">

我有上面的图片，根据设计师的接线方式，它有很多不同的尺寸。但是，我遇到了一些奇怪的问题，即 srscset 总是想选择比它需要的大得多的图像。例如，当视口为 420px 宽时，它会选择更大的 300px 宽度的图像，而不是更接近提供的 srcset 宽度的更小的图像。不知道为什么查询没有导致它在不同的场景中选择正确的大小。任何人都知道如何知道浏览器选择了什么以及为什么？

Answer 1

srcset 定义图像列表以及每个图像的大小（图像的实际大小）。该指令允许浏览器在它们之间进行选择。

尺寸定义了一组媒体条件（例如屏幕宽度），并指出在某些媒体条件为真时最好选择哪种图像尺寸。

sizes 规则的顺序很重要，因为浏览器会忽略第一个匹配条件之后的所有内容，所以我认为这里的问题应该是顺序。

当视口宽度为 420px 时，第一个 sizes 条件告诉：“当视口宽度为 1341 像素或更少时，加载 srcset 列表中引用的图像，与所选插槽大小 (450px) 非常匹配”。

此条件为真结束，浏览器将选择 srcset 图像：/images/photo-300x72.png 300w 匹配 sizes 条件。

这里是useful article，了解响应式图像的工作原理。