浏览器如何使用 <img>“sizes”和“srcset”属性选择正确的图像？

Question

属性如何srcset结合属性确定正确的图像sizes？以此图为例：

<img alt="Demo image"
     sizes="(min-width: 1024px) 512px,
             100vw"
     srcset="img/banner-large.jpg 2048w,
             img/banner-medium.jpg 1400w,
             img/banner-small.jpg 800w">

（我清除了Chrome中的缓存）

我认为最后一个图像总是会被选择（800w），因为 512px（尺寸）和图像宽度为 800w（srcset），但该图像并不总是被选择？为什么？

Answer 1

这是有关使用Srcset 和 size 的详细指南。

\n

sizes属性包含一个以逗号分隔的列表。列表中的每一项都描述了图像相对于视口的大小。

\n

使用sizes属性 withsrcset可以为浏览器提供足够的信息，以便在看到某个图像时立即开始下载正确的图像。<img>而无需等待样式表完成下载和解析。

\n

为什么我们需要尺寸？

\n

如果您想知道为什么浏览器不知道图像将呈现多大，请检查浏览器如何加载网页。

\n

语法：

\n

<img src="image.jpg" \n     srcset="small.jpg 300w,\n             medium.jpg 600w,\n             large.jpg 900w"\n     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"\n/>\n

\n

每个以逗号分隔的项目sizes都有：

\n

\n
1. 媒体条件，例如，(max-width: 300px)- 它描述了屏幕可能处于的状态。(max-width: 300px)表示当视口宽度为 300 CSS 像素或更小时。它与媒体查询类似，但有一些限制。您不能使用screen或print。
\n
2. 一片空旷的空间。
\n
3. 媒体条件为真时图像元素的宽度。您可以提供绝对长度（px、em）或相对于视口的长度（vw），但不能提供百分比。
\n

\n

演示 - 具有大小的 srcset

\n

让\xe2\x80\x99s 通过现场演示来了解这一点 - https://imagekitio.github.io/responsive-images-guide/srcset-sizes.html

\n

布局是这样的：

\n

\n
• 如果视口宽度高于 900 像素，则每个图像采用固定的 225 像素宽度。
\n
• 最大 900px，每个图像占用 33vw，即总视口宽度的 33%。
\n
• 最大 700px，每个图像占用 50vw，即总视口宽度的 50%。
\n
• 最大 400px，每个图像占用 100vw，即整个视口宽度。
\n

\n

单个图像元素的 HTML 标记如下所示：

\n

<img src="https://ik.imagekit.io/ikmedia/women-dress-1.jpg" \n     srcset="https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-225 225w,\n             https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-300 300w,\n             https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-350 350w,\n             https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-640 640w"\n     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">\n

\n

让\xe2\x80\x99s 看看在不同的屏幕尺寸和 DPR 值下会发生什么 -

\n

\n

Answer 2

该sizes属性确定适用于当前设备宽度的媒体条件（选择第一个适用的媒体条件）。然后，浏览器检查该srcset属性以查找与该属性确定的槽大小最匹配的图像sizes。请注意，浏览器会为 Retina 等高分辨率显示器选择较大的图像（通常会选择宽度接近“正常”分辨率显示器上的两倍的图像）。请参阅响应式图像和响应式图像：如果您只是更改分辨率，请使用 srcset了解有关其工作原理的更多详细信息。

因此，在您的情况下，您希望banner-small.jpg在设备宽度至少为 1024px 的“正常”分辨率设备上获得图像（并且由于宽度较大，您还希望在较小宽度的“正常”分辨率设备上获得相同的图像）您的其他srcset图像选项）。

您可能无法获得预期结果的一些原因：

• 较旧的浏览器版本不支持srcset
• 未指定<meta name="viewport" content="width=device-width">在加载页面时强制设备采用其实际宽度。
• 浏览器可能会显示缓存的图像，而不是从中选择最接近的尺寸匹配srcset（正如您在问题中指出的那样）。
• 当尝试在页面上显示同一图像的多个尺寸时，浏览器可能仅下载所需的最大图像并在每个实例中使用它（而不是下载多个图像）。
• 如果您尝试在某种沙盒 iframe 环境（如 jsfiddle）中测试图像选择行为，则很难确定浏览器将显示窗格的大小解释为“设备宽度”（我在这些中得到了混合结果srcset）环境类型）。对于 Chrome 和 Firefox 等浏览器来说，它在 SO 片段中的表现似乎相当合理（只要你清除缓存）。请参阅下面的示例片段（最好在您自己的环境中使用），它可以使测试时选择的图像在视觉上显而易见。

<img srcset="https://via.placeholder.com/300x150 300w,
             https://via.placeholder.com/600x300 600w"
     sizes="(min-width: 1024px) 600px,
            100vw"
     src="https://via.placeholder.com/300x150"
     alt="placeholder image">