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

问题描述

当WebP文件可用时，Chrome默认为jpg/png文件。我通过灯塔运行了一个审计网站，它建议适当调整图片大小，并使用"下一代"格式。在将文件更改为WebP(并创建多种大小的文件)后，我将文件添加到一个图片标签下。当我现在打开开发人员工具时，LighTower现在给我开了绿灯，允许我使用下一代格式和多种文件大小，但默认只使用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中打开它们。

推荐答案

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

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

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<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>