html - 为什么 Chrome 渲染后备 JPEG/PNG 而不是 WEBP？

Question

我一直在将我正在开发的网站上的一些图像转换为 webp，以优化页面加载时间并在灯塔和所有这些方面得分更高。

我在我的代码中使用了后备，如下所示：

.flex {
  display: flex;
  justify-content: space-around;
  background: #ddd;
  padding: 5px 0;
}

<div class="flex">
  <div>WEBP image:<br> <img src="https://www.gstatic.com/webp/gallery/1.sm.webp" style="height: 80px;" /></div>

  <div>JPG image:<br> <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" style="height: 80px;" /> </div>

  <div>Fallback image (JPG):<br> <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" style="height: 80px;" />
  </div>
</div>

<div>
  Test image:<br>
  <picture>
    <source srcset="https://www.gstatic.com/webp/gallery/1.sm.webp" type="image/webp">
    <source srcset="https://www.gstatic.com/webp/gallery/2.sm.jpg" type="image/jpeg">
    <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
  </picture>
</div>

我显然在 Chrome 上进行测试，因为我知道 Safari 不支持 WEBP，但似乎我的 chrome 总是依赖 jpeg 和 png 文件。当我检查时，我看到 WEBP 在代码中，我可以单击它，它会从服务器打开，所以它就在那里。但是 Chrome 并没有使用它来呈现页面，它会立即使用旧格式。

我一直在努力弄清楚为什么它不起作用-也许我错误地使用了图片标签，等等...-但没有解决方案。

最后，我在布局中链接了Modernizer，发现它没有将任何 webp 类插入到 html 元素中。所以我在它下面添加了一个简短的脚本来看看发生了什么，如下所示：

<script>
    if (Modernizr.webp) {
        console.log('webp supported');
    } else {
        console.log('webp not supported');
    }
</script>

控制台记录了 else webp not supported。

在这一点上，我迷路了。我正在尝试在线查找，但我没有看到 Chrome 放弃 WEBP 支持或其他任何内容。我唯一的猜测是我省略了明显的声明或其他东西。

标签： htmlcsswebp