如何将 srcset 和 sizes 用于响应式图像
How to use srcset and sizes for responsive images
我有以下快照点：480px、900px、1800px、2400px。
和这个标记：
<img
sizes="(max-width: 2400px) 100vw, 2400px"
srcset="
boat-480.jpg 480w,
boat-900.jpg 900w,
boat-1800.jpg 1800w,
boat-2400.jpg 2400w"
src="boat-2400.jpg"
alt="This is a boat">
我应该如何让响应式图片发挥作用？
1。基础
设备像素比
设备像素比 是每 CSS 像素的设备像素数，它与：
- 设备的像素密度（每英寸的物理像素数）
- 浏览器的缩放级别
因此，更大的像素密度 and/or 更高的缩放级别 会导致更高的设备像素比 .
srcset 属性 & x 描述符
在 <img> 标签上，srcset 属性中的 x 描述符用于定义 设备像素比 。所以在：
<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">
- 对于 1 的设备像素比，将使用图像 image-1x.jpg。
- 对于 2 的设备像素比，将使用图像 image-2x.jpg。
- 对于 3 的设备像素比，将使用图像 image-3x.jpg。
- 对于后备，将使用
src 属性 (image.jpg)。
srcset 属性 & w 描述符
如果您想在更大或更小的视口上使用不同的图像，srcset 中的 w 描述符和新属性 (sizes) 将发挥作用：
<img src="image.jpg" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
这里提到第一张图片的宽度是200px，第二张图片是400px，第三张图片是600px。此外，如果用户的屏幕是 150 CSS pixels 宽，则这等同于以下 x 描述符：
<img src="image.jpg" srcset="image-1x.jpg 1.33x, image-2x.jpg 2.67x, image-3x.jpg 4x">
sizes 属性
您想要在不同屏幕尺寸上使用不同尺寸图像（不同高度、宽度）的实际实现是通过使用 sizes 属性以及 [=16] 的 w 描述符来实现的=] 属性.
<img src="image.jpg" sizes="50vw" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
如果浏览器宽度为 500 CSS pixels，图像将显示 250px 宽（因为 50vw）。现在，这相当于指定：
<img src="image.jpg" srcset="image-1x.jpg 0.8x, image-2x.jpg 1.6x, image-3x.jpg 2.4x">
因此，对于 1.5x 显示器，image-2x.jpg 将由浏览器下载，因为它提供 设备像素比 1.6x（最适合 1.5x 显示）。
2。回答您的问题
您提到您模拟了 480px CSS 宽度的屏幕。
因为你设置了sizes为100vw，相当于指定：
<img src="boat-2400.jpg" srcset="
boat-480.jpg 1x,
boat-900.jpg 1.88x,
boat-1800.jpg 3.75x,
boat-2400.jpg 5x">
您有可能 3x 显示，因此浏览器会下载 boat-1800.jpg 文件。
问题
Oddly, when I tested this on Chrome on iOS the browser actually downloaded boat-2400.jpg which is even more worrying.
这可能是因为您的 iOS 设备的 设备像素比 较高，可能接近 5。
Have I missed something here?
我不这么认为。
I imagine I don't need the sizes attribute because I have the image set to 100vw in all views
sizes的值默认为100vw。但是，如果您想使用 w 描述符并希望为您的 sizes 使用 100vw 以外的其他内容，则需要 sizes 属性。
我有以下快照点：480px、900px、1800px、2400px。
和这个标记：
<img
sizes="(max-width: 2400px) 100vw, 2400px"
srcset="
boat-480.jpg 480w,
boat-900.jpg 900w,
boat-1800.jpg 1800w,
boat-2400.jpg 2400w"
src="boat-2400.jpg"
alt="This is a boat">
我应该如何让响应式图片发挥作用？
1。基础
设备像素比
设备像素比 是每 CSS 像素的设备像素数，它与：
- 设备的像素密度（每英寸的物理像素数）
- 浏览器的缩放级别 因此，更大的像素密度 and/or 更高的缩放级别 会导致更高的设备像素比 .
srcset 属性 & x 描述符
在 <img> 标签上，srcset 属性中的 x 描述符用于定义 设备像素比 。所以在：
<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">
- 对于 1 的设备像素比，将使用图像 image-1x.jpg。
- 对于 2 的设备像素比，将使用图像 image-2x.jpg。
- 对于 3 的设备像素比，将使用图像 image-3x.jpg。
- 对于后备，将使用
src属性 (image.jpg)。
srcset 属性 & w 描述符
如果您想在更大或更小的视口上使用不同的图像，srcset 中的 w 描述符和新属性 (sizes) 将发挥作用：
<img src="image.jpg" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
这里提到第一张图片的宽度是200px，第二张图片是400px，第三张图片是600px。此外，如果用户的屏幕是 150 CSS pixels 宽，则这等同于以下 x 描述符：
<img src="image.jpg" srcset="image-1x.jpg 1.33x, image-2x.jpg 2.67x, image-3x.jpg 4x">
sizes 属性
您想要在不同屏幕尺寸上使用不同尺寸图像（不同高度、宽度）的实际实现是通过使用 sizes 属性以及 [=16] 的 w 描述符来实现的=] 属性.
<img src="image.jpg" sizes="50vw" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
如果浏览器宽度为 500 CSS pixels，图像将显示 250px 宽（因为 50vw）。现在，这相当于指定：
<img src="image.jpg" srcset="image-1x.jpg 0.8x, image-2x.jpg 1.6x, image-3x.jpg 2.4x">
因此，对于 1.5x 显示器，image-2x.jpg 将由浏览器下载，因为它提供 设备像素比 1.6x（最适合 1.5x 显示）。
2。回答您的问题
您提到您模拟了 480px CSS 宽度的屏幕。
因为你设置了sizes为100vw，相当于指定：
<img src="boat-2400.jpg" srcset="
boat-480.jpg 1x,
boat-900.jpg 1.88x,
boat-1800.jpg 3.75x,
boat-2400.jpg 5x">
您有可能 3x 显示，因此浏览器会下载 boat-1800.jpg 文件。
问题
Oddly, when I tested this on Chrome on iOS the browser actually downloaded boat-2400.jpg which is even more worrying.
这可能是因为您的 iOS 设备的 设备像素比 较高，可能接近 5。
Have I missed something here?
我不这么认为。
I imagine I don't need the sizes attribute because I have the image set to 100vw in all views
sizes的值默认为100vw。但是，如果您想使用 w 描述符并希望为您的 sizes 使用 100vw 以外的其他内容，则需要 sizes 属性。