如何在图片标签中显示 webp 图像？

Question

这个图片标签有什么问题？

<picture>
    <source type="image/webp" srcset="https://media3.giphy.com/media/8FNlmNPDTo2wE/200.webp">
    <source type="video/mp4" srcset="https://media3.giphy.com/media/8FNlmNPDTo2wE/200.mp4">
    <img src="https://media3.giphy.com/media/8FNlmNPDTo2wE/200.gif" width="356" height="200" alt="me-5sf-fickledavid-8FNlmNPDTo2wE">
</picture>

Chrome 应该选择 webp 图像，但它总是使用带有 gif 的 img。 如果我删除 img 标签，Chrome 什么也不显示。

这是我作为演示制作的笔https://codepen.io/maxim-palenov/pen/oNvarZY 。

Answer 1

这完全没有问题。 它按预期工作。 在 img 标签中，它不会替换 webp 图像。

这是你必须做的。

• 将 gif 图像重命名为某些已断开的链接。 尽管如此，它将继续显示图像。
• 在上面之后，如果你重命名 webp 图像链接，现在你会看到图像被破坏了。