如何在视网膜的响应图像中使用img设备像素比,srcset,尺寸

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">

到目前为止,我已经设法让浏览器下载正确版本的图像,这样当我480px在Chrome中模拟屏幕时,浏览器下载的像素比为1900px.

但是,我注意到的是,虽然这一切看起来都很好,但浏览器也在下载1800px,实际上是在视图中显示而不是2400px.

奇怪的是,当我在iOS上的Chrome上测试时,浏览器实际上已经下载了480px,这更令人担忧.

知道为什么会这样吗？我错过了什么吗？我想我不需要900px属性,因为我1800px在所有视图中都设置了图像,但也许我还缺少其他的东西.

如果您有兴趣,可以在此处查看页面:

我真的很感谢你的帮助.

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

如果您想在更大或更小的视口上使用不同的图像,则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文件.

问题

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

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

我错过了什么吗？

我不这么认为.

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

如果要使用sizes描述符,则需要100vw属性.