当 Webp 可用时，Chrome 默认为 JPG。为什么？

Question

当 webp 文件可用时，Chrome 默认使用 jpg/png 文件。我通过 Lighthouse 运行了一个网站审核，它建议​​正确调整图像大小并使用“下一代”格式。将文件更改为 webp（并创建多种大小的文件）后，我在图片标签下添加了文件。当我现在打开开发人员工具时，Lighthouse 现在为我提供了下一代格式和多种文件大小的绿灯，但仅默认为 jpg/png 格式。

<picture>
   <source srcset="imgs/img_480w.webp" media="(max-width:480px)" type="image/webp">
   <source srcset="img/img_280w.webp" media="(max-width:280px)" type="image/webp">
  <source srcset="imgs/imgs.jpg" type="image/jpeg">
  <!-- always defaults to here --> <img src="grid_img/LoW_grid.jpg" alt="Image" class="tm-img"> 

肯定是在获取文件，它们没有显示为未找到。当我不包括最后一行时，什么也没有出现。这些文件确实可以正确转换为 webp 格式，因为我可以在 Chrome 中打开它们。

Answer 1

seems like 你的代码是正确的。但是，您对正在执行的规则/行的假设是错误的。 Chrome 不喜欢显示 JPG 图片。

为简单起见，我删除了第二行（最大宽度：280）。如果您查看下面的代码，您会看到代码默认为第二个。这可以通过以下事实来解释：这是对当前屏幕宽度有效并且可以显示的第一张图像（由于浏览器对 webp 的支持）。

为了说明这一点，我用树的图像替换了前两个图像。在第三行中，我用玫瑰的图像替换了图像。

<picture>
  <source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" media="(max-width:480px)" type="image/webp">
  <source srcset="https://www.gstatic.com/webp/gallery/4.sm.jpg" type="image/jpg">
  <!-- always defaults to here --> <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>

当你删除第二行时......你会得到这个：

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

当您在第二个代码块中缩小窗口时，图像将被交换到 Chrome 中的 webp 树。在non-supported browsers，你仍然会看到玫瑰。