提供下一代格式的图像

Question

由于以下原因，我在Google Page Speed见解中的排名受到严厉惩罚：

谷歌的帮助页面上的“服务在下一代格式的图片”的详细信息在这里。

然而，根据这个，这个和这个这些格式的支持非常少的浏览器。

在这种情况下您要做什么？什么

Answer 1

您可以使用该<picture>元素将WebP图像传递给支持该功能的浏览器的用户，而对于不支持该功能的用户则使用JPEG或PNG。使用<picture>元素而不是其他后备方法的优点是，不支持该元素的浏览器将后备到<img>标签中定义的任何源。

<picture>
  <source srcset="img/yourImage.webp" type="image/webp">
  <source srcset="img/yourImage.jpg" type="image/jpeg"> 
  <img src="img/yourImage.jpg" alt="Your image">
</picture>

这是将源图像转换为WebP的方法。

如果您使用的是WordPress，则有一些插件会自动从您的媒体库生成WebP图像，并包含后备功能。我唯一使用过的是WebP Express，但是当客户被警告他们的100/100 PageSpeed Insight得分在Lighthouse推出后一整夜降低到30分时，它为我提供了很好的服务。

对于Google来说，这确实是另一种推广专有技术的方法，但是与其他“下一代”格式相比， WebP压缩是非常令人印象深刻的。