如何实现WordPress网站使用WebP格式图片

提升WordPress网站的加载速度的其中一种办法——减少图片体积大小。平均而言，图片约占网页文件大小的一半，因此即使是很小的改进也可以取得很大的效果。

WebP是一种较新的图片格式（相比jpg和png），该格式的最大特点是减小图片体积大小而不影响质量。将图片转换为WebP格式可以将其尺寸缩小约25-35％，而不会造成质量损失。

我们将在此文中深入探讨该主题！

1. 什么是WebP？
2. 哪些浏览器支持WebP？
3. WebP vs JPG vs PNG体积大小比较
4. 如何在WordPress网站上使用WebP图片

什么是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的WebP格式如何实现文件大小减少？WebP支持有损和无损压缩，因此确切的减少取决于您使用的是有损还是无损压缩。

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

无损WebP使用WebP团队开发的一套更为复杂的方法。如果您想详细了解WebP压缩技术，那么可以阅读谷歌相关文档。

哪些浏览器支持WebP？

为了使WebP图片起作用，需要Web浏览器兼容才行。不幸的是，尽管越来越多的浏览器开始兼容WebP，但WebP兼容性仍然不是通用的。

当前主流浏览器一般都支持WebP图片（冥顽不灵的IE依然是不支持的，也可能因为它不是开源的），例如：

• Chrome（PC&移动版）
• Firefox（PC&移动版）
• Edge
• Opera（PC&移动版）

值得注意的是Safari，Safari的桌面版和移动版均不支持WebP图片。Apple在2016年曾尝试Safari兼容WebP的开发，但此后就渺无音讯了。

Internet Explorer也不兼容WebP（Edge支持WebP，因为它基于Chromium）。

总计，大约77％互联网用户使用支持WebP的浏览器。但23％的数字太大了，不容忽视（在下面的WebP教程中，将会详细说明如何处理此问题，以便所有访问者都拥有良好的体验）：

WebP支持

WebP vs JPG vs PNG 体积大小比较

根据Google的测试，WebP图片为：

• 比JPEG图片小25-34％
• 比PNG图片小26％

如果您想进一步了解Google的方法，可以阅读谷歌关于WebP的一些说明资料：Lossless and Transparency Encoding in WebP，WebP Compression Study。

两项测试均基于超过11,000张图片，包括：

• 著名的Lenna标准测试图片
• 24张柯达真彩色图片
• 100张Tecnick.com图片
• 11,000多张Google图片搜索的随机样本

如何在WordPress上使用WebP图片

由于并非所有浏览器都支持WebP图片，因此，您不能像JPEG和PNG那样，直接通过媒体库上传WebP图片文件并直接使用。

同样，23％的互联网用户（包括所有Safari用户）使用不支持WebP的浏览器。如果一刀切的方法所有图片格式换成WebP，则此类访客将无法看到您的网站图片，结果可想而知。

但无需担心，有问题自然就有对应的解决方案！

您可以使用WordPress插件，而不是将WebP图片直接上载到WordPress，而是将您的原始图片转换为WebP格式，并在访客浏览器不支持WebP时提供原始图片作为备用。

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

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

这样，每个人都可以查看网站图片，并且保证了77%的访客获得更佳的网站加载体验。下面，将介绍一些优秀的WebP图片插件。

1. ShortPixel
2. Imagify
3. Optimole
4. EWWW Optimizer
5. SG Optimizer

ShortPixel

WordPress插件-ShortPixel

ShortPixel是一个非常热门的WordPress图片优化插件，可以帮助您自动调整图片大小并压缩上传到WordPress网站。作为其功能列表的一部分，ShortPixel还可以自动将图片转换为WebP并将这些图片提供给支持WebP的浏览器。

ShortPixel提供了一个基础的免费计划，每月免费优化约100张图片。在那之后，付费套餐的起步价为4.99美元/月（5,000张图片），或单次付费9.99美元（10,000图片）。

您可以在任意网站上分配ShortPixel图片优化额度-没有站点限制（并且您的所有网站都可以使用相同的ShortPixel帐户）。

要在你的WordPress网站使用ShortPixel，您需要从WordPress.org安装插件并添加API密钥（您可以通过注册免费的ShortPixel帐户获得）。

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

ShortPixel插件设置

要启用WebP图片，请转到“Advanced ”选项卡，然后：

