目录
您是否想知道如何在 WordPress 上使用 WebP 以及如何在 WordPress 库中转换您当前的图像？您来对地方了！
如果您在 PageSpeed Insights 上运行 Web 性能，则可能会看到以下一代格式提供图像以提高性能的建议。Google 告诉您忘记 JPEG 和 PNG，并将图像优化工作集中在 WebP 等图像格式上。
本指南解释了如何解决此警告以及您需要了解的有关 WordPress 上的 WebP 的所有信息。还有一份将几乎任何格式转换为 WebP 的最佳工具列表。
什么是 WebP 图像格式？
WebP 由 Google 创建，是下一代网络格式。它为图像提供卓越的无损和有损压缩，同时保持质量。与传统的 JPEG 或 PNG 相比，这种现代格式允许您创建更小的文件大小，从而更快地加载页面。
WebP vs. PNG vs. JPEG
如果您在这三种格式之间犹豫不决并关心性能，请选择 WebP 在 WordPress 上提供优化的图像。你会明白为什么。
JPEG 与 WebP
这两种文件格式都会压缩图像，使其更容易在 Web 上共享并保持其质量。它们看起来非常相似，那么为什么选择 WebP呢？
WebP 文件通常比传统的 JPEG 小得多。根据谷歌的说法，具有有损压缩的 WebP 图像可能比同类 JPEG 文件小 25% 到 34%。
看看下图：与 JPEG 相比，WebP（红色）实现了更好的压缩。
让我们用重 3.7MB 的 JPEG 图像来检查这个声明。转换为 WebP 后，图像保持相同的质量，但文件大小下降到 1.3 MB。
PNG 与 WebP
PNG 主要用于没有背景的 Web 图形，例如徽标和插图，而不是高质量的照片。它们通常比其他格式占用更多的存储空间。WebP 无损图像平均比 PNG 小 26%。
让我们再做一个快速测试，将 PNG 图像转换为 WebP。我们的原始文件重 432 KB，简单转换为 WebP 后，它缩小到 244 KB。
JPEG vs. PNG vs. WebP
总而言之，如果您想提高 WordPress 网站的 Lighthouse 性能分数，请选择 WebP。这就是三种赛制的比较：
哪些浏览器支持 WebP？
2023 年，所有主流浏览器都支持 WebP。例如，Google Chrome、Safari、Firefox、Edge、Opera 浏览器和其他工具本身支持这种现代格式。
为旧版浏览器显示带有回退的 WebP 图像
图像对于确保良好的用户体验至关重要，因此应该向每位访客显示图像，即使是使用旧版浏览器的访客也是如此。如果您想安全起见，您应该启用其他传统格式的回退，例如 PNG 或 JPEG。
如何向 WebP 图像添加回退
- 如果访客使用旧版本，您可以为图像添加 <picture> 标记以实施回退。支持 WebP 的浏览器将显示“dog.webp“，而不支持 WebP 的旧浏览器版本将回退到”dog.jpg“元素。
- 使用像 Imagify 这样的 WordPress 插件，它允许您将图像转换为 WebP 并使用 <picture> 标签来启用 WebP 图像的回退。
如何在 WordPress 上创建和使用 WebP 图像
从 WordPress 5.8 开始，WordPress 完全支持 WebP 格式。只需将您的图像上传到您的媒体库并将其包含在您的内容中即可。
创建 WebP 图像的 4 个最佳插件
不再需要安装第三方扩展将 Web 图像上传到 WordPress，但您需要一个插件来将现有图像转换为 WebP。 以下是 4 个可用于将图像转换为 WebP 的 WebP WordPress 插件：
- Imagify – 一个易于使用的图像压缩插件，提供 WebP 转换。每月大约 200 张图片是免费的。
- WebP Converter for Media – 将标准 JPEG、PNG 和 GIF 格式的文件转换为 WebP 格式。
- WebP Express– 添加一行代码以向用户提供 WebP 图像。
- Shortpixel Image Optimizer – 另一个将 JPEG、PNG 或 GIF 转换为 WebP 和 AVIF 的图像优化插件。
如何在 WordPress 上创建 WebP 图像
在 WordPress 上创建 WebP 图像的最简单方法是使用像 Imagify 这样的插件。您的所有图像都可以一键转换为 WebP，并进行批量压缩。
- 将您的 JPEG、PNG、PDF 或 GIF 上传到您的 WordPress 库
- 从 WordPress 仪表板中，转到 设置 > Imagify > 优化 选项卡
- 选中以下框： 创建图像的 WebP 版本 和 在网站上以 WebP 格式显示图像
如果您不是 WordPress 用户，您还可以使用 Photoshop、Lightroom 或 Sketch 等设计软件将您的媒体直接导出到 WebP：
为图像优化提供额外的推动
除了图像压缩和 WebP 转换之外，延迟加载是向访问者提供优化图像并提高页面加载速度的另一种方式。使用像 Lazy Load 这样的脚本意味着浏览器只加载首屏图像（在用户的视区中）。
此外，在他们的性能报告中，PageSpeed Insights 建议 “延迟屏幕外图像”，这意味着应用延迟加载：
如何将延迟加载应用于 WebP 图像
将延迟加载脚本应用于 WebP 图像的最简单方法是使用 WordPress 插件，例如 WP Rocket。要实施延迟加载，请直接从 WordPress 管理员中执行以下两个简单步骤：
- 前往 WP Rocket > 个人设置 > LazyLoad 选项卡
- 在 images, CSS background images, iframes, and videos中勾选您选择的框。
最后，PageSpeed Insights 可以检测您的 WordPress 网站上是否安装了 WP Rocket，并最终建议您启用 LazyLoad 功能：
结束语
在 WordPress 上以 WebP 格式提供图像是提高性能的一种简单方法。这种下一代格式通过向访问者提供更小的图像文件来帮助改进您的 Core Web Vitals – 而不会影响质量！
WordPress 和主流浏览器现在都支持 WebP，因此您无需担心兼容性。使用 Imagify 或 WebP Converter for Media 等工具，直接从 WordPress 仪表板将您的图像转换为 WebP 比以往任何时候都更容易。
发表回复