Question

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

methods: {
    onBlurNumber(suffix) {
      this["visible" + suffix] = false;
      this["temp" + suffix] = this["amount" + suffix];
      this["amount" + suffix] = this.thousandSeprator(this["amount" + suffix]);
    },

肯定是在获取文件，它们没有显示为未找到。当我不包括最后一行时，什么都没有显示。这些文件确实可以正确转换为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中，您仍然会看到玫瑰。

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

1 个答案: