如何在WordPress上使用WebP图像(并且图像文件大小最多可缩小35%)

如果您想加快WordPress网站的速度,寻找减小图像大小的方法可以为您带来丰厚的投资回报。

#js-mykinsta-video {
背景图片:url(https://kinsta.com/wp-content/themes/kinsta/images/mykinsta-dashboard-v8@2x.jpg);
}

免费试用

平均而言,图片约占网页文件大小的一半,因此,即使是很小的改进也可以取得很大的效果。

WebP是一种现代的图像格式,可以帮助您减小图像的大小而不改变其外观。平均而言,学习如何将图像转换为WebP可以将其尺寸缩小〜25-35%,而不会造成质量损失。

因此,我们将在此博客文章中深入探讨该主题!

准备?让我们开始吧!

什么是WebP?

那么……什么是WebP文件?简而言之,WebP是Google开发的一种图像格式。例如,您具有JPEG或JPG和PNG等图像格式,对吗? WebP是图像的另一种文件格式。

WebP致力于提供相同的图像文件,只是文件尺寸较小。通过减少图片文件的大小,您仍然可以为网站的访问者提供相同的体验,但是网站的加载速度更快。

例如,在Google的WebP压缩研究中,Google发现一个WebP图像文件平均…

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

这就是为什么如果您通过PageSpeed Insights运行站点,许多建议之一就是以WebP之类的下一代格式提供图像:

Google PageSpeed Insights建议使用WebP图像

Google PageSpeed Insights建议使用WebP图像

那么Google的WebP格式如何实现这些文件大小的减小?

WebP支持有损和无损压缩,因此确切的减少取决于您使用的是有损还是无损压缩

通过有损的WebP压缩,WebP使用一种称为“预测编码”的方法来减小文件大小。预测编码使用图像中相邻像素的值来预测值,然后仅对差异进行编码。它基于VP8关键帧编码。

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

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

哪些Web浏览器支持WebP?

为了使WebP图像起作用,访问者的网络浏览器需要对其进行支持。不幸的是,尽管浏览器支持已经增长很多,但WebP兼容性仍然不是通用的。

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

  • Chrome(台式和移动)。
  • Firefox(台式机和移动版)。
  • 边缘。
  • Opera(台式机和移动机)。

但是,值得注意的是Safari。在撰写本文时,Safari的桌面版和移动版均不支持WebP图像。 Apple在2016年短暂地尝试了WebP对Safari的支持,但此后没有再做任何努力。

Internet Explorer也缺少WebP支持(但Edge确实支持WebP,因为它基于Chromium)。

总计,大约77%的Internet用户使用支持WebP的浏览器。因此,尽管肯定有多数支持,但23%的支持太大了,不容忽视(在下面的WordPress WebP教程中,我们将向您展示如何处理此问题,以便所有访问者都拥有很好的体验):

WebP Web浏览器支持

WebP支持

WebP,JPG,PNG大小比较

根据Google的测试,WebP图像为:

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

如果您想进一步了解Google的方法,可以在下面找到指向完整结果的直接链接:

  • JPEG格式
  • PNG

两项测试均基于超过11,000张图像,包括:

  • 著名的伦纳图像
  • 来自柯达真彩色图像套件的24张图像
  • 来自Tecnick.com的100张图片
  • 来自Google图片搜索的11,000多张图片的随机样本

如何在WordPress上使用WebP图像

由于并非所有浏览器都支持WebP图像,因此您不能像在JPEG和PNG中一样,仅在媒体库中上传WebP图像文件并直接在WordPress中使用它们。

使用WordPress,我们的流量增长了1,187%。
我们将向您展示如何。
加入20,000多个其他人,他们每周都会收到有关WordPress内部技巧的新闻!

现在订阅

成功!感谢您的订阅

您将在一周内收到下一期的Kinsta新闻通讯。

订阅Kinsta新闻通讯

订阅

我同意条款和条件以及隐私政策

同样,有23%的人(包括所有Safari用户)使用的网络浏览器不支持WebP。如果您转换WebP图像并直接在您的内容中使用它们,则这些访问者将无法看到您的图像,这将破坏他们的浏览体验。

不用担心,有解决方案!

您可以使用WordPress插件,而不是将WebP图像直接上传到WordPress,而是将您的原始图像转换为WebP格式,并在访问者的浏览器不支持WebP的情况下提供原始图像作为备用。

例如,如果您将JPEG文件上传到您的网站,则该插件将:

  • 将JPEG文件转换为WebP,并使用WebP版本供访问者使用Chrome,Firefox等浏览。
  • 向使用Safari和其他不支持WebP的浏览器浏览的访问者显示原始JPEG文件。

这样,每个人都可以看到您的图像,并且每个人都可以获得最快的体验。

下面,我们将介绍一些最佳的WebP WordPress插件,所有这些插件都可与Kinsta和Kinsta CDN一起使用。

信息

如果您在Kinsta托管,则需要获得我们的支持,以便我们可以为其中一些插件的WebP缓存桶创建Nginx规则。

短像素

ShortPixel WordPress插件

ShortPixel WordPress插件

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

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

ShortPixel有一个有限的免费计划,可让您每月免费优化约100张图像。在那之后,付费计划的起价为每月4.99美元(最多5,000张图片/学分),或一次9.99美元(一包10,000学分)。

ShortPixel会将您优化过的每个WordPress图像尺寸计算在内。因此,如果您要优化多个图像缩略图的大小,则可以想象一张图像可以使用多个字幕。图像没有文件大小限制。

您可以在不受限制的网站上分配您的ShortPixel积分-没有针对每个站点的限制(您的所有网站都可以使用相同的ShortPixel帐户)。

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

