在图像的srcset中解释w

Question

我了解，srcset用于根据dpi设备的来确定要加载哪个图像。我在Google Web基础知识上遇到了这个示例，该示例似乎使用了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

w是图像的固有宽度。这是当您右键单击图像并在 Mac 上选择“获取信息”或在 Windows 上选择“属性”时获得的数字。

为什么需要指定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">

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

图像elva-fairy-480w.jpg将被加载，因为其固有宽度（600w - 膨胀！）最接近插槽大小。

因此，如果夸大图像的固有宽度，可能不会有什么坏处。

如果低估了固有宽度怎么办？

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

elva-fairy-800w.jpg在 480px 的视口宽度上，将加载图像，因为elva-fairy-480w.jpg据报道为 280w 并且不符合sizes.

因此，低估图像的固有宽度将导致浏览器加载过大的图像，这违背了响应式图像的初衷。

不过，我还没有考虑到对图像的内在宽度撒谎所带来的所有后果。

Answer 2

根据MDN的w指：

宽度描述符，或者是直接后跟“ w”的正整数。宽度描述符除以sizes属性中指定的源大小，以计算有效像素密度。

此外，W3指出：

用户代理将根据size属性中指定的w描述符和指定的渲染大小来计算每个图像的有效像素密度。然后，它可以根据用户屏幕的像素密度，缩放级别以及可能的其他因素（例如用户的网络状况）来选择任何给定的资源。如果用户的屏幕为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提供了更多详细信息。