动态WebP图片格式简介

背景

最近接到一个Android端支持apng和webp动图播放的需求，所以对apng、webp图片格式进行了详细的学习，今天在这里针对webp格式的图片进行一下简介。

WebP图片简介

WebP是Google于2010年提出的一种新的图片压缩格式。它为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45％的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28％的文件大小。

同时，谷歌于2014年提出了动态WebP，拓展WebP使其支持动图能力。动态WebP相比GIF支持更丰富的色彩，并且也占用更小空间，更适应移动网络的动图播放。

动态WebP详解

下面进入我们的主题，动态webp，这里我会对其文件格式用于解析播放的部分做一下讲解。

播放原理

webp的播放原理类似于gif和apng，都是逐帧播放，记录每一帧变化区域的长宽、坐标、播放延时，来还原播放

文件格式

首先我们来看一个示例：

webp动图示例

上面就是一个动态webp该有的文件格式，下面我们来分析一下。

首部：webp首部包含12字节，分别为RIFF、File Size以及WEBP，其中File Size为文件大小，WEBP为文件标示，我们可以根据WEBP来判断其文件格式

扩展格式：扩展格式包括：VP8X用于指明使用的特性、可选的‘ICCP’用于色彩配置、可选的‘ANIM’用于动画控制、可选的‘EXIF’用于EXIF元数据、可选的‘XMP’用于XMP元数据。对于静态webp图片，其只包含1帧的数据，而动态webp包含多帧。

l:当图像包含透明数据时置位。

a:动态WebP置位，此时ANIM和ANMF数据块中的数据将会被使用来控制动画。

Canvas Width Minus One:画布的真实宽度是该数值+1。

Canvas Height Minus One:画布的真实高度是该数值+1。

可以看出，我们可以通过此数据块拿到透明度、animation动画标记以及画布的宽高。

动画：动画我们主要关注ANIM和ANMF块。

其中ANIM Chunk定义了动画的全局参数，包括backgroundColor以及loopCount。

而对于ANMF Chunk，其包含了一帧的图像数据，一个动画里面会包含多个ANMF Chunk。它内部定义了：

Frame X: 该帧数据左上角X坐标为该值 * 2。

Frame Y: 该帧数据左上角Y坐标为该值 * 2。

Frame Duration: 播放该帧后的延时时间。

Blending method (B): 标识如何混用前面画布的相应透明像素点。置0时，需要清空前一帧。置1时，不清空，直接渲染这一帧数据。

Disposal method (D): 标识该帧数据在被显示后如何处理画布。置0时不处理；置1时将画布矩形区域转换成ANIM定义的背景颜色。

Frame Data:以2字节为单位，包含图像比特流数据以及可选的透明度数据。

总结

作为一种新兴的图片格式，webp在压缩算法上进行了优化，同时有着不错的显示效果。对于动图，它的体积比gif小，但是显示效果比gif强，但是支持广泛度上不如gif。

参考

https://zhuanlan.zhihu.com/p/23648251

https://zh.wikipedia.org/wiki/WebP