Question

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

“以下一代格式提供图像”在Google帮助页面here上的更多信息。

但是，根据this，this和this来看，只有很少的浏览器支持这些格式。

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

Answer 1

您可以使用<picture>元素向支持WebP的浏览器用户提供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>

Here's a method for converting source images to WebP。

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

对于Google来说，这确实是推广另一种专有技术的另一种方式，但是WebP压缩是quite impressive compared to other 'next-gen' formats。

Answer 2

克服此错误的简单方法是将JPG或PNG图像转换为一种优化格式，例如WebP。

您可以通过在运行时转换图像（通过处理对任何图像的请求并将其转换）来做到这一点请按照本教程了解如何操作：https://www.digitalocean.com/community/tutorials/how-to-create-and-serve-webp-images-to-speed-up-your-website 或者，如果您的图像不是动态的，那么最好在设计时通过将图像转换为WebP格式来实现，那么有很多在线转换器，例如： https://webp.enozom.com/

Answer 3

在主要的浏览器都支持这些下一代格式之前，最好继续使用JPG / PNG，因为它们具有广泛的支持。大多数网站的确确实使用JPG和PNG，并且浏览器与下一代技术保持一致需要花费一些时间。

Answer 4

您始终可以使用ImageEngine之类的映像CDN。全面披露我为ImageEngine背后的公司工作。

它充当基于拉的CDN，并且如果最终用户设备支持该格式，它将自动将您的图像转换为WebP或JPEG-2000。它还将自动应用压缩和调整大小，以进一步优化图像内容，但绝对可以提高页面速度。

您可以注册免费试用，并查看如何提高您的Google Page Speed得分。

Answer 5

您可以使用https://www.imagecompress.org/之类的工具来转换当前图像格式，并按照示例更新旧标签https://www.imagecompress.org/examples。

Answer 6

WebP是目前得到更广泛支持的一种，几乎所有主流浏览器（Safari都支持）。

正如在回答之一中提到的那样，您可以使用图片标签加载webp图像，并且在不支持的情况下，它将回退为您选择的任何其他格式。

如果您使用的是背景图片，则可以使用modernizr之类的东西来检测浏览器对功能的支持，并最终得到CSS，如下所示：

my-selector {
    background: url('../images/home-bg.webp') no-repeat scroll center center
}

.no-webp my-selector {
    background: url('../images/home-bg.jpg') no-repeat scroll center center
}

我实际上已经在我的网站上完成了这两项工作，并成功实现了webp格式，我创建了详细的文章来介绍我的操作方式以及所获得的性能提升，您可以在此处查看：Improve your website speed performance using next-gen formats

Answer 7

如果您是wordpress用户，建议您使用“增强型媒体库”插件。它仅允许您直接上传Webp图像，而无需手动配置任何内容。

Answer 8

WebP 格式加载速度更快，消耗的蜂窝数据更少。任何人都可以使用该格式并建议改进 WebP 开源。

在 <picture> 中，属性 <source> 可用于加载可能并非所有浏览器都支持的替代图像文件格式。例如，您可以将 WebP format 中的图像提供给支持它的浏览器，而在其他浏览器上回退到 JPEG：

<picture>
  <source type="image/webp" srcset="images/verz.webp">
  <img src="images/banner.jpg" alt="Banner Image" width="100" height="100">
</picture>

注意：该元素目前在 Chrome 38 中可用。在 Chrome DevTools 中使用屏幕模拟进行尝试。根据 Google 的说法，Chrome 和 Opera 支持 WebP，并为网络上的图像提供更好的有损和无损压缩。 WebP 并不支持所有浏览器。对于其他浏览器，您需要提供备用 PNG 或 JPEG 图片。

如果您的网站使用 WordPress。使用 plugins 会自动将您上传的图片转换为最佳格式。

提供下一代格式的图像

8 个答案: