就在每个人都认为 WebP 图像已经完成的时候，它们又回来了。 由于 Firefox 和 Microsoft Edge 最近开始支持 WebP 图像，WebP 图像正处于其卷土重来的故事中。

什么是 WebP？ 这是没有人听说过的最好的图像格式，但这种情况即将改变。

在这篇文章中，我将向您展示如何开始在您的 WordPress 网站上使用 WebP 图像。 我们将讨论如何将您的图像转换为 WebP 以及如何为兼容的浏览器提供它们。 如果您不想进入您的站点代码，我还将向您展示 Smush Pro 如何为您解决这个问题。

什么是下一代图像？

GIF 于 1987 年发明。第一个 JPEG 标准于 1992 年发布，PNG 于 1996 年 10 月成为 W3C 推荐标准。

我知道 90 年代很久以前并没有那种感觉，但已经快 30 年了，我们仍在使用相同的图像格式！ 不是时候升级了吗？

进入下一代图像格式。 JPEG 2000、JPEG XR 和 WebP 是现代图像格式，具有卓越的压缩能力和出色的质量，可以取悦网络本地人。 这意味着它们生成的图像文件要小得多，因此您可以通过使用下一代格式来大大提高页面速度。

WebP 是最精简的，通常比 JPEG 和 JPEG 2000 多实现 30% 的压缩，所以这就是我们今天要关注的格式。

什么是 WebP？

WebP 是 Google 的开源图像格式。 他们使用文件扩展名 .webp

WebP 图像有多种变体，一种使用有损压缩，可与 JPEG 图像相媲美，但文件大小要小 25-34%。 有损 WebP 图像还支持透明度，这是 JPEG 无法做到的。

另一种是 WebP 无损格式，它类似于 PNG 图像格式，但文件大小要小 26%。

WebP 图像也是通用的，因为它们具有单一格式的 GIF、JPEG 和 PNG 的功能。 您将能够优化 和 简化。 如果这不能激发快乐，那么什么都不会。

WebP 支持以下内容：

• 动画片
• 无损压缩
• 有损压缩
• Alpha 通道透明度

这意味着您可以将 PNG、GIF 和 JPEG 转换为一种方便的格式，以获得性能优势。

有关不同文件格式的直接比较，请查看这篇文章。 使用时不要忘记获取可下载的备忘单。

免费的WebP

现在是坏消息。 并非所有浏览器都支持 WebP 图像。 但这是一个卷土重来的故事记得吗？ Mozilla 于 2018 年 12 月加入，就在几个月前，它为 WebP 图像提供了一些急需的动力。 现在我们主要在 Safari 上等待，虽然 Internet Explorer 和 Firefox for Android 还不支持 WebP。

尽管如此，像谷歌这样的庞然大物致力于让网络更快并支持该项目，WebP 图像是未来的一个非常安全的赌注。

事实上，如果您最近使用过 Google PageSpeed Insights，您可能已经注意到“以下一代格式提供图像”的机会消息。 这是 Google 推动您采用 WebP 图像的方式。 （如果您在 Google PageSpeed Insights 中收到“适当大小的图像”消息，请尝试缩放您的图像。）

如何将 WebP 图像添加到 WordPress

如果您想成为早期采用者并在 WordPress 中使用 WebP 图像，您还会注意到 WordPress 媒体库出于安全原因不允许您上传 WebP 图像。 不要让那吓到你。 这不是 SVG 情况。 WordPress.com 确实允许 WebP 图片，您也可以在自托管的 WordPress 网站上启用此功能。

有多种方法可以解决 WordPress 中的这些早期采用问题，因此您可以开始使用 WebP 图像。 为此，我们需要一个解决方案：

1. 使用 WebP 转换器将媒体库中的现有图像转换为 WebP 以及将来的上传
2. 能够确定访问者的浏览器是否支持 WebP 图片
3. 提供 WebP 图像（如果受支持）或传统文件格式（如 PNG 或 JPEG）（如果不支持）

剧透警报，如果您不想经历所有这些步骤并经历修改站点文件和优化图像的麻烦，Smush Pro 是一种一体化解决方案，可以将您的图像转换为 WordPress 中的 WebP 和只需轻按几个开关，即可将它们提供给兼容的浏览器。 您可以在此处获得免费试用，以便测试性能优势。

将图像转换为 WordPress 的 WebP

虽然您可以在上传到 WordPress 媒体库之前将图像转换为下一代格式，但如果您有很多图像，这不切实际。

如果您确实需要走这条路（也许您想测试不同图像类型的性能），您可以使用 WebP 转换器，例如 image.online-convert.com/convert-to-webp。 您只需上传 JPEG、PNG 或 GIF 文件，等待它创建 WebP，然后下载新图像。

默认情况下，Adobe Photoshop 不会在 WebP 中导出文件，但您可以使用插件添加此功能。 这与 WordPress 插件不同。 这是一个插件，您可以下载并添加到计算机上的 Adob​​e Photoshop 文件夹中。

您还可以下载并安装适用于 Mac 的 WebPonize 或适用于 Windows 的 Webpconv。 两者都可以进行 JPEG 到 WebP 或 PNG 到 WebP 的转换。

对于 WebP WordPress 图片，您可以使用 SFTP 将 WebP 文件直接上传到您的上传文件夹，从而绕过媒体库。

为方便起见，您还可以通过修改站点的函数文件在 WordPress 媒体库中允许 WebP。

