创网站长资源 WordPress优化 2025-04-22

如何在WordPress网站中使用WebP格式图片

温馨提示：注册会员付费购买资源可永久免费下载更新版本

提高WordPress网站加载速度的方法之一就是缩小图片的大小。图片平均占网页大小的一半左右，所以即使很小的改进也能取得很大的效果。

WebP是一种比较新的图片格式(相对于jpg和png而言)，它最大的特点是在不影响质量的情况下缩小图片尺寸。将图片转换为WebP格式可以在不损失质量的情况下将其大小缩小约25-35%。

我们将在本文中深入探讨这个话题！

什么是WebP？

哪些浏览器支持WebP？

WebP与JPG和巴布亚新几内亚交易量的比较

如何在WordPress网站上使用WebP图片

什么是WebP？

因此…什么是WebP文件？简而言之，WebP是Google开发的一种图像格式。我们比较常见的图像格式是JPEG或者JPG和PNG，WebP是后起之秀。

WebP致力于提供相同质量的图片，但文件大小更小。通过缩小图片文件的大小，不会“降低图片呈现质量，导致用户体验不好”，而且有助于提高网站的加载速度。

在谷歌的WebP压缩研究中，谷歌发现一个普通的WebP图像文件…

比JPEG图像小25-34%。

比PNG图片小26%。

这就是为什么如果您通过PageSpeed Insights运行网站测试，您会看到以WebP等下一代格式提供的图片:

Google PageSpeed Insights推荐使用WebP格式的图片。

那么Google的WebP格式是如何减小文件大小的呢？WebP支持有损和无损压缩，因此确切的减少量取决于您使用的是有损还是无损压缩。

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

无损WebP使用WebP团队开发的更复杂的方法。如果你想了解更多关于WebP压缩技术的知识，那么你可以阅读Google的相关文档。

哪些浏览器支持WebP？

为了让WebP图片正常工作，Web浏览器必须兼容。遗憾的是，尽管越来越多的浏览器开始兼容WebP，但WebP兼容性仍然不普遍。

目前主流浏览器普遍支持WebP图片(顽固IE还是不支持，也可能是因为不开源)，比如:

Chrome(PC和移动版)

Firefox(PC和移动)

边缘

Opera(电脑和移动版)

值得注意的是，Safari、桌面版和移动版Safari都不支持WebP图片。苹果曾在2016年尝试开发兼容WebP的Safari，但此后一直没有消息。

Internet Explorer也与WebP不兼容(Edge支持WebP，因为它基于Chromium)。

总的来说，大约77%的互联网用户使用支持WebP的浏览器。但是23%这个数字太大了，不容忽视(在下面的WebP教程中，将详细解释如何处理这个问题，以便所有访问者都有良好的体验):

WebP支持

WebP与JPG和巴布亚新几内亚交易量的比较

根据谷歌的测试，WebP图片是:

比JPEG图像小25-34%

比PNG图像小26%

如果想进一步了解Google的方法，可以从Google上阅读一些关于WebP的说明资料:WebP中的loss和transparency encoding，WebP Compression Study。

这两项测试都基于超过11，000张图像，包括:

著名的Lenna标准测试图片

24张柯达真彩色照片

Tecnick.com的100张照片

1000多张谷歌图片的随机样本。

如何在WordPress上使用WebP图片

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

同样，23%的互联网用户(包括所有Safari用户)使用不支持WebP的浏览器。如果一刀切的方法把所有图片格式都改成WebP，这样的访问者就看不到你的网站图片了，结果可想而知。

不过不用担心，有问题就会有相应的解决方案！

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

例如，如果你上传一个JPEG文件到你的网站，插件:

将JPEG文件转换成WebP，使用WebP版本供Chrome、Firefox等浏览器访问者浏览。

向使用IE、Safari和其他不支持WebP的浏览器的访问者显示原始JPEG文件。

这样每个人都可以查看网站的图片，保证77%的访问者有更好的网站加载体验。下面，将介绍一些优秀的WebP图片插件。

短像素

意象

最佳摩尔

EWWW优化器

SG优化器

短像素

WordPress插件-短像素

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

ShortPixel提供基本免费计划，每月免费优化100张左右的图片。之后付费套餐起步价为4.99美元/月(5000张图片)，或者单次付费9.99美元(10000张图片)。

您可以在任何网站上分配ShortPixel图像优化配额-没有网站限制(并且您的所有网站都可以使用相同的ShortPixel帐户)。

要在你的WordPress网站上使用ShortPixel，你需要安装WordPress的插件并添加API密匙(你可以通过注册一个免费的ShortPixel账户来获得)。

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

短像素插件的设置

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

