如何为响应式图像使用 srcset 和尺寸

Posted 2023-03-06

【中文标题】如何为响应式图像使用 srcset 和尺寸

【英文标题】：How to use srcset and sizes for responsive images

【发布时间】：2016-05-08 01:41:50

【问题描述】：

我有以下快照点：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"
 >

我应该如何让响应式图像发挥作用？

【问题讨论】：

iPhone 运行的是哪个 ios 版本？

它运行的是最新版本，9.2.1。

您可能会发现这很有帮助 - 在文章结尾处css-tricks.com/…

@CarolMcKay，您是否正在查看 部分关于给出明确指示而不是做我所做的，让浏览器决定？

在最后一段下的“何时？”标题有指向 can-i-use、polyfills 等的链接。

【参考方案1】：

1。基础知识

设备像素比

设备像素比是每个 CSS 像素的设备像素数，与：

设备的像素密度（每英寸的物理像素数） 浏览器的缩放级别 因此，更大的

像素密度

和/或更高的

缩放级别

会导致更高的

设备像素比

。

---

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 属性以及srcset 属性的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 的设备像素比（最适合@987654352 @显示）。

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 文件。

问题

奇怪的是，当我在 iOS 上的 Chrome 上测试时，浏览器实际上下载了boat-2400.jpg，这更令人担忧。

这可能是由于您的 iOS 设备的设备像素比较高，可能接近 5。

我错过了什么吗？

我不这么认为。

我想我不需要 size 属性，因为我在所有视图中都将图像设置为 100vw

sizes 的默认值为100vw。但是，如果您想使用 w 描述符并希望为您的 sizes 提供除 100vw 之外的其他内容，则需要 sizes 属性。