解释图像的“`srcset`”中的“w”

Question

据我所知，srcset用于根据设备的dpi来确定要加载的图像。我在Google基础上看到了这个例子，它似乎使用w单元，而vw单元恰好是视口宽度的1%：

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

帮助我理解这个度量单位是什么，以及我如何使用它？

Answer 1

据MDN称，w指的是：

宽度描述符(正整数后面紧跟w)。宽度描述符除以sizes属性中给定的源大小来计算有效像素密度。

此外，W3声明：

用户代理将从指定的w描述符和sizes属性中指定的呈现大小计算每个图像的有效像素密度。然后，它可以根据用户屏幕的像素密度、缩放级别以及可能的其他因素(如用户的网络条件)选择任何给定的资源。如果用户的屏幕宽为320 CSS像素，这相当于指定wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x。另一方面，如果用户的屏幕宽为1200个CSS像素，这相当于指定wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x。通过使用w描述符和sizes属性，用户代理可以选择要下载的正确的映像源，而不管用户的设备有多大。

W3页面上的示例13提供了其他详细信息。

Answer 2

w是图像的固有宽度。这是当您右键单击图像并在Mac上选择get Info或Windows上的Properties时得到的数字。

为什么需要指定w？因为srcset属性的第一个值只指向加载映像的链接。它没有提到图像的宽度。在实际加载图像之前，浏览器无法分辨图像的维数。

为什么浏览器需要知道图像的内在宽度？

以下是浏览器在加载图像时所做的工作：

• 看看它的设备宽度
• 看看sizes，找出最适合选择的图像大小
• 查看srcSet中的参考列表，并选择其大小匹配或大于上述数字的图像。

要从MDN借用示例代码：

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

一个常见的做法是在图像路径中包含固有的图像宽度。然而，没有什么能阻止你像这样说谎：

<img srcset="elva-fairy-480w.jpg 600w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

这意味着，如果具有viewport宽度为480 to的浏览器加载页面，则max-width: 600px条件将为真，并且浏览器有一个宽度为480 to的槽来加载图像。

图像elva-fairy-480w.jpg将被加载，作为其内在宽度(600 w-膨胀！)最接近槽的大小。

所以，如果你夸大了图像的内在宽度，那就没有什么害处了。

如果你低估了内在宽度呢？

<img srcset="elva-fairy-480w.jpg 280w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

在480 in的视口宽度上，图像elva-fairy-800w.jpg将被加载，因为据报告，elva-fairy-480w.jpg为280 W，并且不满足sizes中的指令。

因此，低估图像的内在宽度会导致浏览器加载过大的图像，这就违背了响应式图像的目的。

不过，我还没有仔细考虑过关于图像内在宽度的谎言的所有影响。