1. 勾选“WebP Images”框
2. 勾选“Deliver the WebP versions.. ”框。（选中第一个框后出现）
3. 选中“Using the <PICTURE> tag syntax”单选按钮（在选中上一个框后显示）
4. 保留默认的“Only via WordPress hooks selection”。

ShortPixel插件启用WebP图片支持

最后，保存您的更改。

Imagify

WordPress插件-Imagify

Imagify是另一款热门图片优化插件，为著名WordPress缓存优化插件WP Rocket开发人员所开发。

它可以自动压缩和调整您上传到WordPress网站的图片的大小。然后，还可以将图片转换为WebP，并将WebP版本提供使用支持WebP的浏览器的访问者。

在功能方面，ShortPixel和Imagify有许多相似之处。最大的不同是。ShortPixel按图片数量计费，图片大小则无限制；而Imagify会根据文件总大小收费，但无图片数量限制。

因此，如果您需要优化大量大图片，ShortPixel的计费方式可能更合适你。相反，如果您需要优化许多小图片，则Imagify的计费方式可能更划算些。

Imagify的免费套餐感觉“在侮辱用户”，每月仅支持25MB的图片优化。之后，付费方式为4.99美元/月（最多1GB）或单次付费9.99美元（最多1GB）。

与ShortPixel一样，Imagify也支持在无限网站使用，反正是按量付费，管你在几个网站上用。

要使用Imagify插件使WordPress网站支持WebP图片，您需要从WordPress.org安装插件并添加API密钥激活使用。

启用插件后，进行插件设置界面选择“General Settings”进行WebP优化设置。

Imagify插件设置

要启用WebP图片，请向下滚动到“Optimization ”部分，然后找到“WebP Format”部分：

1. 勾选“Create webp versions of images”
2. 勾选“Display images in webp format…”
3. 选择单选按钮“use <picture> tags”
4. 如果你的WordPress网站使用了CDN，则还需要在“If you use a CDN box”输入框填入CDN服务商提供的属于你网站的CDN加速地址URL。

Imagify启用WebP图片优化设置

Optimole

WordPress插件-Optimole

Optimole是这次要介绍的第三个WordPress图片优化插件，其操作与Imagify和ShortPixel略有不同。Optimole可以自动压缩图片并调整其大小。但是，它还提供其他两个显着功能：

1. 它可以通过自己的CDN（由Amazon CloudFront支持）来提供图片。
2. 它提供实时的自适应图片，Optimole将为每个访客提供最佳尺寸的图片。

这种方法类似于其他实时优化服务，例如Cloudinary，imgix，KeyCDN图片处理等。

作为实时图片优化的一部分，Optimole向支持WebP的浏览器提供WebP图片。

Optimole也提供免费套餐，每月可以处理大约5,000个访问者的图片。之后，付费套餐起步价为19美金/月，支持25,000名访客。

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

完成后，Optimole将开始自动优化图片并通过其CDN为访客提供图片。WebP支持默认情况下处于启用状态，无需手动启用。

当然你还想执行其他设置，例如压缩级别和缩放，可以转到“媒体→Optimole→Settings”：

Optimole插件设置

EWWW Optimizer

EWWW Image Optimizer插件是最好的WordPress图像压缩插件之一，可让您优化WordPress图像。它还支持WebP图像，并可以在支持的浏览器上自动显示它们。

您需要做的第一件事是安装并启用EWWW Image Optimizer插件。

激活后，转到Settings » EWWW Image Optimizer页面以配置插件选项。你可以根据安装向导配置插件，但如果你不需要，则可以点击“I know what I am doing”链接以退出向导。

EWWW Optimizer插件安装向导

在下一个界面上，可以看到一些插件选项。向下滚动并选中“WebP Conversion”选项旁边的框。

EWWW Optimizer插件WebP转换选项

之后，单击“Save Changes”按钮保存设置。

接下来，向下滚动到“WebP Conversion”部分。现在，该插件将为您显示一些带有红色预览图像的重写规则。

您需要单击“Insert Rewrite Rules”按钮，插件将自动尝试将这些重写规则插入.htaccess文件中。

.htaccess重写规则

如果插件成功添加了这些规则，则红色图像预览将变为带有“WebP”文本的绿色。

.htaccess文件WebP重写规则生效

有时，插件可能无法插入规则。在这种情况下，您需要从插件的设置页面复制重写规则，然后将其手动粘贴到.htaccess文件的底部。

完成后，返回到插件的设置页面，然后再次单击“Save Changes”按钮。如果预览图像变为绿色，则表示您已成功在WordPress网站上启用WebP图像传递。