选中“WebP图像”框。

选中“交付WebP版本…”复选框。(在选中第一个框后出现)

选中单选按钮“使用标记语法”(在选中前一个框后显示)。

保持默认的“仅通过WordPress挂钩选择”。

ShortPixel插件支持WebP图像

最后，保存您的更改。

意象

WordPress插件-图像

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安装插件，添加API key激活。

插件启用后，在插件设置界面选择“常规设置”，优化WebP设置。

Imagify插件设置

要启用WebP图片，向下滚动到“优化”部分，找到“WebP格式”部分:

选中“创建图像的webp版本”

选中“以webp格式显示图像…”

选择单选按钮“使用标签”

如果你的WordPress网站使用CDN，你还需要在“如果你使用CDN盒子”输入框中填入属于你网站的CDN服务商提供的CDN加速地址URL。

Imagify启用WebP图片优化设置。

最佳摩尔

WordPress插件-Optimole
WordPress插件-Optimole

Optimole是此次推出的第三个WordPress图片优化插件。其操作与Imagify和ShortPixel略有不同。Optimole可以自动压缩和调整图片大小。然而，它还提供了另外两个重要的功能:

它可以通过自己的CDN(由亚马逊CloudFront支持)提供图片。

它提供实时自适应图片，Optimole将为每一位访问者提供最佳尺寸的图片。

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

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

Optimole还提供了一个免费的软件包，每个月可以处理大约5000张访客的图片。之后，付费套餐起价19美元/月，支持25000名访客。

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

建成后，Optimole将开始自动优化图片，并通过其CDN提供给游客。默认情况下启用WebP支持，因此无需手动启用。

当然，你想进行其他设置，比如压缩级别和缩放，可以进入“媒体→Optimole→设置”:

Optimole插件设置Optimole插件设置

EWWW优化器

EWWW图像优化插件是最好的WordPress图像压缩插件之一，它允许你优化WordPress图像。它还支持WebP图像，可以在支持的浏览器上自动显示。

您需要做的第一件事是安装并启用EWWW图像优化器插件。

激活后，转到设置EWWW图像优化器页面配置插件选项。您可以根据安装向导配置插件，但是如果您不需要它，您可以单击“我知道我在做什么”链接退出向导。

Wwoptimizer插件安装向导

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

Wwoptimizer插件WebP转换选项

之后，单击“保存更改”按钮保存设置。

接下来，向下滚动到“WebP转换”部分。现在，插件会用红色预览图向你展示一些重写规则。

你需要点击“插入重写规则”按钮，插件会自动尝试将这些重写规则插入到。htaccess文件。

。htaccess重写规则

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

的WebP重写规则。htaccess文件生效

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

完成后，返回插件的设置页面，然后再次单击“保存更改”按钮。如果预览图像变成绿色，您已经成功地在WordPress网站上启用了WebP图像传输。

或者，您可以选择JS WebP重写或这两种WebP重写方法中的一种作为WebP交付选项。这些方法比。htaccess方法，但它们可以完成工作。

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

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

WordPress多媒体库列表显示数量

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

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

批量优化图片

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

在下一个界面，插件会给你一个选项，跳过图像压缩，只转换成WebP。如果您的图像已经过优化，您可以选中此选项。

跳过图片压缩，只转换WebP

之后，单击“扫描未优化的图像”按钮继续。然后，插件会显示找到的图片数量，所以你可以点击“优化”按钮继续。

您的图像现在将被优化，EWWW图像优化器将生成您的图像的WebP版本。

批量转换进度

测试WebP图片的有效性。

优化图像后，您可以转到包含多个图像的博客帖子或页面。将鼠标移动到任何图像上，单击鼠标右键在新标签中打开该图像。

新窗口打开以查看图像。

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

WebP格式图片

如果插件不能提供webp图片，可以返回插件的设置页面。在这里，您可以将WebP交付选项更改为“JS WebP重写”或“WebP重写”方法。

SG优化器

如果您是网站地面用户，建议使用此方法。

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

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

启用时，插件会在管理侧边栏添加新的菜单项，标记为“SG Optimizer”。点击它会把你带到插件的设置页面。

SG优化器高速缓存设置

如果想使用SiteGround内置的缓存系统，可以在这里打开缓存设置。

之后，您可以切换到“媒体优化”选项卡，然后打开“生成新图像的WebP副本”选项。

制作新图片的网页副本。

在它下面，你会看到选项“批量生成WebP文件”。点击它开始为WordPress媒体库中的所有图像文件生成WebP副本。

批量生成Webp文件

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

在SG Optimizer中测试WebP图像

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

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

调试浏览器以检查图片格式

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