WebP的工作原理

转载请注明出处：http://www.jianshu.com/p/555859783f63

本篇文章翻译自谷歌出的优化视频里面的光头佬（Colt McAnlis），原文地址需翻墙， 以下正文：

说到互联网的图片格式，JPG一直以来都是标准格式。然而在2013年，Google(和一些开源贡献者)创建了一种新的图片编解码算法，叫做WebP，它旨在同样的的图片质量下比JPG压缩得更小。

WebP有多屌？一张同样大小和复杂度的图片，WebP可以比JPG小24%-35%。真令人震惊，因为JPG已经把文件压缩得差不多极致了。

对我来说，为了节省文件空间值得我把APP里的所有JPG图片转成WebP。另外一个事实是WebP支持大部分主流的浏览器，Android原生也同样支持，我想对于大部分程序来说这都是一个“暴扣”“。(但这只是我个人的观点)。

为了理解WebP为什么能比JPG还要省空间，我们必须了解一下它的编解码原理。

WebP从何而来

WebP文件格式来源于VP8视频编解码(你可能更知道WebM)。VP8编解码器的其中一个强大特性是帧内预测压缩，或者说，视频的每一帧都被压缩，后续帧与帧之间的差异也会被压缩。

这就是WebP的由来：WebM文件里单个被压缩的帧。

或者，更精确的说WebP的核心来则WebM。自从2011年发布以来，WebP作为一个独特文件类型它也做了很多改变和升级。例如像透明度，无损模式，和一些诡异扭曲，以及对动画的支持。

没错，WebP是一种图片格式…来自一种视频格式…它支持动画。(你可以对比一下三种格式香蕉舞，GIF版本，WebM版本，WebP版本)。

不过我们将忽略掉所有这些花哨的东西，专注于理解有损模式的原理。

有损模式

WebP的有损模式是建立在与一张静止的JPG竞争的基础上，因此，你会注意到在对文件处理上有一些惊人相识。

宏块(MacroBlocking)

编码器的第一个阶段是将图片分割成不同”宏块”。典型的宏块包括一个16x16的亮度像素块，和两个8x8的色度像素块。这个阶段非常像JPEG格式里转换颜色空间，对色度通道降低采样，以及细分图片。

预测

宏块里每个4x4的子块都有一个预测模型。(又名过滤)。在PNG里过滤用得非常多，它对每一行都做同样的事，而WebP过滤的是每一块。它是这样处理的，在一个块周围定义两组像素:有一行在它上面为A，在它左边那一列为L。

利用A和L，编码器会将它们放在一个4x4的测试像素块填满，并确定哪一个生成了最接近原始块的值。这些用不同方法填满的块叫做”预测块”。

• Horiz prediction(水平预测)——将块的每列使用左列（L）数据的副本进行填充。
• Vertical Prediction(垂直预测)——将块的每行使用上列（A）数据的副本进行填充。
• DC Prediction(DC 预测)——将块使用 A 上列的像素与 L 左列的像素的平均值进行填充。
• True Motion (TrueMotion 预测)——一种超级先进的模式，我暂时不讲。

值得注意的是，4x4的亮度块还有另外6种模式，但你现在只需知道这些就好;)

基本流程是我们找到这个快最佳的预测块，并导出过滤结果(剩余误差)，然后送到下个阶段。

JPGify it

WebP编码的最后阶段看起来非常像我们的老朋友JPG:

• 对块里剩余的值执行DCT过滤
• DCT矩阵后量化
• 转成量化矩阵后重新排序，然后送到一个静态压缩器里。

这有主要有两点不同：

1. 在DCT阶段输入的数据不是原始的数据块本身，而是预测后的数据
2. WebP用得静态压缩器是算术压缩器，它和JPG用的霍夫曼编码器类似。

结果

从最后的结果看WebP感觉有点像加强版的JPG。WebP的预测阶段相比JPG是最大的优势，它减少了特殊颜色，使得在以后的处理阶段能更有效的压缩图片数据。你可以自己查看WebP vs JPG文档学习，或相信许多关心准确性和图表的聪明人，下图是他们研究出来的对比图表。

总结

WebP只是比JPG所有处理过程多了一个预测模式，在数据压缩方面就把JPG干倒，WebP能够轻松赢下JPG是因为这个大表哥。

如前所述，WebP还有一个无损模式…不过那就是另外一篇文章了。

PS:由于文人水平有限，如有翻译得不好的地方，请留言讨论。