如何在WordPress上使用WebP图像（并且图像文件大小最多可缩小35％）

如果您想加快WordPress网站的速度，寻找减小图像大小的方法可以为您带来丰厚的投资回报。

＃js-mykinsta-video {
背景图片：url（https://kinsta.com/wp-content/themes/kinsta/images/mykinsta-dashboard-v8@2x.jpg）;
}

免费试用

平均而言，图片约占网页文件大小的一半，因此，即使是很小的改进也可以取得很大的效果。

WebP是一种现代的图像格式，可以帮助您减小图像的大小而不改变其外观。平均而言，学习如何将图像转换为WebP可以将其尺寸缩小〜25-35％，而不会造成质量损失。

因此，我们将在此博客文章中深入探讨该主题！

准备？让我们开始吧！

什么是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压缩技术，则本文是一个很好的起点。

哪些Web浏览器支持WebP？

为了使WebP图像起作用，访问者的网络浏览器需要对其进行支持。不幸的是，尽管浏览器支持已经增长很多，但WebP兼容性仍然不是通用的。

流行的浏览器支持WebP图像，例如：

• Chrome（台式和移动）。
• Firefox（台式机和移动版）。
• 边缘。
• Opera（台式机和移动机）。

但是，值得注意的是Safari。在撰写本文时，Safari的桌面版和移动版均不支持WebP图像。 Apple在2016年短暂地尝试了WebP对Safari的支持，但此后没有再做任何努力。

Internet Explorer也缺少WebP支持（但Edge确实支持WebP，因为它基于Chromium）。

总计，大约77％的Internet用户使用支持WebP的浏览器。因此，尽管肯定有多数支持，但23％的支持太大了，不容忽视（在下面的WordPress WebP教程中，我们将向您展示如何处理此问题，以便所有访问者都拥有很好的体验）：

WebP支持

WebP，JPG，PNG大小比较

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

• 比同类JPEG图像小25-34％。
• 比同类PNG图片小26％。

如果您想进一步了解Google的方法，可以在下面找到指向完整结果的直接链接：

• JPEG格式
• PNG

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

• 著名的伦纳图像
• 来自柯达真彩色图像套件的24张图像
• 来自Tecnick.com的100张图片
• 来自Google图片搜索的11,000多张图片的随机样本

如何在WordPress上使用WebP图像

由于并非所有浏览器都支持WebP图像，因此您不能像在JPEG和PNG中一样，仅在媒体库中上传WebP图像文件并直接在WordPress中使用它们。

使用WordPress，我们的流量增长了1,187％。
我们将向您展示如何。
加入20,000多个其他人，他们每周都会收到有关WordPress内部技巧的新闻！

现在订阅

成功！感谢您的订阅

您将在一周内收到下一期的Kinsta新闻通讯。

订阅Kinsta新闻通讯

订阅

我同意条款和条件以及隐私政策

同样，有23％的人（包括所有Safari用户）使用的网络浏览器不支持WebP。如果您转换WebP图像并直接在您的内容中使用它们，则这些访问者将无法看到您的图像，这将破坏他们的浏览体验。

不用担心，有解决方案！

您可以使用WordPress插件，而不是将WebP图像直接上传到WordPress，而是将您的原始图像转换为WebP格式，并在访问者的浏览器不支持WebP的情况下提供原始图像作为备用。

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

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

这样，每个人都可以看到您的图像，并且每个人都可以获得最快的体验。

下面，我们将介绍一些最佳的WebP WordPress插件，所有这些插件都可与Kinsta和Kinsta CDN一起使用。

信息

如果您在Kinsta托管，则需要获得我们的支持，以便我们可以为其中一些插件的WebP缓存桶创建Nginx规则。

短像素

ShortPixel WordPress插件

ShortPixel是一个流行的WordPress图像优化插件，可以帮助您自动调整大小并压缩上传到WordPress网站的图像。

作为其功能列表的一部分，ShortPixel还可以帮助您自动将图像转换为WebP并将这些图像提供给支持WebP的浏览器。

ShortPixel有一个有限的免费计划，可让您每月免费优化约100张图像。在那之后，付费计划的起价为每月4.99美元（最多5,000张图片/学分），或一次9.99美元（一包10,000学分）。

ShortPixel会将您优化过的每个WordPress图像尺寸计算在内。因此，如果您要优化多个图像缩略图的大小，则可以想象一张图像可以使用多个字幕。图像没有文件大小限制。

您可以在不受限制的网站上分配您的ShortPixel积分-没有针对每个站点的限制（您的所有网站都可以使用相同的ShortPixel帐户）。

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

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

如何在ShortPixel中设置压缩级别和图像尺寸

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

1. 选中“ WebP图像”框
2. 选中提供WebP版本的框。（选中第一个框后出现）
3. 选择单选按钮以使用 标记语法（在选中上一个框后显示）
4. 保留默认的“仅通过WordPress挂钩”选择

如何在ShortPixel中启用WordPress WebP图像

然后，保存您的更改。

