如何使用 Imagify 在 WordPress 上将图像转换为 WebP

已发表: 2021-07-19

有兴趣在 WordPress 上将您的图像转换为 WebP? 向 Imagify 打个招呼,这是我们的免费插件,可优化您的图像并将其转换为 WebP。

在我们的指南中,我们解释了如何在不降低网站速度的情况下提供高质量的图像。 如果您的网站上已经有数百张 PNG 或 JPG 图片,Imagify 会优化它们并将它们自动转换为 WebP。

听起来很有希望? 让我们深入研究这种现代 WebP 格式,看看它如何通过将图像文件大小缩小 35% 来影响性能!

什么是 WebP 格式?

WebP 是一种图像格式,通过减小文件大小但不影响质量来提供图像压缩。 WebP 由 Google 开发,是一种包含无损和有损压缩的现代图像文件格式。 与 JPEG 和 PNG 图像相比,该格式可以将图像文件大小减少多达 35%,同时保持高质量。 两全其美,对吧?

访问者想要质量和快速的网站。 这就是为什么近年来出现了一些新格式,这些新格式在设计时考虑到了最小化文件同时仍然保持质量。 “WebP”无疑是过去 10 年中最引人注目的更新。

在下面的示例中 - 由 Google WebP 网站提供 - 我们比较了两个具有相同质量的图像。 一个是JPEG,另一个是WebP,我们注意到三件事,即:

  • JPEG 或 WEBP 中的图像质量保持不变
  • JPEG 文件大小为 43.84 KB。
  • WebP 文件为 29.61 KB,比 JPEG 格式要轻得多。
JPEG 与 WebP:质量相同但大小不同 - 来源:WebP Gallery

WebP 格式可帮助您实现以下平衡:高质量图像和低文件大小

为什么应该将图像转换为 WebP

WebP 格式的主要好处是创建更小的图像文件,同时保持相同的图像质量。 因此,图像压缩将导致您的网站加速。

您可能没有意识到这一点,但图片在您的服务器上占用了如此多的空间。 它不仅会疯狂地消耗存储空间,而且还会减慢网站速度并让您的访问者跑掉。

JPEG、PNG 和 GIF 是可以轻松转换为 WebP 的格式:

  • JPEG :最常见的格式,非常适合色彩丰富的照片和视觉效果
  • PNG:简单图形、图标和徽标的推荐格式
  • GIF:用于标点您的消息的所有动画图像

Google 进行了一项 WebP 压缩研究,以了解 webP 在文件大小方面与 JPEG 和 PNG 格式的比较。 结果很有趣:

  • WebP 图像比 PNG 图像小 25%。
  • WebP 图像比 JPEG 图像小 25-35%。

这些结果表明,与 JPEG 和 PNG 相比,WebP 可以提供显着的压缩改进。 在下图中,我们看到 WebP 图像始终需要比 JPEG 更少的每像素位数:


此外,Google PageSpeed Insights 建议您以下一代格式 (WebP) 提供图像,这意味着更快的下载和更少的数据消耗。 Web 性能工具还建议使用 WordPress 插件来压缩图像并将其转换为最佳格式。

猜猜谁在名单上? 想象一下!

如何将图像转换为 WebP

Imagify 是最好的 WordPress 插件之一,可以将您的图像转换为 WebP 并对其进行优化。

我们都知道可以转换多种格式(例如,从 JPG 到 PDF)的在线工具。 这些工具对用户不友好,其中大多数不允许您免费进行批量转换。

插件可能更容易将您的文件转换为 WebP。 让我们看看为什么。 当谈到 WordPress 时,事情变得有点复杂。 WordPress 5.8 允许您上传 WebP 图像,但它不会将原始格式转换为 WebP

这就是为什么我们建议您上传 PNG 和 JPEG 图像并让 Imagify 完成这项工作。 Imagify 插件可以在您的 WordPress 仪表板中自动将您的图像转换为 WebP 格式。 它将通过缩小网站上的任何 JPG、GIF 或 PNG 文件来优化它们,从而在不牺牲质量的情况下获得更快的浏览体验。 如果您已将图像添加到已发布的页面中,请不要担心,Imagify 也会转换它们。

Imagify 自动优化 WordPress 图像并将其转换为 WebP:

  • 上传新图片时
  • 在您现有的上(批量功能,这将为您节省一些宝贵的时间)

更重要的是,Imagify 可以帮助您在 WordPress 上更快地加载照片。 该插件以原始格式压缩多个图像,并将图像大小调整为一组最大尺寸而不会降低质量。 它不仅仅是一个转换器工具。 它也是一个插件,可以帮助您的 WordPress 网站运行得更快!

按照我们的分步指南了解如何使用 Imagify 将图像转换为 WebP:

第 1 步 – 免费下载 Imagify

激活插件并创建一个免费的 API KEY。

(转到您的电子邮件收件箱以获取您的 API 密钥并将其粘贴到下面的框中)。

第 2 步 – 设置 WebP 转换选项