为 WordPress 批量转换 WebP 图像

如果您有一个成熟的网站，需要转换大量图像，那么您将需要一个更好的工具，以便您可以将图像批量转换为下一代格式。

您可以使用 Smush Pro 之类的插件通过她的 CDN 提供所有图像的 WebP 版本。 Smush 保持原始图像不变，并在交付图像之前进行转换。 这意味着 Smush Pro 的 CDN 不会直接修改您的图像或以任何方式损害它们。 如果您关闭 webp 转换选项，服务器将不再将您的图像转换为 WebP，并且您的站点将恢复使用上传时的原始文件格式。

Smush Pro 还为您提供了转换其他文件夹中图像的选项，例如，您可以优化主题的图像背景和图标。

我们将在本文后面介绍如何配置 Smush Pro CDN。

您也可以使用命令行。 请参阅本教程。

如何以下一代格式提供图像

1. 使用 JS 检测对 WebP 的支持
2. 使用浏览器接受标题
3. 在 WP 中修改 .htaccess 文件
4. 使用 HTML5 服务

一些图像优化插件仅将您的图像转换为 WebP 格式，但不负责为您的访问者提供正确的图像。 为此，您可能必须使用其他插件或采取以下步骤之一。

Smush Pro 兼顾两者，在 WordPress 中转换为 WebP 格式并将其提供给兼容的浏览器，这样您就可以跳过所有这些废话。

1.使用JavaScript检测对WebP的支持

您可以通过编写自己的自定义代码来尝试解码 WebP 图像来做到这一点。 如果测试成功，您可以发送额外的 WebP 图像。 这是一种方法。

您还可以使用 JavaScript 库（例如 Modernizer）以几乎相同的方式检测 WebP 支持。

一旦不兼容的浏览器开始支持 WebP，测试浏览器的实际功能还可以节省您必须重写代码的额外工作。 例如，一旦 Safari 支持 WebP 图像并通过您的 WebP 解码测试，Safari 用户将收到 WebP 图像，而无需您重写代码逻辑以包含 Safari。

2.使用浏览器接受标头

访问者的浏览器将发送一个“接受”请求标头，指示它将接受来自网络服务器（love、Firefox）的图像格式。

如果你曾经和朋友订过食物，当你告诉他们给你带些意大利面回来时，你也做过类似的事情，但虾不会因为你过敏。 在这个类比中，您的朋友是服务器，而您是指定您将接受什么的浏览器。

如果浏览器表明它将接受 WebP 图像，则 Web 服务器知道它可以安全地发送 WebP。

这是 Smush Pro CDN 用来检测哪些浏览器将接受 WebP 图像的方法。

3.修改WordPress中的超文本访问（.htaccess）文件

因此，您的 .htaccess 文件位于您的根目录中，它是一个独特的文件，原因如下：

1. 它以点 (.) 开头，表示它是一个隐藏文件。 如果您没有使隐藏文件可见，您将看不到它
2. 它没有文件扩展名
3. 如果您在编辑时出错，您的服务器可能会出现严重故障，所以只有在您知道自己在做什么的情况下才能编辑它！

在 WordPress 中，此文件通常用于重写 URL。 在这种情况下，图像的 URL 已更改并添加了 .webp 扩展名。

例如，在 GitHub 上的 Vincent Orback 代码中，.htaccess 文件被修改。 如果同一文件夹中存在 WebP 版本并且浏览器支持 WebP，则会修改 JPEG 和 PNG 图像 URL。 在这种情况下，提供正确图像的责任落在 Apache Web 服务器上。

4. 使用 HTML 5 提供多种尺寸和格式

提供 WebP 图像的更好方法之一是依靠浏览器选择最佳图像并使用 HTML5 <picture> 元素来传达可供浏览器选择的不同图像。 您不仅可以使用 <picture> 元素提供不同的图像格式，但也为移动和视网膜设备提供不同的尺寸。 看看这个可爱的例子。

虽然图像的 HTML 看起来像这样：

这 <picture> element 还有很多事情要做：

看看如何 <img> 嵌套在 <picture> 元素？ 不支持 WebP 图片的浏览器会回退到指定的图片 <img> 元素。 事实上， <img> 是一项要求（否则图像将无法呈现）并且必须出现在最后。

如何使用 Smush Pro 提供下一代图像

如果这超出了您的想象，有一种更简单的方法可以将您的图像转换为 WebP 并使用 Smush Pro 将它们提供给兼容的浏览器。

首先，您需要激活 Smush Pro CDN。 在 Smush 设置中，转到 CDN 部分并推送 开始使用 按钮。

而已！ 如果您想无风险地试用 Smush Pro，请注册免费试用。

开始优化

成为开拓者并非没有挑战，这就是为什么我们让 WebP 上手变得轻松而无需任何戏剧性的原因。 WebP 图像成为常态只是时间问题，因此您不妨开始。

臃肿的图像通常会导致页面速度下降。 您的访问者希望在其庞大的 Retina 设备上清晰地看到漂亮的大图像，并希望它们能够立即加载。 WebP 图像可以帮助您达到那个高标准。

如果您需要帮助优化图像，请查看我们关于选择正确图像格式和缩放图像的其他帖子。 如果您还没有，一定要试试 Smush Pro。 我们添加了许多新功能，例如对 WebP 的支持，因此您可以保持在图像优化的前沿。

• cdn
• 画廊
• 图片