如何修复 WordPress 中下一代格式的服务图像问题？
谷歌是英语用户中占主导地位的搜索引擎。 由于这个事实，WordPress 网站所有者认真遵循 Google PageSpeed Insights 工具中显示的指南和机会。 PageSpeed 工具中流行的警告消息之一是以传统格式提供的图像修复为下一代格式的服务器图像。 在本文中，我们将解释如何在 WordPress 网站中修复此警告以优化您的图像。
Google PageSpeed Insights 中的警告
转到 Google PageSpeed Insights 工具页面并测试您网页的 URL。 您应该会看到一个显示“下一代格式的服务器图像”的机会，如下所示。 您可以看到每个图像的潜在尺寸节省以及页面加载时间的估计节省。
下一代图像格式
在我们继续之前，您必须了解图像格式。 共有三种传统和流行的图像格式：
- 联合摄影专家组（JPEG 或 JPG） – 支持有损压缩
- 便携式网络图形 (PNG) – 支持透明和无损压缩和替换 GIF
- 图形交换格式 (GIF) – 位图格式支持循环多个帧。
现在，为网站推荐了新的下一代格式：
- WebP – 由 Google 开发，用于更好的压缩
- JPEG 2000 – 在图像压缩方面对 JPEG 标准的改进
- JPEG XR – Microsoft 开发的 JPEG 扩展范围格式
你可以 检查谷歌的画廊 直观地比较各种图像。 下一代格式有助于显着减小图像的大小，从而提高页面加载速度。 按照 维基百科, 92% 的浏览器支持 WebP 格式，使其有望替代传统格式。 因此，您必须开始使用 WebP 格式来摆脱 PageSpeed Insights 工具中的下一代格式的服务图像警告。
图像格式的转换
尽管谷歌推动了轻量级图像格式，但它们在应用程序开发人员中并不是很受欢迎。 许多应用程序不支持以这些格式创建图像。 例如，博主流行的屏幕捕获工具 SnagIt 不提供任何选项来创建下一代格式的图像。 您可以创建传统格式，如 PNG 或 JPEG。
现在很难找到创建下一代图像格式的应用程序。 相反，您可以在 WordPress 网站上上传 PNG 或 JPEG 图像，并使用插件将它们转换为下一代图像格式之一。 这是一种有效且简单的方法，因为您不需要更改工作模式。
由于 Google 是 WebP 格式的专有所有者，因此许多插件都支持将传统图像转换为 WebP 格式。 在这里，我们将解释如何将您的图像转换为 WebP 并修复 PageSpeed Insights 工具中的“以下一代格式提供图像”。
用于 WordPress 的 WebP 插件
有很多流行的插件可用于 WebP 转换。
SiteGround 的 SG 优化器
如果您在 SiteGround 上托管，最好的选择是使用 SG Optimizer 插件。 这将开箱即用，可以从您的服务器转换和提供 WebP 图像。 您可以选择压缩级别来控制转换图像的质量，同时保留所有原始图像。 查看我们之前关于如何在 SiteGround 中提供 WebP 图像的文章。
- 您可以简单地启用“SG Optimizer > Image Optimization”部分下的“Generate WebP Copies of New Images”选项。
- 单击“批量生成 WebP 文件”按钮，以无损或预定义的有损压缩级别为所有现有图像生成 WebP 图像。
Smush Pro
Smush 是另一个流行的图像压缩插件，拥有超过 100 万的活跃安装量。 但是，WebP 是此插件中的高级选项，您必须每月支付 5 美元（年度计划）订阅才能使用此功能。
自动优化
该插件使用 ShortPixel CDN 服务通过 WebP 转换提供动态图像优化。 虽然这是结合 CDN 和 WebP 的好选择，但有一个问题。 您每月最多可以免费提供 100 张图片。 如果您需要更多，您必须每月支付 3.99 美元才能启动最多 5000 张图像的高级计划。 当您想要压缩和提供大量图像时，这将是一个昂贵的选择。 如果您想测试自动优化，请在安装并激活插件后，转到“设置 > 自动优化 > 图像”部分。
- 启用“优化图像”复选框。
- 选择图像优化级别为光泽、无损或有损。
- 选中“在支持的浏览器中加载 WebP 或 AVIF？”框。
- 启用“延迟加载图像？” 复选框。
单击“保存更改”按钮并测试您的网站 PageSpeed Insights 工具。 您应该会看到“以下一代格式提供图像”的警告现在消失了。 但是，您将开始在 WordPress 管理面板中看到一条警告消息，说明您的 ShortPixel 配额已被使用，并要求您必须升级计划。
免费的 WebP 插件
幸运的是，像 WebP Express 和 WebP Converter for Media 这样的免费插件很少。 在本文中，我们将解释使用 WebP Converter for Media 插件的过程。
为媒体插件安装 WebP 转换器
登录到您的 WordPress 管理面板并导航到“插件 > 添加新”部分。 在搜索框中键入“webp”以过滤结果并找出 WebP Converter for Media 插件。 单击“安装”按钮，然后在您的站点上激活插件。
启用 WebP 图像转换
激活插件后，您将看到如下消息，然后单击“加速我的网站”按钮。 或者，您可以转到“设置 > WebP 转换器”菜单进入插件的设置页面。
- 选择图像加载模式为“via .htaccess (Recommended)”。
- 为支持的文件扩展名选择 JPEG、JPG 和 PNG。
- 对于支持的目录列表，选择“/uploads”选项。 确保您从默认的 WordPress 上传文件夹中提供图像。 如果您已将图像移动到子域，请选择该目录以便插件正常工作。
- 对于转换方法，选择“GD（推荐）”选项。
- 最后根据您的需要选择图像质量。 该插件使用 85% 作为 WebP 转换的默认质量值。
该插件还使用一些额外的功能来进行额外的图像优化。 您可以保留默认值，也可以根据需要检查并启用/禁用所需的值。 例如，您可以为我们推荐的 WebP 文件选择浏览器缓存，并选择删除较大的 WebP 文件。 选择所有选项后，单击“保存更改”按钮。
重新生成图像
WebP Converter for Media 插件还提供了重新生成所有图像以将它们转换为 WebP 格式的选项。 如果您在安装插件之前在网站上上传了图像，这将非常有用。
签入谷歌浏览器
重新生成所有现有图像后，您可以在谷歌浏览器中打开该网站并检查。 您应该会看到 WebP 图像是从开发人员工具部分提供的。 您可以查看这篇文章，了解如何检查 WebP 图像是否在 Chrome 浏览器上提供。 如果您启用了浏览器缓存，只需复制图像 URL 并查看文件名包含 .webp。
服务器支持问题
不幸的是，并不是所有的 Web 服务器都支持 WebP 转换。 如果在插件设置下禁用了“转换方法”部分，您可以找到此内容。 您的服务器应该安装了支持 GD 或 Imagick 库以支持 WebP 格式。 否则，插件将显示错误，您应该无法使用 WebP 转换。 据我们测试，Bluehost 共享主机服务器不支持 WebP 转换，您将看到如下错误消息。
在这种情况下，您必须与主机讨论以启用对 WebP 图像的所需支持。
使用 WP Rocket 为 WebP 图像启用缓存
如前所述，WebP Converter for Media 插件提供了为 WebP 图像启用浏览器缓存的选项。 这将通过指示浏览器在用户再次打开相同的图像时缓存图像来帮助您加快页面加载。 但是，此选项不适用于许多其他插件，您应该将其与缓存插件的设置结合使用。 例如，如果您使用的是 WP Rocket，请确保启用“图像”部分下的浏览器缓存复选框。 这将使插件能够缓存 WebP 图像并在支持的浏览器上提供服务。
