在 html 中 img 元素的 srcset 属性中，我们可以指定每个源的宽度或像素密度。我们使用 w 来指定宽度，使用 x 来指定像素密度。我有一些关于 w 和 x 的问题。
500w是不是表示图片的宽度是500像素？如果是这样，为什么在 size 属性中使用的是 w 而不是 px？
1x 是否表示像素密度为 72 像素/英寸
为什么图像有像素密度？我认为像素密度是指物理长度/空间内的像素数。例如，每英寸的像素数。但是数字图像不占用物理长度/空间，它只占用一些像素。那么数字图像的像素密度是什么意思？...这是我的猜测，如果我是对的，请告诉我：图像仅占用多个像素，但它可能是为了物理长度而设计的。例如，一个 144 像素宽度的按钮图像打算占据 1 英寸的物理空间。因此，它适用于 2x 的设备。我们通过在 srcset 属性中指定 2x 来告诉浏览器。总而言之，像素密度是指图像所针对的系统的像素密度。
【问题讨论】：
标签： html image srcset pixel-density
#1. 出现在<img> 标记的srcset 属性中列出的每个文件右侧的'w' 值称为“w 描述符”。每个'w' 描述符的值是与'w' 描述符关联的文件的固有宽度，以像素为单位。 “固有宽度”是指图像最初创建时或上次更改宽度时的原始宽度。 您可以在 Photoshop 或 Windows 10 照片查看器中查看文件的固有宽度（单击三点菜单“...”并选择文件信息）。 “px”不用于描述固有宽度，因为它用于描述各种其他类型的图像宽度。 'w' 描述符描述了一种特定类型的图像宽度，以像素为单位 - 固有宽度 - 并且仅与<img> 标记的srcset 属性一起使用。
#2.“1x”并不意味着像素密度为每英寸 72 像素。那是因为像素密度不是设备分辨率。像素密度是以像素为单位的浏览器图像宽度（称为“CSS 像素”）与设备显示屏的本机像素宽度的比率。 像素密度与设备分辨率无关。
#3. 图像没有像素密度。它只有两种类型的宽度测量 - 都以像素为单位。一种宽度度量是浏览器显示图像的宽度。另一个宽度度量是图像的固有宽度（参见#1）。例如，假设我有一个内在宽度为 800 像素宽的图像。还假设浏览器以 650 像素宽显示图像。这两个测量值没有任何关系（这不是像素密度！） - 它们只是查看图像的两种不同方式，导致两种不同的宽度测量值。
我直接回答了你的问题，没有任何其他背景或解释，我敢肯定你是在挠头说：“这没有帮助！”这与我第一次开始自学有关浏览器如何选择和显示内联图像（在 HTML 中使用 <img> 标记指定的图像）时的反应完全相同。 I suggest you read this post 开始全面了解如何在 HTML 标记中指定内联图像以及浏览器如何从 <img> 标记的 srcset 属性中选择适当的图像。在这个主题成为焦点之前，你可以期待几周的学习。而当你完成了对内嵌图片的掌握之后，背景图片正等着你去掌握一套完全不同的规则。 :>)
【讨论】：