当我们安装主题和插件时，都会向…
到目前为止，我们大多数人都知道图像优化非常重要，因为它在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中运行。这些由团队在KeyCDN（全球内容交付网络（CDN））上创建和开发。
- [高级] Optimus图像优化器：适用于WordPress的无损图像压缩插件，可将图像转换为WebP
- [免费] 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开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！
随机推荐
