dark

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

2020年6月8日

如果您想加快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 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 Web浏览器支持

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插件

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中设置压缩级别和图像尺寸

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

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

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

如何在ShortPixel中启用WordPress WebP图像

如何在ShortPixel中启用WordPress WebP图像

然后，保存您的更改。

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

想像一下

想象一下WordPress插件

想象一下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中设置压缩级别

如何在Imagify中设置压缩级别

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

  1. 选中创建图像的WebP版本的框
  2. 选中以Webp格式显示图像的框…
  3. 选择单选按钮以使用 标签
  4. 如果您是在Kinsta托管并使用Kinsta CDN，请在“如果使用CDN”框中输入Kinsta CDN的网址（我们将在下面告诉您如何找到Kinsta CDN网址）

如何在Imagify中启用WordPress WebP图像

如何在Imagify中启用WordPress WebP图像

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

如何找到Kinsta CDN URL

如何找到Kinsta CDN URL

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

擎天柱

Optimole WordPress插件

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设置区域–默认情况下启用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的与众不同！查看我们的计划

相关文章