如何在 WordPress 上使用 WebP 图片

如何在 WordPress 上使用 WebP 图片

如果你想加速你的 WordPress 站点,减少你的图片文件大小提供了一个显著的投资回报。平均而言,图片占网页文件大小的一半左右,所以即使是微小的改进也能产生巨大的结果。WebP 可以极大地帮助你!

WebP 是一种现代的图像格式,可以帮助你减少图像的大小,而不改变它们的外观。平均来说,学习如何将图像转换为 WebP 可以将其文件大小缩小 25-35%,而质量没有明显的损失。

大多数现代浏览器和 WordPress 5.8 + 都支持 WebP。在本文中,我们将深入研究这种令人兴奋的新图像格式,并向你展示如何利用它的惊人之处。

WebP 是什么?

那么,什么是 WebP 文件?简而言之,WebP 是谷歌开发的一种图像格式,用来比当时流行的图像格式更好地优化图像。例如,你有像 JPEG 或 JPG 和 PNG 这样的图像格式。

注意:看看不同的图像文件类型如何影响你的网站的速度。

WebP 专注于提供相同的图像文件,只是文件大小更小。通过减少图像文件的大小,你仍然可以给你的网站的访问者相同的体验,但你的网站将更快地加载。

例如,在谷歌的 WebP 压缩研究中,谷歌发现一个 WebP 图像文件平均是:

  • 比 JPEG 图像小 25-34%。
  • 比 PNG 图片小 26%。

这就是为什么如果你通过 Pagesspeed Insights 运行你的网站,其中一个建议是以 WebP 这样的次世代格式提供图像:

PageSpeed Insights 建议使用 WebP 图像

那么谷歌的 WebP 格式是如何实现这些文件大小的减少的呢?

首先,它支持有损压缩和无损压缩,所以确切的减少将取决于你使用有损压缩还是无损压缩。

使用有损压缩,WebP 使用一种叫做 “预测编码” 的东西来降低文件大小。预测编码使用图像中相邻像素的值来预测值,然后只对差异进行编码。它基于 VP8 关键帧编码。

无损 WebP 使用了一组由 WebP 团队开发的更为复杂的方法。

如果你想详细了解 WebP 压缩技术,那么本文是一个很好的起点。

哪些浏览器支持 WebP?

为了让 WebP 图像工作,访问者的 web 浏览器需要支持它们。不幸的是,虽然浏览器支持增长了很多,但 WebP 兼容性仍然不是通用的。

WebP 图像受到流行浏览器的支持,例如:

  • Chrome (桌面和移动)
  • Firefox (桌面版和移动版)
  • Microsoft Edge
  • iOS 和 macOS Safari (macOS 11 Big Sur 和更高版本)
  • Opera (桌面和移动)

在我们写这篇文章的时候,Safari 只支持部分 WebP 图片。

Inter Explorer 也缺乏 WebP 支持 (但 Edge 支持 WebP,因为它是基于 Chromium 的)。然而,IE 的使用已经缩减到不到互联网用户总数的 1%。这对网络上的每个人来说都是一个福音!

总的来说,大约 95% 的互联网用户使用支持 WebP 的浏览器。因此,虽然它确实得到了大多数人的支持,但 5% 只是一个小障碍,特别是当它是使用较旧 macOS 版本的 Safari 用户时。在我们下面的 WordPress WebP 教程中,我们将向你展示如何处理这个问题,从而让你所有的访问者都有一个很好的体验。

WebP vs JPG vs PNG 大小比较

根据谷歌的测试,WebP 图像是:

  • 比 JPEG 图片小 25-34%。
  • 比类似的 PNG 图片小 26%。

两种测试都基于 11000 多张图像,包括

  • 著名的莱娜形象
  • 24 张图片来自柯达真彩图像套装
  • 来自 Tecnick.com 的 100 张图片
  • 从谷歌图像搜索中随机抽样 11000 + 图像

如何在 WordPress 上使用 WebP 图片

从 WordPress 5.8 开始,你将能够像使用 JPEG, PNG 和 GIF 格式一样使用 WebP 图像格式。只需上传你的图像到你的媒体库,并包括在你的内容。因为 WordPress 5.8 + 默认支持 WebP 格式,所以你不需要安装第三方插件来上传 WebP 图片。对于大多数常见的用例,这应该足够了。

要立即开始,你可以参考我们关于在 WordPress 5.8 + 中使用 WebP 图像的快速入门。我们建议你浏览一下关于 WordPress 中 WebP 支持的说明。

然而,大约 5% 的人 (主要是旧 macOS 上的 Safari 用户) 使用的浏览器不支持 WebP。如果你转换 WebP 图像并直接在你的内容中使用它们,这些访问者将无法看到你的图像,这将破坏他们的浏览体验。

此外,生成 WebP 图像不像获取 JPG/JPEG 图像那样简单,后者是大多数相机、智能手机和在线图像库的默认图像文件格式。WordPress 目前还不支持自动将图像转换为 WebP 格式。

不要烦恼!有一个解决方案。

你可以使用 WordPress 插件将原始图片转换成 WebP 格式,如果访问者的浏览器不支持 WebP,也可以提供原始图片作为备用。

例如,如果你上传一个 JPEG 文件到你的网站,插件将:

将 JPEG 文件转换为 WebP,并为 Chrome, Firefox, Edge 等提供 WebP 版本。 将原始的 JPEG 文件显示给使用 Safari (在较旧的 macOS 版本上) 和其他不支持 WebP 的浏览器浏览的访问者。 这样,每个人都能看到你的形象,每个人都能以最快的速度获得体验。

