css - 如何将 srcset 和 sizes 用于响应式图像

Question

我有以下捕捉点: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">

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

Answer 1

1。基础知识

设备像素比

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

• 设备的像素密度(每英寸的物理像素数)
• 浏览器的缩放级别 因此，更高的像素密度和/或更高的缩放级别会导致更高的设备像素比。

---

srcset属性 & x描述符

关于 <img>标记，x srcset 中的描述符属性用于定义设备像素比。所以在:

<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描述符

如果你想在更大或更小的视口(viewport)上显示不同的图像，w srcset 中的描述符一个新属性 ( 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 完成的属性以及 w srcset 的描述符属性。

<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描述符并希望拥有 100vw 以外的东西为你的 sizes , 你需要 sizes属性。