Webp 和 <picture><source 在 chrome 上对我不起作用

Question

我遇到了一个问题，我似乎无法找出问题所在，我有：

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

在 chrome 上，它只是默认为 png 徽标。

如果我将鼠标悬停在检查器中的 link 上，它会显示 webp 图像。

如果我在新选项卡中打开 webp 图片 link，它会加载文件。

我的headersreturn:

image/webp,image/apng,image/,/*;q=0.8

如果我将 source srcset 更改为 img srcset - 将显示 webp 文件。

Chrome: 70.0.3538.110

在 MAMP Pro 上本地测试，不显示。

Answer 1

WEBP是一棵树。 PNG 是一朵玫瑰。您使用了以下代码...

<picture>
  <source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/4.sm.webp">
  <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
</picture>

根据 this source 你应该重复来源，像这样：

<picture>
  <source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
  <source srcset="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
  <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>

当我运行这些脚本在 FF 和 Chrome 它们显示一棵树，从而显示 WEBP 图像。你看到了什么？

Answer 2

看完这个问答，我还是有点迷糊，所以我想补充一下：当你在你的图像上使用Chrome检查工具时，它仍然会突出显示与其中的 <img> 一致，这使得似乎正在加载更大的文件。但是，正如您在给出的示例中看到的那样，WEBP 实际上是正在加载和显示在屏幕上的内容，因为这两个片段都没有显示找到的玫瑰照片 here。

Webp 和 <picture><source 在 chrome 上对我不起作用

Webp and <picture><source will not work for me on chrome

html

webp