Html 正确使用敏感的视网膜图像；srcset"；

我不能得到正确的信息，或者在这个问题上有很多肮脏的信息。我花了一段时间才理解

srcset

和

大小之间的关系，我能够通过反复试验来学习


根据假设，如果我们使用这种技术，浏览器总是更喜欢它将使用的图像
允许我们选择要使用的图像和响应图像

如果到目前为止我所理解的有任何错误，请改正。因为我们还没有开始“视网膜”

让我们继续“
srcset
”


如果我们解释上述场景，


将图像设置为全尺寸，直到宽度800px
当宽度超过800px时，强制图像保持在800px
当所有这些都发生时，从我们定义的“
srcset
”中选择最合适的图像

如果到目前为止我还缺少信息，请更正

视网膜呢？
在上面的场景中，浏览器首选最合适的图像。但是它对视网膜显示敏感吗

好了，现在有一个新的例子，



在上面的示例中，我们定义了两个图像，它们分别为1000和500px宽

如果我们解释上述场景，


将图像设置为全尺寸，直到宽度500px
当宽度超过500px时，强制图像保持在500px
当所有这些都发生时，从我们定义的“
srcset
”中选择最合适的图像
Q:在它更喜欢500px的情况下，它是否能够自动选择“1000px”，这是与此等效的“视网膜”？
Q:还是我们需要通过“
srcset
”将其定义为“
/1000x1000.jpg 500w 2x
”？
Q:最后一个问题，“
750x750.jpg 500w 1.5x
”，为什么没有人使用这个命令？据我所知，安卓设备的比例为“
1.5:1
”。但在每个示例/指南中，我看到它仅设置为“
2x
”

我觉得你的假设基本上是正确的（不确定材料的缺乏）

尽管有几点值得一提：


同时使用多个尺寸描述符是无效的
/1000x1000.jpg 1000w 2x
。通过HTML验证程序运行时，您会得到：

错误：错误值。/1000x1000.jpg 1000w 2x用于元素img上的属性srcset：应为单个描述符，但在…0.jpg 1000w 2x处发现无关的描述符2x


将像素密度（1x、2x、3x）与“大小”属性一起使用是无效的。所以它要么是不同分辨率的相同图像，要么是宽度+大小：

  <img srcset="./500x500.jpg, ./1000x1000.jpg 2x" src="./500x500.jpg" />
  <img srcset="./500x500.jpg 500w, ./1000x1000.jpg 1000w" sizes="(max-width:500px) 100vw, 500px" />




关于你的问题,

Q：在它应该更喜欢500px的情况下，它是否能够自动选择“1000px”，这是与此等效的“视网膜”？

对。在您的示例中，它将在@2x显示器上自动使用1000px图像

Q：或者我们需要通过“srcset”将其定义为“/1000x1000.jpg 500w 2x”？

这不是有效的HTML

Q：最后一个问题，“750x750.jpg500w1.5x”，为什么没有人使用这个命令？据我所知，安卓设备的比例为“1.5:1”。但我发现在每个示例/指南中，它仅设置为“2x”。

如前所述，使用这两个描述符无效。使用1.5x作为可能的图像密度之一是有效的。本文件中甚至列出了1.5x的示例


您还可以通过查看开发人员工具中的“网络”选项卡进行实验，或者使用JS
document.querySelector（'img'）.currentSrc
检查实际请求的图像。此外，上面提供的MDN文章似乎很有用，通过一个实例运行一些示例。
回答了每个问题。谢谢你给我时间。
  src: The source location (URL) of the image file. 
  alt: The alternate text.