• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

使用 WebP 图像加速WEB加载

武飞扬头像
天行无忌
帮助43

什么是 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 的比较

image05.png

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

PNG 和 无损 WebP 的比较

image06.png

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

PNG 和有损 WebP 的比较

image07.png

使用 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 图像是开始优化的策略之一,因为它们为更小的文件大小提供了非常高质量的图像。这意味着更快的加载时间和体验。

这篇文章转载于:学新通

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通
  • 本文地址: https://www.swvq.com/boutique/detail/tanfbcac
  • 联系方式: luke.wu●vfv.cc
系列文章
更多 icon
同类精品
更多 icon
我要评论
我的头像
精彩评论
继续加载