添加 Imagify API 密钥后,转到设置 → Imagify并滚动到“优化 Webp 格式”部分。 确保两个框都被选中,如下所示:

Webp 格式转换 - Imagify 仪表板

第一个框告诉 Imagify 将您的图像转换为 WebP; 第二个表示将这些 WebP 图像提供给支持的浏览器的插件。

第 3 步 - 转换图像的时间

转到Media -> Bulk Optimization并按下蓝色的Imagify'em all按钮:

而已! 使用 Imagify,您只需三个步骤即可获得更快的网站。

Imagify 的定价(是的,提供免费计划!)

入门计划: Imagify 允许您每月免费优化和转换 20 MB 的图像(大约 200 个图像)。

增长计划:如果您需要更多,可以升级到付费计划,500 MB(约 5,000 张图像)每月收费 4.99 美元。

无限计划:无限数据每月 9.99 美元。 如果您有一个包含数千张图片需要优化的网站,那就太好了。

定价可以在 Imagify 的官方网站上找到。

WebP 对 Imagify 性能的影响

现在让我们看看如何使用 Imagify 来减小媒体文件的大小。

为了分析,我们将使用我们的 WordPress 仪表板运行两个场景:

  1. 我将上传 GIF、PNG、JPG 并检查每个文件的大小。
  2. 我将激活 Imagify,将上面的 3 个文件转换为 WebP并验证新文件的大小。

让我们运行分析。

  • Imagify 对我的 GIF 文件大小的影响:
GIF 文件大小 - 没有想象WebP 格式 – 使用 Imagify
816 KB 512 KB
  • Imagify 对我的 PNG 文件大小的影响:
PNG文件大小 - 没有想象WebP 格式 – 使用 Imagify
67 KB 28 KB
  • Imagify 对我的 JPG 文件大小的影响:
JPG 文件大小 - 没有想象WebP 格式 – 使用 Imagify
755 KB 525 KB

在将它们转换为 WebP 时,Imagify 是否减小了我的文件大小?

答案是肯定的! 如您所见,使用 Imagify 和 WebP 格式后,所有文件大小都显着减小。 这是一个回顾:

  • GIF → WebP :大小从 816 KB 变为 512 KB
  • PNG → WebP :大小从 67 KB 变为 28 KB
  • JPEG → WebP :大小从 755 KB 变为 525 KB。

使用 Imagify 提高我在 Google PageSpeed Insights 上的表现等级

对于此性能审核,我构建了一个显示一些媒体的页面:一张 JPG 照片、一个 PNG 元素和一个 GIF。

我们将使用 Google PageSpeed Insights 并运行以下两个场景:

  1. 场景 #1 – 我的页面的性能审计(PNG 和 JPG 格式的图像 + GIF) – 没有 Imagify – 没有 WebP
  2. 场景 #2 – 使用 Imagify 将所有媒体转换为 WebP 后页面的性能等级

场景 #1没有 Imagify – 没有 WebP

我在 Google PageSpeed Insights (88/100) 上处于橙色状态,但并非我所有的核心 Web Vitals 都处于绿色状态:

没有 Imagify 的审计 - 来源:PSI

在机会部分,我们可以看到与我的图像格式相关的几个问题,例如“将视频格式用于动画内容”或“以下一代格式提供图像”。

机会部分 - PSI

如果我有 200 种产品的 50 页,我会非常担心手动转换它们……但幸运的是,Imagify 可以为我做到这一点!

场景 #2:使用 Imagify 的 WebP 格式

现在让我们看看使用 Imagify 将所有媒体转换为 WebP 后的结果。

我的成绩提高了:我在果岭上,得分为 99/100!

感谢 Imagify,我的绿色分数 - 来源:PSI

在机会部分,我所有与图像相关的问题都消失了:

由于 Imagify 解决了图像相关问题 - 来源:PSI

包起来

WebP 无疑是一种减少图像大小并使您的 WordPress 网站加载速度更快的有效方法。 这种现代格式比 JPEG 或 PNG 文件平均节省约 25% 的存储空间。 另一个好消息是用户体验不会受到影响,因为图像质量保持不变。

此外,如果您有至少 200 个不同大小的一种类型的图像文件(png 或 .jpg),请不要担心,因为我们强大的 Imagify 插件将用优化的 WebP 格式替换它们而不会牺牲质量。

WordPress 5.8 将添加对 WebP 图像的支持(但不会将它们从原始格式转换为 WebP)。 这就是为什么我们仍然建议您使用插件来转换您的文件。 原因如下:

  • 将 WebP 图像直接上传到媒体库的功能无法解决大约 5% 的浏览器不支持 WebP 的访问者。
  • 图片和图片通常是 JPG 或 PNG 格式,因此要上传并批量转换,像 Imagify 这样的插件可以为您节省数百小时。

拿 Imagify 来试驾怎么样? 每月大约 200 张图片是免费的。

请记住,如果您对在 WordPress 网站上使用 WebP 有任何疑问,请在下面的评论中询问我们!