使用 WebP 图像加速 WEB 加载

在文章《 9 个前端性能优化的最佳实践》中提到使用 webp 和 avif 等新图像格式比 jpg 和 png 等旧格式具有更好的性能。webp 是 Web 上可用的众多图像格式之一，在本文中，将具体了解它是什么、何时应该使用它以及为什么建议使用它。

什么是 WebP 图像

webp 从常见的四种图片格式 JPG（JPEG）、PNG、SVG、GIF 脱颖而出，成为当今 WEB 上众多图像格式中最流行的。

• JPG（JPEG） 是图像的首选格式，在这些图像中，尺寸考虑因素比图像细节和质量考虑因素更重要。JPG 易于压缩并且高度可压缩，因此它们的文件大小足够小，这一特征是网站速度优化策略之一。然而，不利的一面是，JPG 格式在压缩（有损压缩）期间会牺牲质量以换取更小的尺寸和大小，并且在压缩时很容易看到伪影，因为 JPG 缺少 alpha 通道（实现真正透明背景所需的图像属性）。

• PNG 是高质量图像的首选格式，尤其是那些透明度很重要的图像。这是因为 PNG 支持 alpha 通道（透明）和不丢失图像细节的压缩（无损压缩）。但是，PNG 格式的高质量图像的代价是文件体积较大。再加上 PNG 的压缩效率不如 JPG，因此 PNG 的加载时间会更长，并且会占用更多的存储空间。

值得注意的是，由于 PNG 编码颜色的方式，对于包含很少或仅包含一种颜色的图像，PNG 的文件大小可能比 JPG 小。

• SVG 是可缩放矢量图形。 SVG 通过将图像编码和存储为线条的二维数学坐标，以不同的方式处理图像的整个概念。这种方法意味着大大减少文件大小和确保图像的无损。SVG 的加载速度比任何其他图像格式都快得多，并且占用的存储空间相对较小。然而，由于两个简单的原因，SVG 并不是大多数情况下的解决方案。

• 首先，SVG 格式的调色板非常有限，因此无法很好地呈现具有大量颜色变化的图像。

• 其次，由于 SVG 的二维性质，这种图像格式不能很好地表示深度。由于网络上的大多数图像都是颜色变化非常复杂的照片，因此 SVG 通常不是此类图像的最佳选择。

当图像必须易于缩放并在不同尺寸下保持其所有质量时，SVG 是首选格式，SVG 最闪耀的使用场景是作为图标，也是网络动画的一个可能但较少采用的选项。

• GIF 是最常用于动画的图像格式。它具有无损压缩、8 位颜色格式（256 种颜色）和无 alpha 通道。其有限的调色板意味着每个动画帧的文件大小更小，这在处理动画时特别有用。

那么什么是 WebP 图片？它是谷歌为“现代 WEB”开发的图像格式，目的是在通过提出一种适用于所有图像的方法来解决其他流行的 WEB 图像格式所带来的问题，WebP 的特点：

• 具有有损和无损压缩的高度可压缩图像

• alpha 通道支持透明度，在有损和无损压缩中都保持不变

• 支持动画；

最重要的是，它以比其他流行格式（SVG 除外）更小。

WebP 与其他图像格式

将 WebP 图像与其它光栅图像格式（PNG、JPG、GIF）的特征进行快速比较可以看出这一点。WebP 做得更好，应该不足为奇，因为它是一种比其他光栅图像格式更新得多的技术。

JPG 和 WebP 的比较

原始图像为 JPG，文件大小为 1.42 Mb。上图比较了压缩率为 75% 的原始图像的 JPG（中线左侧）和 WebP（中线右侧）版本。JPG 压缩版本导致文件大小减少 25%，质量略有下降（放大时）。另一方面，WebP 格式在相同的 75% 有损压缩下的文件大小减少 60% 。WebP 图像的文件大小仅为 574kb，更令人印象深刻的是，它明显比 JPG 压缩版本更清晰。

PNG 和 无损 WebP 的比较

原始图像是 1.07 Mb 的 PNG 图像，使用无损选项以尽可能的保留质量，转换为 WebP 后文件大小减少了 39%，大概 653kb，同时还保留了与 PNG 图像相同的质量。

PNG 和有损 WebP 的比较

使用 75% 的有损压缩 WebP ，文件大小减少了 91%，仅为 97.2kb。虽然质量变化在缩放时非常明显，但图像质量仍然可用，并且在很多情况下，需要权衡图像质量和带宽及存储空间。

GIF 和 WebP 的比较

使用 873kb 的 GIF 进行的最终测试发现文件大小略有下降至 719kb，相比来说文件大小降低的比较少。

WebP 是一种光栅图像格式（以像素为单位存储图像），因此它不能填补 SVG 用例的空白。然而，正如上面所介绍的，WebP 可以作为其他光栅图像格式的更佳替代方案。

将图像转换为 WebP 格式

将任何图像转换为 WebP 都相对容易，有很多在线站点都支持图像与多种图像格式之间的转换，因此可以开始考虑在网站中使用 WebP。这里推荐两个在线工具：

• squoosh：支持 WebP 图像的文件转换和压缩

• ezgif.com：一个简单的在线 GIF 制作工具和用于基本动画 GIF 编辑的工具集。

• cwebp：node 环境下的依赖库

总结

在现代 WEB 开发中，图像优化是必须的，使用 WebP 图像是开始优化的策略之一，因为它们为更小的文件大小提供了非常高质量的图像。这意味着更快的加载时间和体验。