正确使用具有 "srcset" 的敏感视网膜图像
Correct use of sensitive retinal images with "srcset"
我无法获得正确的信息，或者关于这个主题有很多肮脏的信息。我花了一段时间才理解 srcset 和 sizes 之间的关系，我能够通过反复试验来学习。
- 根据假设，如果我们使用这项技术，浏览器总是更喜欢它将使用的图像。
<picture> 允许我们选择要使用的图像以及响应图像。
If there is anything wrong with what I have understood so far, please correct it. Because we haven't started "Retina" yet.
让我们继续“srcset”
<img srcset="./1000x1000.jpg 1000w, ./800x800.jpg 800w" sizes="(max-width:800px) 100vw, 800px" />
如果我们解读上面的场景，
- 将图像设置为完整尺寸，直到宽度为 800px。
- 当宽度超过800px.
时，强制图像保持在800px
- 在这一切发生的同时，从我们定义的“
srcset”中选择最合适的图像。
If I am lacking information up to this point, please correct it.
视网膜呢？
在上面的场景中，浏览器选择了最合适的图片。但是它对“Retina”显示器敏感吗？
好的，现在是一个新的例子，
<img srcset="./1000x1000.jpg 1000w, ./500x500.jpg 500w" sizes="(max-width:500px) 100vw, 500px" />
在上面的例子中，我们定义了两个 1000 的图像，宽度正好是 500px。
如果我们解读上面的场景，
- 将图像设置为全尺寸，直到宽度为 500px。
- 当宽度超过 500px.
时强制图像保持在 500px
- 在这一切发生的同时，从我们定义的“
srcset”中选择最合适的图像。
- 问： 在它应该更喜欢 500px 的情况下，它是否能够自动选择“1000px”，即与此等效的“视网膜”？
- 问： 还是需要通过“
srcset”定义为“./1000x1000.jpg 500w 2x”？
- 问： 最后一个问题，“
750x750.jpg 500w 1.5x”，为什么没有人使用这个命令？据我所知，Android 设备 的比率为“1.5:1”。但我看到它在每个 example/guide. 中仅设置为“2x”
你的假设对我来说大部分是正确的（不确定是否缺少材料）。
虽然有几点值得一提：
同时使用多个尺寸描述符是无效的./1000x1000.jpg 1000w 2x。当 运行 通过 HTML 验证器时，你会得到：
Error: Bad value ./1000x1000.jpg 1000w 2x for attribute srcset on element img: Expected single descriptor but found extraneous descriptor 2x at …0.jpg 1000w 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" />
当通过 HTML 验证器 运行 混合这些时，你会得到：
Error: Bad value ./500x500.jpg 1x, ./1000x1000.jpg 2x for attribute srcset on element img: Expected width descriptor but found 1x at …500x500.jpg 1x,. (When the sizes attribute is present, all image candidate strings must specify a width.)
始终将 src 属性添加到图像。不支持 srcset 的旧版浏览器将求助于使用 src。 HTML 验证器也会给出一个错误。根据规范，img 元素有两个必需的属性，其余的是可选的：
src: The source location (URL) of the image file.
alt: The alternate text.
关于您的问题，
问：在它应该更喜欢 500px 的情况下，它是否能够自动选择“1000px”，即与此等效的“视网膜”？
是的。在您的示例中，它会在@2x 显示器上自动使用 1000px 图像。
问：还是需要通过“srcset”将其定义为“./1000x1000.jpg 500w 2x”？
无效 HTML。
问：最后一个问题，“750x750.jpg 500w 1.5x”，为什么没有人使用这个命令？据我所知，Android 设备的比例为“1.5:1”。但我看到它在每个 example/guide.
中仅设置为“2x”
如前所述，同时使用这两个描述符是无效的。使用 1.5x 作为可能的图像密度之一是有效的。 MDN Web Docs article
中甚至还列出了 1.5x 的示例
您还可以通过查看开发人员工具中的“网络”选项卡来自己进行试验，或使用 JS document.querySelector('img').currentSrc 检查实际请求了哪些图像。此外，上面提供的 MDN 文章似乎很有用，并且 运行 您的一些示例通过 HTML Validator.
我无法获得正确的信息，或者关于这个主题有很多肮脏的信息。我花了一段时间才理解 srcset 和 sizes 之间的关系，我能够通过反复试验来学习。
- 根据假设，如果我们使用这项技术，浏览器总是更喜欢它将使用的图像。
<picture>允许我们选择要使用的图像以及响应图像。
If there is anything wrong with what I have understood so far, please correct it. Because we haven't started "Retina" yet.
让我们继续“srcset”
<img srcset="./1000x1000.jpg 1000w, ./800x800.jpg 800w" sizes="(max-width:800px) 100vw, 800px" />
如果我们解读上面的场景，
- 将图像设置为完整尺寸，直到宽度为 800px。
- 当宽度超过800px. 时，强制图像保持在800px
- 在这一切发生的同时，从我们定义的“
srcset”中选择最合适的图像。
If I am lacking information up to this point, please correct it.
视网膜呢？
在上面的场景中，浏览器选择了最合适的图片。但是它对“Retina”显示器敏感吗？
好的，现在是一个新的例子，
<img srcset="./1000x1000.jpg 1000w, ./500x500.jpg 500w" sizes="(max-width:500px) 100vw, 500px" />
在上面的例子中，我们定义了两个 1000 的图像，宽度正好是 500px。
如果我们解读上面的场景，
- 将图像设置为全尺寸，直到宽度为 500px。
- 当宽度超过 500px. 时强制图像保持在 500px
- 在这一切发生的同时，从我们定义的“
srcset”中选择最合适的图像。 - 问： 在它应该更喜欢 500px 的情况下，它是否能够自动选择“1000px”，即与此等效的“视网膜”？
- 问： 还是需要通过“
srcset”定义为“./1000x1000.jpg 500w 2x”？ - 问： 最后一个问题，“
750x750.jpg 500w 1.5x”，为什么没有人使用这个命令？据我所知，Android 设备 的比率为“1.5:1”。但我看到它在每个 example/guide. 中仅设置为“
2x”
你的假设对我来说大部分是正确的（不确定是否缺少材料）。
虽然有几点值得一提：
同时使用多个尺寸描述符是无效的
./1000x1000.jpg 1000w 2x。当 运行 通过 HTML 验证器时，你会得到：Error: Bad value ./1000x1000.jpg 1000w 2x for attribute srcset on element img: Expected single descriptor but found extraneous descriptor 2x at …0.jpg 1000w 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" />当通过 HTML 验证器 运行 混合这些时，你会得到：
Error: Bad value ./500x500.jpg 1x, ./1000x1000.jpg 2x for attribute srcset on element img: Expected width descriptor but found 1x at …500x500.jpg 1x,. (When the sizes attribute is present, all image candidate strings must specify a width.)
始终将 src 属性添加到图像。不支持 srcset 的旧版浏览器将求助于使用 src。 HTML 验证器也会给出一个错误。根据规范，img 元素有两个必需的属性，其余的是可选的：
src: The source location (URL) of the image file. alt: The alternate text.
关于您的问题，
问：在它应该更喜欢 500px 的情况下，它是否能够自动选择“1000px”，即与此等效的“视网膜”？
是的。在您的示例中，它会在@2x 显示器上自动使用 1000px 图像。
问：还是需要通过“srcset”将其定义为“./1000x1000.jpg 500w 2x”？
无效 HTML。
问：最后一个问题，“750x750.jpg 500w 1.5x”，为什么没有人使用这个命令？据我所知，Android 设备的比例为“1.5:1”。但我看到它在每个 example/guide.
中仅设置为“2x”如前所述，同时使用这两个描述符是无效的。使用 1.5x 作为可能的图像密度之一是有效的。 MDN Web Docs article
中甚至还列出了 1.5x 的示例您还可以通过查看开发人员工具中的“网络”选项卡来自己进行试验，或使用 JS document.querySelector('img').currentSrc 检查实际请求了哪些图像。此外，上面提供的 MDN 文章似乎很有用，并且 运行 您的一些示例通过 HTML Validator.