如何对响应图像使用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.

在<img>标签上，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 pixels宽，则在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属性以及srcset属性的w描述符来实现的.

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 pixels，则图像将显示为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).

您提到您模拟了 480px 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.

我在这里错过了什么吗?

Have I missed something here?

我不这样认为.

我想我不需要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屋！