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

据我了解，srcset用于根据以下内容确定要加载的图像dpi设备的。我在 Google Web Fundamentals 上看到了这个例子，它似乎使用了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">

帮助我了解其测量单位是什么以及如何使用它？

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

为什么需要指定w？因为第一个值srcset属性仅指向加载图像的链接。它没有说明图像的宽度。在实际加载图像之前，浏览器无法得知图像的尺寸。

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

以下是浏览器在加载图像时执行的操作：

• 查看其设备宽度
• look at 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条件为真，浏览器有一个 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">

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

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

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