我正在使用此 html 实现带有后备图像的 webp 图像：
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.png" width="500" height="500" loading="eager" alt="text">
</picture>
在 Chrome 检查器的网络选项卡中，我可以看到浏览器正在加载后备图像。最终结果是页面大小增加，因为正在加载 webp 和后备 png/jpg 图像。当我在 GTMetrix 上运行页面速度测试时，报告还显示正在加载回退图像并且分数越来越低，这是我的客户讨厌的。
有没有办法实现仅在浏览器不支持 webp 时才加载的后备图像？
我已经做了很多搜索，但我似乎无法在任何地方找到答案。每个关于实施 webp 的指南都说要使用我正在使用的相同 HTML，并且没有说任何关于加载后备图像并导致性能问题的信息。
所以我用 javascript 做了一些奇怪的事情来在页面上加载图像。其中一部分是创建一个图像对象，然后我将其作为图片元素中的后备图像输出到页面。显然，当你在 js 中创建一个 Image 对象时，它会自动加载到 DOM 中。我删除了 Image 对象，用 HTML 字符串替换它，问题就解决了。
换句话说，浏览器不会在 .
中加载后备图像