到目前为止,我们大多数人都知道,图像优化非常重要,因为它在 WordPress 网站的总加载时间中起着很大的作用。今天,我们想与你分享如何将 Google 的 WebP 文件集成到 WordPress 网站中的简便方法。一些用户看到图像文件的大小减少了 70% 以上!

如果你不熟悉 WebP,它是Web性能团队在 Google 上创建的一种图像文件格式,旨在创建更小,更快的图像。它于 2010 年首次发布,具有有损和无损压缩方法。图像根据其使用的MIME类型从 Web 服务器传递到Web浏览器 image/webp。

WebP 为什么如此重要?根据 httparchive 的资料,截至 2016 年 8 月,图像占平均网页重量的 64% 以上。通常,它比 CSS,JS 和 HTML 的总和还多。因此,选择健壮的图像优化方法和图像格式(例如 WebP)至关重要,这样你才能最大程度地减少页面权重。通常,页面越小,加载速度越快。由于页面速度是排名因素,因此,这不仅会使你的访问者满意,还会对 SEO 有好处。

WebP 支持

现在,尽管 WebP 非常令人兴奋,但提及浏览器支持也很重要。目前,并非所有现代浏览器都支持 WebP。根据 caniuse 的说法,Chrome 23 +,Opera 39+,所有版本的 Opera mini,Android 浏览器 4.3+ 和 Chrome for Android 当前支持 WebP。

WebP 格式在各种浏览器中的兼容性

根据 W3Schools 的数据,Chrome 在浏览器市场上的垄断地位略高于 70%。但是,不仅要将市场份额作为可靠的证明,还应查看你自己的访问者的数据并查看他们使用的浏览器,因为不同的浏览器可能会有所不同。你可能会对统计数据的偏斜感到惊讶。在 Google Analytics(分析)的“受众群体”下,你可以单击“浏览器和操作系统”,查看人们访问你的网站时正在使用的浏览器。我们拉了一个随机网站,如下所示,有 67% 的访客来自 Chrome,另有 1% 的访客来自 Opera。因此,这些人中有 68% 可以查看WebP图像文件格式并从中受益!

如何在 WordPress 中使用 WebP 文件

在今天的示例中,我们将结合使用两个不同的 WordPress 插件来启动 WebP 并在 WordPress 中运行。这些由团队在 KeyCDN(全球内容交付网络( CDN ))上创建和开发。

  1. [高级] Optimus 图像优化器:适用于 WordPress 的无损图像压缩插件,可将图像转换为 WebP
  2. [免费] WordPress 缓存启动器:缓存插件,可让你向支持的浏览器提供 WebP 服务

Optimus 图像优化器

你可以从 WordPress 信息库,optimus.io 或插件仪表板中下载 Optimus Image Optimizer。注意:如果要将图像转换为 WebP,则确实需要高级许可证。安装后,你可以在插件设置中启用“创建 WebP 文件”。

启用 WebP 后,这实际上将为转换后的所有内容创建一个附加图像。因此,如果你上载 PNG 文件或 JPG,则现在还会有 .webp 版本的图片。请记住,仍然需要 PNG / JPG,因为它们仍可用于不受支持的浏览器。Optimus 进行无损压缩,因此你的 PNG 和 JPG 也会被压缩。

创建好的 WebP 文件

WordPress 缓存启动器

因此,既然你已经拥有 WebP 图像,则需要一种方法来告诉 WordPress 将 WebP 图像提供给受支持的浏览器,并将 PNG / JPG 提供给其他浏览器。这可以通过免费的WordPress Cache Enabler插件来完成。你可以从 WordPress 存储库下载插件, 也可以从插件仪表板中安装插件。安装后,你可以在插件设置中启用“创建其他 WebP 缓存版本”。

启用该选项后,将创建页面的其他缓存 WebP 版本。

JPG 与 WebP 的比较

我们对 JPG 和 WebP 进行了比较,以显示你可以实现的差异。

文件名 原始JPG 压缩JPG WEBP格式 尺寸差异%
jpg-to-webp-1.jpg 758 KB 685 KB 109 KB 86%
jpg-to-webp-2.jpg 599 KB 529 KB 58.8 KB 90%
jpg-to-webp-3.jpg 960 KB 881 KB 200 KB 79%
jpg-to-webp-4.jpg 862 KB 791 KB 146 KB 83%
jpg-to-webp-5.jpg 960 KB 877 KB 71.7 KB 93%

PNG 到 WebP 的比较

同样,我们还对 PNG 和 WebP 进行了比较,以显示你可以实现的差异。

文件名 原始PNG 压缩的PNG WebP格式 尺寸差异%
png-to-webp-1.png 44 KB 34 KB 30 KB 32%
png-to-webp-2.png 46 KB 35 KB 33 KB 28%
png-to-webp-3.png 43 KB 31 KB 25 KB 42%
png-to-webp-4.png 30 KB 24 KB 18 KB 40%
png-to-webp-5.png 15 KB 11 KB 8 KB 47%
png-to-webp-6.png 34 KB 24 KB 18 KB 47%
png-to-webp-7.png 15 KB 13 KB 8 KB 47%
png-to-webp-8.png 63 KB 47 KB 44 KB 30%
png-to-webp-9.png 48 KB 36 KB 33 KB 31%
png-to-webp-10.png 17 KB 14 KB 11 KB 35%
png-to-webp-11.png 18 KB 13 KB 9 KB 50%
png-to-webp-12.png 61 KB 45 KB 39 KB 36%
png-to-webp-13.png 32 KB 25 KB 21 KB 35%
png-to-webp-14.png 26 KB 21 KB 17 KB 35%
png-to-webp-15.png 14 KB 12 KB 9 KB 36%
png-to-webp-16.png 36 KB 27 KB 24 KB 33%
png-to-webp-17.png 14 KB 12 KB 8 KB 43%
png-to-webp-18.png 21 KB 18 KB 13 KB 38%
png-to-webp-19.png 42 KB 30 KB 27 KB 36%
png-to-webp-20.png 23 KB 20 KB 18 KB 22%
如你所见,WebP 在你的 WordPress 网站上非常容易实现,并且你可以实现大大减小的图像文件大小!没有可以与 WebP 节省相比的图像压缩。如果你正在寻找一种更好的方法来加快 WordPress 的速度,WebP 可能是一个很好的解决方案。