如何为响应式图像使用 srcset 和大小 [英] How to use srcset and sizes for responsive images

问题描述

我有以下捕捉点:480px、900px、1800px、2400px.

I have following snap-points: 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">

我应该如何让响应式图片工作?

How should I get responsive images to work?

推荐答案

1.基础知识

设备像素比

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

1. Basics

Device-pixel ratio

Device-pixel ratio is the number of device pixels per CSS pixel which is related to:

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

• Pixel density of the device (number of physical pixels per inch)
• Zoom level of the browser So, greater Pixel density and/or higher Zoom level results in higher Device-pixel ratio.

在标签上，srcset属性中的x描述符用于定义设备像素比.所以在:

On <img> tag, the x descriptor in the srcset attribute is used to define the device-pixel ratio. So in:

<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).
• for a device-pixel ratio of 1, the image image-1x.jpg will be used.
• for a device-pixel ratio of 2, the image image-2x.jpg will be used.
• for a device-pixel ratio of 3, the image image-3x.jpg will be used.
• for the fallback the src attribute (image.jpg) will be used.

如果你想在更大或更小的视口上显示不同的图像，srcset 中的 w 描述符和一个新属性 (sizes) 来了发挥作用:

If you want a different image on a larger or smaller viewport, the w descriptor in srcset and a new attribute (sizes) comes into play:

<img src="image.jpg" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">

这里提到第一张图片的宽度是200px，第二张图片是400px，第三张图片的宽度是600px.此外，如果用户的屏幕是 150 CSS 像素 宽，这相当于以下 x 描述符:

This mentions that the width of the first image is 200px, second image is 400px, and third image is 600px. Also, if the user’s screen is 150 CSS pixels wide, this equates to the following in terms of x descriptors:

<img src="image.jpg" srcset="image-1x.jpg 1.33x, image-2x.jpg 2.67x, image-3x.jpg 4x">

sizes 属性

您希望在不同屏幕尺寸上使用不同尺寸图像(不同高度、宽度)的实际实现是通过使用 sizes 属性和 w 描述符来实现的srcset 属性.

sizes attribute

The actual implementation where you’d want a different size image (different height, width) on different screen sizes is accomplished by using sizes attribute along with the w descriptor of srcset attribute.

<img src="image.jpg" sizes="50vw" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">

如果浏览器宽度为500 CSS 像素，图片将显示250px 宽度(因为50vw).现在，这相当于指定:

If the browser width is 500 CSS pixels, the image will be displayed 250px wide (because of 50vw). Now, this is equivalent to specifying:

<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 显示).

So, for a 1.5x display, image-2x.jpg will be downloaded by a browser, since it gives a device-pixel ratio of 1.6x (which is most suitable for a 1.5x display).

您提到您模拟了 480 像素 CSS 宽度的屏幕.

You have mentioned that you have emulated a 480px CSS width screen.

因为你已经将sizes设置为100vw，这就相当于指定了:

Because you have set sizes to 100vw, that is equivalent to specifying:

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

There is chance you have 3x display, and thus the browser downloads boat-1800.jpg file.

问题

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

Oddly, when I tested this on Chrome on iOS the browser actually downloaded boat-2400.jpg which is even more worrying.

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

That would be due to the higher Device-pixel ratio of your iOS device, which is likely to be something near 5.

我错过了什么吗?

我不这么认为.

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

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 属性.

The value of sizes is 100vw by default. But if you want to use w descriptor and want to have something other than 100vw for your sizes, you need sizes attribute.

这篇关于如何为响应式图像使用 srcset 和大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！