下面,我们将介绍一些最好的 WebP WordPress 插件,所有这些插件都与 Kinsta 和 Kinsta CDN 一起工作。

ShortPixel

ShortPixel 是一个流行的 WordPress 图像优化插件,可以帮助你自动调整大小和压缩你上传到你的 WordPress 网站的图像。

作为其功能列表的一部分,ShortPixel 还可以帮助你自动将图像转换为 WebP,并将这些图像提供给支持它的浏览器。

ShortPixel 有一个有限的免费计划,每月可以免费优化 100 张图片。付费计划起价为每月 4.99 美元,最多可获得 5000 个图像 / 积分,或一次性支付 9.99 美元,可获得 10000 个积分。

ShortPixel 将你优化的每个 WordPress 图片大小计算为一个积分。因此,如果你想优化多个图像缩略图大小,一个图像可以使用无数信用。图片没有文件大小限制。

你可以在无限的网站上散布你的 ShortPixel 积分 - 没有每个网站的限制 (和你所有的网站可以使用相同的 ShortPixel 帐户)。

要使用 ShortPixel 在 WordPress 上提供 WebP 图像,你需要从 WordPress.org 安装插件并添加你的 API 密钥 (你可以通过注册一个免费的 ShortPixel 帐户获得)。

在 General 选项卡中,你可以设置图像优化的基本设置。例如,使用何种压缩级别和是否调整图像大小:

要启用 WebP 图像,转到高级选项卡,然后:

  • 选中 WebP 图像的复选框
  • 选中交付 WebP 版本的复选框…(选中第一个复选框后出现)
  • 选择使用<picture>标记语法的单选按钮 (选中前一个框后出现)
  • 保留默认的仅通过 WordPress 钩子选择

如何在短像素中启用 WordPress WebP 图像

然后,保存你的更改。

Imagify

Imagify 是一个流行的图像优化插件,与 WP Rocket (与 Kinsta 一起工作的缓存插件之一) 出自同一开发人员之手。

它可以自动压缩和调整你上传到 WordPress 网站的图片。然后,它还可以帮助你将它们转换为 WebP,并将这些版本提供给支持它的浏览器的访问者。

在特征上,ShortPixel 和 Imagify 有很多相似之处。最显著的区别在于定价。然而,ShortPixel 收费你基于图像没有大小限制的每张图像,Imagify 收费你基于整体文件大小,没有图像限制。

因此,如果你需要优化大量的大图片,ShortPixel 的方法可能更便宜。但是如果你需要优化大量的小图像,Imagify 的方法可能更实惠。

Imagify 有一个有限的免费层,允许每月 25 MB 的优化。之后,付费计划从每月 4.99 美元购买 1gb 或 9.99 美元一次性购买 1gb。

像 ShortPixel,你可以扩展你的帐户限制在无限的网站。

要使用 Imagify 来提供 WordPress WebP 图片,你需要从 WordPress.org 安装插件,并添加你的 API 密钥开始。

一旦你激活了插件,你可以使用常规设置框来选择你的压缩级别。

要启用 WebP 图像,请向下滚动到优化部分并找到 WebP 格式部分:

  • 选中 “创建图像的 webp 版本” 复选框
  • 选中复选框以 webp 格式显示图像…
  • 选择单选按钮来使用<picture>标签

如何在 Imagify 中启用 WordPress WebP 图像

Optimole

Optimole 是一个 WordPress 图像优化插件,它的运行方式与 Imagify 和 ShortPixel 略有不同。Optimole 可以自动压缩和调整图像大小。然而,它还有另外两个显著的特点:

它可以通过它的 CDN (由 Amazon CloudFront 提供支持) 为你提供图像。 它提供实时的自适应图像,Optimole 将为每个访问者提供最佳大小的图像。例如,在小屏幕上浏览的人得到的图像分辨率比在视网膜屏幕上浏览的人要低。 这种方法类似于其他实时优化 / 操作服务,如 Cloudinary, imgix, KeyCDN 图像处理等。

Optimole 还可以将 WebP 图像提供给浏览器支持的访问者,作为实时图像优化的一部分。

Optimole 有一个有限的免费计划,每月可以处理大约 5000 名访问者的图片。之后,2.5 万名游客的付费计划开始于每月 19 美元。

首先,你需要从 WordPress.org 安装插件,并使用 API 密钥激活它 (你可以通过注册一个免费的 Optimole 帐户获得)。

一旦你这样做,Optimole 将开始自动优化你的图像,并通过它的 CDN 交付他们。默认情况下 WebP 支持是开启的,所以不需要手动启用它。

要配置其他设置,如压缩级别和缩放行为,你可以点击媒体→Optimole→设置:

Optimole 默认启用 WordPress WebP 图像

总结

你的 WordPress 网站的图片占了平均页面文件大小的很大一部分。如果你能找到减小图像大小的方法,你就可以在不损害用户体验的情况下加快站点的速度。WebP 是一种现代的图像格式,与 JPEG 或 PNG 文件相比,它的文件大小减少了约 25%。

大约 95% 的互联网用户已经在使用支持 WebP 的浏览器。WordPress 5.8 + 版本现在也支持 WebP。所以你没有理由不使用它。

然而,少数浏览器,特别是旧 macOS 版本上的 Safari,仍然不提供 WebP 支持。因此,你还不能为所有访问者提供 WebP 图像。为了解决这个问题,你可以使用 WordPress 插件将图片转换为 WebP,并为浏览器支持的访问者提供 WebP 版本,而对浏览器不支持的访问者使用原始图片。