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，然后找不到它，因为它的名称错误。但是随后他们不再再次检查后备图片，而只使用“类型”或“媒体”来进行检查。

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

2 个答案: