写点什么

使用 WebP 图像加速 WEB 加载

作者:devpoint
  • 2023-01-12
    广东
  • 本文字数:1851 字

    阅读完需:约 6 分钟

使用 WebP 图像加速WEB加载

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

什么是 WebP 图像

webp 从常见的四种图片格式 JPG(JPEG)PNGSVGGIF 脱颖而出,成为当今 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 图像与其它光栅图像格式(PNGJPGGIF)的特征进行快速比较可以看出这一点。WebP 做得更好,应该不足为奇,因为它是一种比其他光栅图像格式更新得多的技术。

JPG 和 WebP 的比较


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

PNG 和 无损 WebP 的比较


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

PNG 和有损 WebP 的比较


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

GIF 和 WebP 的比较

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


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

将图像转换为 WebP 格式

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


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

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

  • cwebp:node 环境下的依赖库

总结

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

发布于: 刚刚阅读数: 3
用户头像

devpoint

关注

细节的追求者 2011-11-12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
使用 WebP 图像加速WEB加载_Web_devpoint_InfoQ写作社区