在“常规”选项卡中,您可以设置图像优化工作方式的基本设置。例如,使用哪种压缩级别以及是否调整图像大小:

如何在ShortPixel中设置压缩级别和图像尺寸

如何在ShortPixel中设置压缩级别和图像尺寸

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

  1. 选中“ WebP图像”框
  2. 选中提供WebP版本的框。(选中第一个框后出现)
  3. 选择单选按钮以使用 标记语法(在选中上一个框后显示)
  4. 保留默认的“仅通过WordPress挂钩”选择

如何在ShortPixel中启用WordPress WebP图像

如何在ShortPixel中启用WordPress WebP图像

然后,保存您的更改。

如果您在Kinsta托管,ShortPixel将为您提供有关在Nginx上配置服务器配置文件的警告消息。要配置这些设置,您可以联系Kinsta支持,我们很乐意为您设置服务器配置。

想像一下

想象一下WordPress插件

想象一下WordPress插件

Imagify是与WP Rocket相同的开发人员开发的流行图像优化插件(这是与Kinsta配合使用的少数缓存插件之一)。

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

在功能方面,ShortPixel和Imagify具有许多相似之处。当您查看价格时,最大的不同是。 ShortPixel会根据图像对您收费,每张图像没有大小限制,而Imagify会根据文件总大小而收费,没有图像限制。

因此,如果您需要优化大量大图像,ShortPixel的方法可能会更便宜。但是,如果您需要优化许多小图像,那么Imagify的方法可能会更便宜。

Imagify的免费套餐有限,每月可以进行25 MB的优化。之后,付费计划的起始费用为每月4.99美元(最多1 GB)或9.99美元(一次性的1 GB信用)。

与ShortPixel一样,您可以将帐户限制分散到无限的网站上。

厌倦了您的WordPress网站的缓慢主机?我们提供WordPress专家提供的快速服务器和24/7世界一流的支持。查看我们的计划

要使用Imagify交付WordPress WebP图像,您需要从WordPress.org安装插件并添加API密钥以开始使用。

激活插件后,您可以使用“常规设置”框选择压缩级别。

如何在Imagify中设置压缩级别

如何在Imagify中设置压缩级别

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

  1. 选中创建图像的WebP版本的框
  2. 选中以Webp格式显示图像的框…
  3. 选择单选按钮以使用 标签
  4. 如果您是在Kinsta托管并使用Kinsta CDN,请在“如果使用CDN”框中输入Kinsta CDN的网址(我们将在下面告诉您如何找到Kinsta CDN网址)

如何在Imagify中启用WordPress WebP图像

如何在Imagify中启用WordPress WebP图像

如果您使用的是Kinsta CDN,则可以通过在MyKinsta仪表板中打开网站并访问网站设置的Kinsta CDN标签来找到您的CDN URL:

如何找到Kinsta CDN URL

如何找到Kinsta CDN URL

与ShortPixel一样,如果您在Kinsta托管,则需要为WebP缓存存储区创建Nginx规则(只需联系Kinsta支持)。

擎天柱

Optimole WordPress插件

Optimole WordPress插件

Optimole是一个WordPress图像优化插件,其操作与Imagify和ShortPixel略有不同。 Optimole可以自动压缩图像并调整其大小。但是,它还具有其他两个显着功能:

  1. 它可以通过自己的CDN(由Amazon CloudFront支持)来提供图像。
  2. 它提供实时的自适应图像,Optimole将为每个访客提供最佳尺寸的图像。例如,与在Retina屏幕上浏览的人相比,在小屏幕上浏览的人将获得较低分辨率的图像。

这种方法类似于其他实时优化/操纵服务,例如Cloudinary,imgix,KeyCDN图像处理等。

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

Optimole有一个有限的免费计划,该计划每月可以处理大约5,000个访问者的图像。之后,付费计划的起价为每月19美元,可容纳约25,000名访客。

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

完成此操作后,Optimole将开始自动优化图像并通过其CDN交付图像。默认情况下,WebP支持处于启用状态,因此无需手动启用它。

要配置其他设置,例如压缩级别和缩放行为,可以转到媒体→Optimole→设置:

Optimole设置区域-默认情况下启用WordPress WebP图像

Optimole设置区域–默认情况下启用WordPress WebP图像

由于Optimole可以通过自己的CDN传送图像,因此,如果您在Kinsta托管,则无需设置任何Nginx规则。

提高⬆️网站速度,同时减小⬇️图像大小。了解如何在#WordPress网站上利用WebP格式?

点击鸣叫

摘要

WordPress网站的图片在平均页面的文件大小中占很大一部分。如果您找到减小图像大小的方法,则可以在不改变访问者体验的情况下加快网站速度。

WebP是一种现代图像格式,与比较的JPEG或PNG文件相比,可以将文件大小减少约25%。

大多数现代浏览器都支持WebP,大约77%的Internet用户使用的浏览器支持WebP。但是,某些浏览器(尤其是Safari)仍然不提供WebP支持,因此您不能向所有访问者提供WebP图像。

为解决此问题,您可以使用WordPress插件,将图像转换为WebP并向浏览器支持此格式的访问者提供WebP版本,而将原始图像用于其浏览器不支持此格式的访问者。

可以帮助您完成此操作的三个插件是:

  • ShortPixel。
  • 想像一下
  • Optimole。

有关优化图像的更多策略,请查看我们的完整指南,以优化图像以提高网络性能。

您对在WordPress上使用WebP有任何疑问吗?在评论中询问我们。

如果您喜欢这篇文章,那么您会喜欢Kinsta的WordPress托管平台。加速您的网站,并从我们经验丰富的WordPress团队获得24/7支持。我们基于Google Cloud的基础架构专注于自动扩展,性能和安全性。让我们向您展示Kinsta的与众不同!查看我们的计划

相关文章