使用 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。这里推荐两个在线工具：
总结
在现代WEB开发中，图像优化是必须的，使用 WebP 图像是开始优化的策略之一，因为它们为更小的文件大小提供了非常高质量的图像。这意味着更快的加载时间和体验。