图片标签中的后备图像无法正常工作

Question

我试图在html中使用<picture>标签加载“webp”图像以加快加载时间。这适用于加载webp图像：

<picture>
<source srcset="img/imageXYZ.webp" type="image/webp">
<img src="img/imageXYZ.png">
</picture>

这适用于加载png图像：

<img src="img/imageXYZ.png">

但Firefox，Chrome和Edge无法加载后备图像。我通过将webp图像的名称更改为错误的名称来测试，如下例所示：

<picture>
<source srcset="img/imageXYZZZ.webp" type="image/webp">
<img src="img/imageXYZ.png">
</picture>

它只显示了“缺失的图像符号”，就像你在这里截图中看到的那样：Screenshot

编辑：为了让测试工作，Rodrigo Faria指出了正确的答案。有关我的问题的更具体的答案，请参阅我的答案。

Answer 1

当没有源与属性“media”匹配时，使用后备图像。

为了您的测试，尝试这样做：

<picture>
   <source srcset="img/imageXYZ.webp" type="image/webp" media="(min-width: 2800px)">
   <img src="img/imageXYZ.png">
</picture>

您将看到媒体不匹配，将使用“img”！

看看这个描述：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Answer 2

错误在我身边：后备图像确实有效，例如png图像加载到Safari上，因为Safari不支持webp图像。当你给webp图像一个错误的名字，就像我用srcset="img/imageXYZZZ.webp"做的那样，后备img不起作用。原因是当浏览器不支持该类型（type="image/webp"）时加载后备图像。 Firefox，Chrome和Edge可以支持该类型，并尝试加载webp img然后找不到它，因为它被命名为错误。但是他们不再检查后备图像，他们只用“类型”或“媒体”来做。