WebP的工作原理
2016-07-13 21:33
351 查看
转载请注明出处: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的由来:WebM文件里单个被压缩的帧。
或者,更精确的说WebP的核心来则WebM。自从2011年发布以来,WebP作为一个独特文件类型它也做了很多改变和升级。例如像透明度,无损模式,和一些诡异扭曲,以及对动画的支持。
没错,WebP是一种图片格式…来自一种视频格式…它支持动画。(你可以对比一下三种格式香蕉舞,GIF版本,WebM版本,WebP版本)。
不过我们将忽略掉所有这些花哨的东西,专注于理解有损模式的原理。
利用A和L,编码器会将它们放在一个4x4的测试像素块填满,并确定哪一个生成了最接近原始块的值。这些用不同方法填满的块叫做”预测块”。
Horiz prediction(水平预测)——将块的每列使用左列(L)数据的副本进行填充。
Vertical Prediction(垂直预测)——将块的每行使用上列(A)数据的副本进行填充。
DC Prediction(DC 预测)——将块使用 A 上列的像素与 L 左列的像素的平均值进行填充。
True Motion (TrueMotion 预测)——一种超级先进的模式,我暂时不讲。
值得注意的是,4x4的亮度块还有另外6种模式,但你现在只需知道这些就好;)
基本流程是我们找到这个快最佳的预测块,并导出过滤结果(剩余误差),然后送到下个阶段。
对块里剩余的值执行DCT过滤
DCT矩阵后量化
转成量化矩阵后重新排序,然后送到一个静态压缩器里。
这有主要有两点不同:
在DCT阶段输入的数据不是原始的数据块本身,而是预测后的数据
WebP用得静态压缩器是算术压缩器,它和JPG用的霍夫曼编码器类似。
如前所述,WebP还有一个无损模式…不过那就是另外一篇文章了。
PS:由于文人水平有限,如有翻译得不好的地方,请留言讨论。
本篇文章翻译自谷歌出的优化视频里面的光头佬(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矩阵后量化
转成量化矩阵后重新排序,然后送到一个静态压缩器里。
这有主要有两点不同:
在DCT阶段输入的数据不是原始的数据块本身,而是预测后的数据
WebP用得静态压缩器是算术压缩器,它和JPG用的霍夫曼编码器类似。
结果
从最后的结果看WebP感觉有点像加强版的JPG。WebP的预测阶段相比JPG是最大的优势,它减少了特殊颜色,使得在以后的处理阶段能更有效的压缩图片数据。你可以自己查看WebP vs JPG文档学习,或相信许多关心准确性和图表的聪明人,下图是他们研究出来的对比图表。总结
WebP只是比JPG所有处理过程多了一个预测模式,在数据压缩方面就把JPG干倒,WebP能够轻松赢下JPG是因为这个大表哥。如前所述,WebP还有一个无损模式…不过那就是另外一篇文章了。
PS:由于文人水平有限,如有翻译得不好的地方,请留言讨论。
相关文章推荐
- 书评:《算法之美( Algorithms to Live By )》
- 按右键另存图片只能存BMP
- photoshop去除图片上的水印
- 动易2006序列号破解算法公布
- C#递归算法之分而治之策略
- upload上传单张图片
- 图片引发的溢出危机(图)
- Ruby实现的矩阵连乘算法
- C# WinForm控件对透明图片重叠时出现图片不透明的简单解决方法
- C#插入法排序算法实例分析
- C#算法之大牛生小牛的问题高效解决方法
- C#算法函数:获取一个字符串中的最大长度的数字
- C#实现把彩色图片灰度化代码分享
- 超大数据量存储常用数据库分表分库算法总结
- C#数据结构与算法揭秘二
- C#冒泡法排序算法实例分析
- C#将图片和字节流互相转换并显示到页面上
- C#监控文件夹并自动给图片文件打水印的方法
- 纯CSS实现的当鼠标移上图片添加阴影效果代码
- 算法练习之从String.indexOf的模拟实现开始