或者，您可以从JS WebP Rewriting或<picture>这两种WebP重写方法中选择其一作为WebP delivery选项。这些方法比.htaccess方法要慢一些，但可以完成工作。

批量将旧图像转换为WebP版本

EWWW Image Optimizer支持将以前上传的图像文件转换为WebP图像。只需转到媒体»媒体库页面，然后切换到列表视图。

WordPress多媒体库列表显示数量

接下来，您需要单击“显示选项”按钮，并将“每页的项目数”更改为999。如果您有1000幅以上的图像，则这些图像将显示在下一页上。

这样，您将能够快速选择大量图像以进行批量优化。接下来，单击顶部的全选复选框以选择所有图像。

批量优化图片

之后，点击批量操作下拉菜单，然后选择批量优化选项。最后，单击“应用”按钮。

在下一个界面上，该插件将为您提供一个选项，可以跳过图像压缩，仅将其转换为WebP。如果您的图像已经优化，则可以选中此选项。

跳过图片压缩仅转换WebP

之后，单击“Scan for Unoptimized Images”按钮继续。然后，该插件将向您显示找到的图像数量，因此您可以单击“Optimize”按钮继续。

现在将优化您的图像，并且EWWW Image Optimizer将为您的图像生成WebP版本。

批量转换进度

测试WebP图像生效情况

优化图像后，您可以转到包含多个图像的博客文章或页面。将鼠标移到任何图像上，然后单击鼠标右键以在新选项卡中打开图像。

新窗口打开查看图像

这将在新的浏览器选项卡中打开图像，您将能够在地址栏中看到其扩展名为.webp。

WebP格式图片

如果插件无法提供webp图像，则可以返回到插件的设置页面。在这里，您可以将WebP Delivery选项更改为“JS WebP Rewriting”或“<picture> WebP Rewriting”方法。

SG Optimizer

如果您是SiteGround用户，则建议使用此方法。

SiteGround是最好的WordPress托管公司之一。他们为用户提供了免费的SG Optimizer插件，可让您优化WordPress性能。它还包括优化WordPress图像的选项。

首先，您需要安装并启用SG Optimizer插件。

启用后，该插件会将新菜单项添加到标有“SG Optimizer”的管理侧边栏中。单击它会带您到插件的设置页面。

SG Optimizer缓存设置

如果您想使用SiteGround的内置缓存系统，则可以在此处打开缓存设置。

之后，您可以切换到“Media Optimization”选项卡，然后打开“Generate WebP Copies of New Images”选项。

为新图片生成WebP副本

在其下，您将看到“Bulk Generate WebP Files”选项。单击它将开始为WordPress媒体库中的所有图像文件生成WebP副本。

批量生成Webp文件

完成后，您的WordPress网站将开始提供WebP图像。

在SG Optimizer中测试WebP图像

要查看您的网站是否正在提供WebP图像，您需要在网站上打开一个包含一些图像的页面。

之后，右键单击并选择检查工具。这将打开开发者控制台，您需要在其中切换到“Network ”选项卡。

浏览器调试检查图片格式

在此处，单击“img”选项卡，然后重新加载页面（在Windows上为CTRL + R，在Mac上为Command + R）。当您的网站重新加载时，您将看到在开发人员控制台中加载的所有图像。

小结

很多时候，WordPress网站中占据页面体积的大比例的，非图片莫属。如果页面图片过多且体积过大，建议应该考虑对图片进一步优化以提升网站页面的加载速度。

WebP作为新一代的图片格式，与较为经典的JPEG或PNG文件相比，可以将文件大小减少约25％。

现在大多数现代浏览器都支持WebP（大约77％互联网用户使用支持WebP的浏览器），但是，某些浏览器（尤其是Safari和IE）仍不提供WebP支持，又不能为所有访问者提供WebP图片。

要解决此问题，建议使用WordPress插件，将图片转换为WebP并向其浏览器支持此格式的访问者提供WebP版本，而对那些不支持该格式的访问者使用原始图片。推荐以下三个插件：

• ShortPixel.
• Imagify.
• Optimole.
• EWWW Optimizer.
• SG Optimizer.

以下为WordPress图片优化相关文章，参考阅读：

1. 详解如何优化压缩WordPress博客图片
2. 如何优化WordPress博客图片？
3. 如何实现WordPress图像和视频懒加载
4. 使用imgSpider采集文章外链图片