如何在WordPress中使用WebP文件并减少页面加载时间

webp文件wordpress

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


什么是WebP?

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

WebP无损图像是 小26% 与PNG和WebP有损图像相比的大小是 小25-34% 比JPEG.

像YouTube和eBay这样的公司已经在使用WebP默默地为其许多站点供电。以下是eBay的一个示例,在其首页上,他们平均大约有30个WebP文件.

WebP的用法易趣

WebP为什么如此重要?根据 httparchive, 截至2016年8月, 图片占平均网页重量的64%以上. 通常,它比CSS,JS和HTML的总和还多。因此,选择健壮的图像优化方法和图像格式(例如WebP)至关重要,这样您才能尽可能减少页面权重。通常,页面越小,加载速度越快。那不仅会令您的访客满意,还会令Google满意,因为 页面速度是排名因素.

WebP支持

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

webp浏览器支持

可是等等!不要太失望,因为在本教程中,我们将在下面向您展示,有一种方法可以 将WebP文件传送到受支持的浏览器和JPG / PNG作为后备. 这意味着不受支持的浏览器将不会看到损坏的图像,它们只会看到以前看到的内容。将WebP视为WordPress网站的补充,而不是迁移.

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

浏览器chrome webp

如何在WordPress中使用WebP文件

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

  1. [高级] Optimus图像优化器:适用于WordPress的无损图像压缩插件,可将图像转换为WebP
  2. [自由] WordPress缓存启动器:缓存插件 允许您服务WebP 到支持的浏览器

Optimus图像优化器

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

创建webp文件

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

webp和png文件

如果您之前已经压缩过图像,但仍然需要将其转换为WebP,则还有一个批量优化器选项.

批量图片优化器

WordPress缓存启动器

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

缓存启用器设置

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

就是这样!现在您应该在WordPress网站上运行WebP文件.

JPG与WebP的比较

我们进行了比较 JPG到WebP 展示您可以实现的差异.

文件名原始JPG压缩的JPGWEBP格式尺寸差异%
jpg-to-webp-1.jpg758KB685 KB109 KB86%
jpg-to-webp-2.jpg599 KB529 KB58.8 KB90%
jpg-to-webp-3.jpg960 KB881 KB200 KB79%
jpg-to-webp-4.jpg862 KB791 KB146 KB83%
jpg-to-webp-5.jpg960 KB877 KB71.7 KB93%

WebP导致 平均图像尺寸减少85.87%.

PNG到WebP的比较

同样,我们还比较了 PNG转WebP 展示您可以实现的差异.

文件名原始PNG压缩的PNGWebP格式尺寸差异%
png-to-webp-1.png44 KB34 KB30KB32%
png-to-webp-2.png46 KB35 KB33KB28%
png-to-webp-3.png43KB31KB25KB42%
png-to-webp-4.png30 KB24KB18KB40%
png-to-webp-5.png15KB11KB8 KB47%
png-to-webp-6.png34 KB24KB18KB47%
png-to-webp-7.png15KB13KB8 KB47%
png-to-webp-8.png63KB47KB44 KB30%
png-to-webp-9.png48KB36 KB33KB31%
png-to-webp-10.png17KB14KB11KB35%
png-to-webp-11.png18 KB13KB9KB50%
png-to-webp-12.png61KB45 KB39KB36%
png-to-webp-13.png32KB25KB21KB35%
png-to-webp-14.png26KB21KB17KB35%
png-to-webp-15.png14KB12 KB9KB36%
png-to-webp-16.png36KB27 KB24KB33%
png-to-webp-17.png14KB12 KB8 KB43%
png-to-webp-18.png21KB18KB13KB38%
png-to-webp-19.png42KB30KB27KB36%
png-to-webp-20.png23KB20 KB18KB22%

WebP导致 平均图像尺寸减少42.8%.

摘要

如您所见,WebP在您的WordPress网站上非常容易实现,并且您可以实现大得多的图像文件大小!没有可以与WebP节省相比的图像压缩。哦,我们是否提到过WebP可以使用无损压缩?这意味着您不会看到任何明显的质量损失。如果您正在寻找一种更好的方法来加快WordPress的速度,WebP可能是一个很好的解决方案.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map