html - 正确使用 "srcset"敏感视网膜图像

Question

我无法获得正确的信息，或者关于这个主题有很多肮脏的信息。我花了一段时间才明白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" />

如果我们解释上述场景，

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

If I am lacking information up to this point, please correct it.

视网膜怎么样？

在上面的场景中，浏览器优先选择最合适的图像。但它对“视网膜”显示屏敏感吗？

现在是一个新的例子，

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

在上面的示例中，我们定义了两个 1000 且宽度恰好为 500px 的图像。

如果我们解释上述场景，

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

Answer 1

你的假设对我来说基本上是正确的(不确定是否缺乏 Material )。

尽管有几点值得一提:

• 同时使用多个尺寸描述符是无效的./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”。但我发现每个示例/指南中它仅设置为“2x”。

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

---

您还可以通过查看开发人员工具中的“网络”选项卡自行进行实验，或者使用 JS document.querySelector('img').currentSrc 检查实际请求了哪些图像。此外，上面提供的 MDN 文章似乎很有用，并通过 HTML Validator 运行一些示例。 .