17713433920 info@mac163.com

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

什么是WebP?

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

与PNG相比,WebP无损图像的尺寸要小26%,与JPEG 相比,WebP有损图像的尺寸要小25-34%。

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

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

WebP支持

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

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

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

如何在wordpress中使用webp文件并减少页面加载时间
如何在wordpress中使用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版本。

就是这样!现在,您应该在WordPress网站上运行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%

WebP导致平均图像大小减少85.87%。

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导致平均图像大小减少42.8%。

摘要

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


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部