webp 图片试水

前言

目前网络中图片仍然是占用流量较大的一部分，对于移动端更是如此，因此，如何在保证图片视觉不失真前提下缩小体积，对于节省带宽和电池电量十分重要。然而目前对于JPEG、PNG、GIF等常用图片格式的优化已几乎达到极致，因此Google于2010年提出了一种新的图片压缩格式 — WebP，给图片的优化提供了新的可能。
现如今webp也在各大公司广泛使用，那么它和常规的图片有什么不同呢？

---

基本概念

1. WebP（发音weppy)，是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式。
2. WebP最初在2010年发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间。
3. 根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45％的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28％的文件大小。

有损压缩上，webp只是比JPG所有处理过程多了一个预测模式，在数据压缩方面就把JPG干倒，WebP能够轻易的比jpg小很多。

png vs webp

• PNG 转 WebP 的压缩率要高于 PNG 原图压缩率
• 同样支持有损与无损压缩转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）
• 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数
• 不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

科技博客 Gig‍‍‍aOM 曾报道：YouTube 的视频略缩图采用 WebP 格式后，网页加载速度提升了 10%；谷歌的 Chrome 网上应用商店采用 WebP 格式图片后，每天可以节省几 TB 的带宽，页面平均加载时间大约减少 1/3；Google+ 移动应用采用 WebP 图片格式后，每天节省了 50TB 数据存储空间。

综上可以简单的总结出，webp可以在不明显损失质量的前提下降低大小，同时也支持透明通道。

---

压缩原理

（因为网上零零散散没有很全的归纳文档，干脆直接阅读官方文档归纳总结其主要陈述内容，如果翻译有误欢迎指出。）

谷歌不断的在寻找提速的办法，其中之一就包括通过压缩图片60%-65%的大小来提高页面渲染速度。webp比常规的png和jpg图片通常要小个30%大小。其特点：

• 基于VP8的有损压缩
• 无损压缩
• 透明度
• 动画：支持彩色动图
• 元数据：包含EXIF and XMP metadata （例如用于相机）
• 颜色档案：It may have an embedded ICC profile，颜色管理器

webp有损压缩

使用预测性编码去处理一张图片，派生自VP8压缩视频的关键帧的视频编码方式。编码器会根据先前加工好的块去进行预测推算，冗余会被减去，最后只保留非重复内容。
转换编码结束后，留存的大量0也会被压缩掉。有趣的是数字化是唯一一个可能造成有损的步骤，其余步骤都是可逆且无损的

下图展示了有损压缩的步骤，其中红圈部分是与jpg不同的地方。

webp有损压缩步骤

webp无损压缩

WebP无损编码是通过各种技术传输图片完成的。熵编码在传输的参数和图片上去执行。

• 空间预测：通常邻近的片段有相互关系，因此可以利用空间预测减少多余存储。
• 颜色传输：目的是去相关每个像素的r、g、b值。保持g(green)不变，r(red)基于g，b(blue)基于r再基于g。
• 颜色标志传输：当颜色位数小于256时，使用调色板用array存储。
• 颜色缓存编码：无损压缩去查看32个最近使用的颜色。
• 允许透明通道传输

---

使用

实际使用很简单，拿到webp图片之后和普通的图片一样，直接引入就行。主流设备应该都已经支持了，兼容旧设备可以通过js代码去区分写逻辑。

// 直接返回是否支持webp
return document.createElement('canvas').toDataURL('image/webp')
.indexOf('data:image/webp') === 0

---

参考

webp谷歌官方介绍
webp图片牛刀小试