Safari 14.0 已支持 WebP，WebP 时代来袭 – 作者:又拍云

俗话说：一图胜千言。在网上，图片虽然可以让用户更加简单明了地看到更多信息，但是图片体积也可以抵过上千字节甚至更多。研究表明，打开一个 HTTP 网页，其中图片平均占比为 64%。在图片占比如此高的情况下，用户对图片的体积就有非常高的要求了。

我们可以通过图片压缩的方式来缩小图片体积。但是要如何保证图片体积缩小的同时而不大幅降低图片质量呢？传统的图片格式，如 JPEG，PNG，GIF 等格式图片已经没有太多的优化空间，而 Google 于 2010 年推出 WebP 图像格式。WebP 图像在相同素质下，比 JPG 体积小 25-34％，比 PNG 则小 26％，并且，WebP 更可以做到动态 GIF 的部分功能，也支持透明化及失真，无失真压缩等模式。

市面上的浏览器，例如 Chrome，Firefox，Microsoft Edge 都已经支持 WebP，随着 iOS 14 以及 macOS Big Sur 的发布，在 WebP 发布的 11 年后，苹果终于跟进，Safari 开始支持 WebP。至此，主流浏览器均已正式支持 WebP 格式，相信今后 WebP 会获得更为广泛的部署和支持。

△ 浏览器 WebP 支持情况

WebP 的由来

WebP 的诞生起初是因为 Google 开发了一种基于 VP8 视频编码格式的 WebM 视频格式，Google 的工程师意识到 WebM 格式非常适合压缩关键帧，由此开发了 WebP 图片格式。

WebP 主要目标是使图片质量和 JPEG 格式质量相同的情况下，减少图片文件的体积，从而减少互联网上图片的发送时间和流量消耗。发布不久之后，WebP 便被整合到 Chrome 以及 Android 系统中，并且 Google 发布了函数库，让 iOS 应用等其他平台支持 WebP 格式。

相较于 JPEG 只能提供有损压缩，WebP 同时提供有损压缩和无损压缩：

有损 WebP 压缩使用的图像编码方式与 VP8 视频编解码器中压缩视频关键帧的方法相同。利用图像已编码部分预测未编码部分，将图像细分来进行预测处理，分块越细预测越准确。获取编码数值后将原图像数据减去预测数据得到差值，仅对差值进行编码，以此控制大小；
无损 WebP 压缩使用已知的图像片段来精确地重建新的像素，在无法找到相应的匹配值的情况下，使用本地调色板进行优化。

WebP 的压缩效果

与其他图片格式相比，WebP 集合了多种图片文件格式的优点。它可以像 JPEG 一样适合压缩照片和其他细节丰富的图片，或者像 GIF 一样显示动态图片，又或者像 PNG 一样支持透明图像。根据 Google 的测试，WebP 无损压缩图片比 PNG 图片少了 45％的文件体积，即使这些 PNG 图片在使用 pngcrush 和 PNGOUT 处理后，WebP 依旧可以减少 28％的文件体积。

△ WebP 与其他图片体积对比情况

同等质量下得到体积更小的图片，这也是 WebP 的意义。通过压缩图片体积来降低带宽的消耗，为线上服务降低流量成本，更快的展示和更短的图像共享时间，为网站及移动应用用户带去更好的用户体验。像淘宝、京东这类有着大量商品图片的电商网站，或者如花瓣、unsplash 等图库业务，都已经开始使用 WebP 来提高页面加载速度。

△ 淘宝图片格式使用 WebP