图像优化与 WebP 基础

图像在网站性能中起着至关重要的作用。人们经常提到，WordPress 页面速度的最大拖累不是代码，而是图像。对于任何想要优化其网站的人来说，了解 WebP 都是必不可少的。

为什么 WebP 体积更小：一种不同的压缩方法

自 1992 年问世以来，JPEG 使用了一种称为离散余弦变换（DCT）压缩的方法。这种方法效果很好，但 Google 于 2010 年推出的 WebP 采取了不同的方法。WebP 使用了来自 VP8 视频编解码器的帧内压缩技术。这意味着它通过查看单个帧内的信息来压缩图像，类似于它处理视频帧的方式。

由于采用了这种不同的方法，WebP 可以在保持相当的视觉质量的同时，实现比 JPEG 更小的文件体积。当需要在网站上快速加载图像时，这是一个显著的优势。

WebP 的多功能性

WebP 的另一个好处是它的多功能性。它支持多种压缩类型：

• 有损压缩: 非常适合可以接受一定质量损失的照片。
• 无损压缩: 最适合必须保持质量的图像，例如徽标和屏幕截图。
• Alpha 通道透明度: 类似于 PNG，允许透明背景。
• 简单动画: 类似于 GIF，但文件体积通常更小。

这意味着你不必针对不同需求使用不同的格式（照片使用 JPEG、透明度使用 PNG、动画使用 GIF），而是可以在所有这些场景中都使用 WebP。

浏览器如何决定提供哪种格式

当 WebP 最初推出时，并非所有浏览器都支持它。为了解决这个问题，使用了一种称为 HTTP 内容协商的方法。当浏览器请求图像时，它会发送一个指示其支持哪些格式的标头，如下所示：

Accept: image/webp,image/*,*/*

然后，服务器或内容分发网络（CDN）可以检查此标头。如果浏览器支持 WebP，服务器就会提供 WebP 版本；如果不支持，则回退到 JPEG 或 PNG。

你也可以直接在 HTML 中指定要使用的格式。使用 <picture> 元素允许你包裹一个 WebP 源和一个后备 JPEG 图像：

<picture>
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Description">
</picture>

这样，浏览器就会自动选择它支持得最好的格式。

截至目前，Chrome、Firefox、Edge 和 Safari 等主流浏览器都支持 WebP。这种广泛的支持使其成为现代 Web 开发的可靠选择。

WordPress 中的 WebP 支持

WordPress 逐渐接纳了 WebP。在 5.8 版本之前，尝试上传 WebP 文件会导致错误消息。然而，随着 WordPress 5.8 的发布，WebP 文件成为了媒体库中允许的格式。

后来的 WordPress 版本更进一步，在上传 JPEG 时自动将衍生图像尺寸（例如缩略图）转换为 WebP。这意味着原始 JPEG 文件保持不变，但文章中使用的较小尺寸可以是 WebP，从而减少加载页面时传输的数据量。

然而，这种转换是否发生取决于服务器的图像处理库。并非所有主机托管环境都支持 WebP 输出。

结论

WebP 为图像优化提供了一种现代解决方案，不仅文件体积更小，而且支持多种用例。随着浏览器以及 WordPress 等平台对其支持的不断增加，对于希望提升性能的 Web 开发者和网站所有者来说，它是一个极佳的选择。

优点

• 与 JPEG 和 PNG 相比，文件体积更小。
• 支持多种用例（有损、无损、透明度、动画）。
• 被现代浏览器广泛支持。

缺点

• 一些较旧的浏览器和系统可能不支持 WebP。
• 在 WordPress 中进行自动转换需要服务器兼容性。

注意事项

本文仅供学习参考。在实施时，必须将任何占位符值替换为实际数据。在采信相关说法之前，请务必向原始来源核实。

常见问题

• 什么是 WebP？ — WebP 是由 Google 开发的一种现代图像格式，在保持质量的同时提供更小的文件体积。
• 为什么使用 WebP 而不是 JPEG？ — 在相近质量下，WebP 通常比 JPEG 提供更小的文件体积，从而更有利于 Web 性能。
• 浏览器如何支持 WebP？ — 大多数主流浏览器都支持 WebP，并且它们可以根据自身能力协商提供哪种格式。
• WordPress 可以使用 WebP 图像吗？ — 可以，从 WordPress 5.8 开始，WebP 图像可以上传并在媒体库中使用。
• WebP 有哪些优势？ — WebP 在单一格式中同时支持有损和无损压缩、透明度以及简单动画。
• 使用 WebP 有什么缺点吗？ — 一些较旧的系统可能不支持 WebP，因此可能需要后备方案。

标签

#wordpress #webp #imageoptimization #webdevelopment #compression #browsers #performance #images #tech #tutorial