如果您在Kinsta托管，ShortPixel将为您提供有关在Nginx上配置服务器配置文件的警告消息。要配置这些设置，您可以联系Kinsta支持，我们很乐意为您设置服务器配置。

想像一下

想象一下WordPress插件

Imagify是与WP Rocket相同的开发人员开发的流行图像优化插件（这是与Kinsta配合使用的少数缓存插件之一）。

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

在功能方面，ShortPixel和Imagify具有许多相似之处。当您查看价格时，最大的不同是。 ShortPixel会根据图像对您收费，每张图像没有大小限制，而Imagify会根据文件总大小而收费，没有图像限制。

因此，如果您需要优化大量大图像，ShortPixel的方法可能会更便宜。但是，如果您需要优化许多小图像，那么Imagify的方法可能会更便宜。

Imagify的免费套餐有限，每月可以进行25 MB的优化。之后，付费计划的起始费用为每月4.99美元（最多1 GB）或9.99美元（一次性的1 GB信用）。

与ShortPixel一样，您可以将帐户限制分散到无限的网站上。

厌倦了您的WordPress网站的缓慢主机？我们提供WordPress专家提供的快速服务器和24/7世界一流的支持。查看我们的计划

要使用Imagify交付WordPress WebP图像，您需要从WordPress.org安装插件并添加API密钥以开始使用。

激活插件后，您可以使用“常规设置”框选择压缩级别。

如何在Imagify中设置压缩级别

要启用WebP图像，请向下滚动到“优化”部分，然后找到“ WebP格式”部分：

1. 选中创建图像的WebP版本的框
2. 选中以Webp格式显示图像的框…
3. 选择单选按钮以使用

   标签

4. 如果您是在Kinsta托管并使用Kinsta CDN，请在“如果使用CDN”框中输入Kinsta CDN的网址（我们将在下面告诉您如何找到Kinsta CDN网址）

如何在Imagify中启用WordPress WebP图像

如果您使用的是Kinsta CDN，则可以通过在MyKinsta仪表板中打开网站并访问网站设置的Kinsta CDN标签来找到您的CDN URL：

如何找到Kinsta CDN URL

与ShortPixel一样，如果您在Kinsta托管，则需要为WebP缓存存储区创建Nginx规则（只需联系Kinsta支持）。

擎天柱

Optimole WordPress插件

Optimole是一个WordPress图像优化插件，其操作与Imagify和ShortPixel略有不同。 Optimole可以自动压缩图像并调整其大小。但是，它还具有其他两个显着功能：

1. 它可以通过自己的CDN（由Amazon CloudFront支持）来提供图像。
2. 它提供实时的自适应图像，Optimole将为每个访客提供最佳尺寸的图像。例如，与在Retina屏幕上浏览的人相比，在小屏幕上浏览的人将获得较低分辨率的图像。

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

作为实时图像优化的一部分，Optimole还可以使用支持WebP的浏览器向访问者提供WebP图像。

Optimole有一个有限的免费计划，该计划每月可以处理大约5,000个访问者的图像。之后，付费计划的起价为每月19美元，可容纳约25,000名访客。

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

完成此操作后，Optimole将开始自动优化图像并通过其CDN交付图像。默认情况下，WebP支持处于启用状态，因此无需手动启用它。

要配置其他设置，例如压缩级别和缩放行为，可以转到媒体→Optimole→设置：

Optimole设置区域–默认情况下启用WordPress WebP图像

由于Optimole可以通过自己的CDN传送图像，因此，如果您在Kinsta托管，则无需设置任何Nginx规则。

提高⬆️网站速度，同时减小⬇️图像大小。了解如何在#WordPress网站上利用WebP格式?

点击鸣叫

摘要

WordPress网站的图片在平均页面的文件大小中占很大一部分。如果您找到减小图像大小的方法，则可以在不改变访问者体验的情况下加快网站速度。

WebP是一种现代图像格式，与比较的JPEG或PNG文件相比，可以将文件大小减少约25％。

大多数现代浏览器都支持WebP，大约77％的Internet用户使用的浏览器支持WebP。但是，某些浏览器（尤其是Safari）仍然不提供WebP支持，因此您不能向所有访问者提供WebP图像。

为解决此问题，您可以使用WordPress插件，将图像转换为WebP并向浏览器支持此格式的访问者提供WebP版本，而将原始图像用于其浏览器不支持此格式的访问者。

可以帮助您完成此操作的三个插件是：

• ShortPixel。
• 想像一下
• Optimole。

有关优化图像的更多策略，请查看我们的完整指南，以优化图像以提高网络性能。

您对在WordPress上使用WebP有任何疑问吗？在评论中询问我们。

如果您喜欢这篇文章，那么您会喜欢Kinsta的WordPress托管平台。加速您的网站，并从我们经验丰富的WordPress团队获得24/7支持。我们基于Google Cloud的基础架构专注于自动扩展，性能和安全性。让我们向您展示Kinsta的与众不同！查看我们的计划