使用 WebP 格式的图片为 WordPress 网站加速

图片[1]-使用 WebP 格式的图片为 WordPress 网站加速 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

SiteGround 注册无法接收短信验证码? 查看问题的解决方法

WordPress 网站打开速度高度依赖于图片的大小,因为图片通常占据网页大小的50%。因此,如果网站使用未经优化的大型图片,就可能会降低网站打开速度,进而影响SEO性能。

减小图片尺寸并对其进行优化不仅可以帮助我们节省空间,而且还可以显着提高网站加载速度。这就是Google 开发 WebP 格式图片的目的。目前已经有许多网站采用了WebP格式来改善网站速度和性能,例如 Shopify, YouTube 和 eBay 等等。

什么是WebP

WebP是由Google网络性能团队开发的一种网络图片格式。它比 JPG、JPEG 和 PNG 更小但质量更好地呈现高质量和丰富多彩图片。根据 Google 关于 WebP 压缩研究显示,相同质量下,WebP 图片比 PNG 小 26%,比 JPEG 小25-34% 。 WebP 已经在许多公司(如 YouTube 和 eBay) 的许多页面上得到应用。

WebP 环境支持

要使用 WebP 图片,不仅仅是我们能够提供 WebP格式的图片,还要我们当前使用的 WordPress 程序版本,以及客户所使用的浏览器支持WebP格式图片的正常显示。

WordPress 环境支持

从 WordPress 5.8 版本开始,我们可以像使用 JPEG、PNG 和 GIF 图片一样上传和使用 WebP 图片。如果你所使用的 WordPress 版本在5.8之前,请更新版本。

浏览器支持

我们的网站访客所使用的浏览器必须也支持WebP才能正常显示图片。目前大部分主流浏览器都可以正常显示 WebP 图片,例如:

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

如何在 WordPress 中使用和提供WebP图片

如果所使用的 WordPress 程序版本在 5.8+ 以上,那么我们不需要安装任何第三方插件,可以直接上传电脑上的 WebP 图片到 WordPress 后台。不过目前个人并不建议直接上传和使用 WebP 格式的图片,以防止网站访客所使用的浏览器不支持 WebP,而导致图片无法正常显示。

推荐使用下面的方法自动将网站 JPG,PNG 图片格式转换成 WebP 图片

将JPG PNG图片格式转换为 WebP 格式

有许多WordPress插件可以自动帮我们把 WordPress 后台所有的图片,以及未来我们新上传到 WordPress 后台的PNG JPG格式的图片批量转换为WebP格式。更重要的是,这些插件支持 WebP 重定向功能,如果网站访客所使用的浏览器不支持转换后的WebP格式,则系统会自动展示转换前的 JPG 或者 PNG 格式的原始图像。

例如我将一个PNG格式的 Logo 文件上传到网站上; 图片格式转换插件将把 PNG 格式的 Logo 文件转换为WebP格式的图片,所有使用支持 WebP 格式图片的浏览器的网站访客,看到的图片都是 WebP 版本的,而如果某个访问者的浏览器不支持 Webp 图片,则该插件会显示原始 PNG 格式的 Logo 文件给他看。

以下是 Webp 格式转换的 WordPress 插件:

Cloudways 启用 WebP 重定向功能

图片[2]-使用 WebP 格式的图片为 WordPress 网站加速 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

注册账户时使用歪猫跨境专属优惠码“WaimaoB2C” 首月可享8折优惠

如果你和我一样用的是 Cloudways 搭建 WordPress 或者 WooCommerce 网站, 则在配置好插件之后,我们还需要在 Cloudways 后台设置中启用 WebP 重定向功能。因为默认情况下,WebP重定向是禁用的。

登录到 Cloudways 后台,在 Servers 页面找到要启用 WebP 重定向功能的服务器。

图片[3]-使用 WebP 格式的图片为 WordPress 网站加速 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

点击该服务器右侧的 “www”, 在下拉菜单中点击要启用 WebP 重定向服务的 WordPress 网站。

图片[4]-使用 WebP 格式的图片为 WordPress 网站加速 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

然后在 “Application Settings” 页面中,找到并且点击 “WEBP REDIRECTION” 选项,让它处于 “Enable” 状态

图片[5]-使用 WebP 格式的图片为 WordPress 网站加速 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

在弹窗提示中点击“OK”按钮,确认开启 WebP 重定向功能。

图片[6]-使用 WebP 格式的图片为 WordPress 网站加速 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

至此,我们就完成网站 WebP 图片格式支持设置了。清除网站缓存和浏览器缓存,然后在新的浏览器窗口中打开网站,右击网站任意图片下载,看下下载的图片格式是不是默认是 WebP 格式的图片了?

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容