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

技术教程 2022年1月19日
975 0

就在每个人都认为 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 多实现 30% 的压缩率和JPEG 2000，这就是我们今天要关注的格式.

什么是 WebP?

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

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

另一种是WebP无损格式，与PNG图片格式类似，但带有26文件大小减小 %.

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

diagram summarizing capabilities for JPEG, SVG, PNG, WebP and GIF
这里是一个快速的功能回顾

WebP 支持以下:

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

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

对于不同文件格式的直接比较，查看这篇文章.不要忘记获取可下载的备忘单.

免费 WebP

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

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

Screenshot Google suggesting next gen images
真正微妙的

事实上，如果您最近使用过 Google PageSpeed Insights，您可能已经注意到"以下一代格式提供图像"机会消息.这是 Google 推动您采用 WebP 图像的方式.(如果您在 Google PageSpeed Insights 中收到"图片尺寸合适"的消息，请尝试缩放图片.)

如何将 WebP 图片添加到 WordPress

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

Failed to upload webp message WP media library
抱歉，不抱歉

有多种方法可以解决 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，然后下载新图像.

Screenshot of online webp conversion tool
一个下来，一千个去

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

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

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

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

为 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 图像.这是一种方法.

您还可以使用 Modernizer 等 JavaScript 库，该库 以几乎相同的方式检测 WebP 支持.

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

2.使用浏览器接受标头

访问者的浏览器将发送一个"接受"请求标头，指示它将接受来自网络服务器的图像格式(爱，火狐).

如果您曾经向朋友下过餐单，当您告诉他们给您带一些意大利面回来时，您也做过类似的事情，但因为您过敏，所以没有吃虾.在这个类比中，您的朋友是服务器，而您是指定您将接受什么的浏览器.

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

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

3.修改 WordPress 中的超文本访问 (.htaccess) 文件

所以你的.htaccess 文件位于你的根目录中，它是一个独特的文件有几个原因:

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

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

Screenshot of.htaccess file in WordPress
这是 WordPress 中的.htaccess 文件通常的样子

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

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

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

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

<img src="image.jpg" alt="my image" width="100" height="100"/>

<picture> 元素还有很多事情要做:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="my image" width="100" height="100">
</picture>

看到 <img> 是如何嵌套在 <picture> 元素中的吗?不支持 WebP 图像的浏览器将回退到 <img> 元素中指定的图像.实际上，<img> 是一个要求(否则图像将无法渲染)，并且必须出现在最后.

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

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

首先，您需要激活 Smush Pro CDN.在 Smush 设置中，转到 CDN 部分，然后按 Get Started 按钮.

Screenshot of Smush Pro settings
Smush CDN 包含在 Smush Pro 中

激活 CDN 后，向下滚动到 CDN 设置中的 WebP 转换并启用.

Screenshot of Smush Pro settings
这很容易

就是这样！如果您想无风险地试用 Smush Pro，请注册免费试用.

开始优化

成为开拓者并非没有挑战，这就是为什么我们让您轻松开始使用 WebP 而不需要繁琐的事情.WebP 图像成为常态只是时间问题，所以您不妨开始吧.

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

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

标签:

webp(2)WordPress(893)图像(37)
♥赞6

相关文章

发表回复