背景介绍
目前网络中图片仍然是占用流量较大的一部分，对于移动端更是如此，因此，如何在保证图片视觉不失真前提下 缩小体积，对于节省带宽和电池电量十分重要。
然而目前对于JPEG、PNG、GIF等常用图片格式的优化已几乎达到极致，因此Google于2010年提出了一种新的图片压缩格式 — webp，给图片的优化提供了新的可能。
webp为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。据官方实验显示：无损WebP相比PNG减少26%大小；有损WebP在相同的SSIM（Structural Similarity Index，结构相似性）下相比JPEG减少25%~34%的大小；有损WebP也支持透明通道，大小通常约为对应PNG的1/3。
同时，谷歌于2014年提出了动态WebP，拓展WebP使其支持动图能力。动态WebP相比GIF支持更丰富的色彩，并且也占用更小空间，更适应移动网络的动图播放。
webp 的优势体
现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；
同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
（引用知乎里面一张图看一下webp压缩的效果）
webp编码的原理：
webp的压缩主要分为有损压缩、无损压缩以及有损带透明通道压缩。
有损压缩
有损webp基于VP8视频编码中的预测编码方法来压缩图像数据，其基本步骤类似于JPEG压缩，主要包含格式转换、分割子块、预测编码、FDCT、量化、Z排列、熵编码，流程如下图所示，红色代表与JPEG不同的部分。
1) 格式转换
若压缩前图像数据为RGB格式，则需先进行格式转换成YUV格式，Y表示亮度分量，UV表示色度分量。之所以转换成YUV格式是因为人类视觉对亮度远比色度敏感，所以可通过适当减少色度数据的存储来节省数据占用的空间，但却不会对视觉效果造成太大影响，如可每两个或四个相邻的像素点才保存一对UV值。
2) 分割宏块
接下来将数据分割成一个个8x8或16x16的宏块。
3) 预测编码
预测编码的原理是基于前面编码好的宏块，预测多余的动作颜色等信息，属于帧内预测。对各宏块可使用以下几种帧内预测模式：
- H_PRED(horizontal prediction).使用block左边的一列L来填充block中的每一列
- V_PRED(vertical prediction):使用block上边的一行A来填充block中的每一行
- DC_PRED(DC prediction):使用L和A中所有像素的平均值作为唯一的值填充block
- TM_PRED(TrueMotion prediction):使用渐进的方式，记录上面一行的渐进差，以同样的差值，以L为基准拓展每一行。
4) FDCT
FDCT(Forward Discrete Cosine Transform，正向离散余弦变换)是将一组空间域的像素点转变成频域中的系数，对每个宏块执行FDCT，使得变换后数据的低频部分分布在数据块的左上方，高频部分集中在右下方，其中左上角第一个系数称为直流系数，其他均为交流系数。
5) 量化
量化是压缩中损失数据的主要步骤，它主要原理是把经过DCT变换后的宏块中每个数值除以量化表中对应的系数并取整。其中量化表中高频部分对应的系数比低频部分系数要大得多，则在经过量化后，高频部分的频率系数被大大衰减甚至许多被清零，而低频部分的频率系数则较好地被保留。由于人眼对低频部分更敏感，所以经过量化后再还原成图像对视觉效果影响较小，但数据得到有效的压缩。量化的最终目的是减少低频部分非零系数的幅值并增加高频部分零值系数的数量。
6) Z排列
为更便于后续的编码，需在编码前对数据块进行重新的排列，使得低频部分的数据排在前面，高频部分的数据排在后面，以增加数组中连续零值的数量，所以采用一种Z字型的排列方式。
7) DPCM
可用DPCM(Differential Pulse Code Modulation，差分脉冲编码调制)对直流系数进行编码。由于直流系数的数值较大，且相邻数据块的直流系数相差不大，所以可使用DPCM对相邻数据块间量化后的直流系数差值进行编码，从而提高压缩比。
8) 行程编码
行程编码是一种根据相同数据重复多次的情况简化表示的算法，例如1111222222333按照行程编码表示为(1,4)(2,6)(3,3)。由于量化后的交流系数中包含较多连续零值系数，因此可用行程编码对它们进行编码来有效压缩数据长度。
9) 熵编码
熵编码是一种无损数据压缩编码方式，WebP中采用布尔算术编码作为熵编码方式。和其它熵编码方法不同的地方在于，其他的熵编码方法通常是把输入的消息分割为符号，然后对每个符号进行编码，而算术编码是直接把整个输入的消息编码为一个数，一个满足(0.0 ≤ n < 1.0)的小数n。消息越长，编码表示它的间隔就越小，表示这一间隔所需的二进制位就越多。
10) 其他
web还有一些细节上的步骤，比如自适应分块（对不同区域的宏块分配不同的压缩参数）、环路滤波等。
无损webp
无损webp基于使用不同的技术对图像数据进行转换，包括：预测空间变换、色彩空间转换、使用调色板、多像素打包成一个像素、alpha值替换等技术。对于熵编码，则采用改进的LZ77-Huffman编码来紧凑稀疏值，它是一种对距离值的2D编码技术。
有损webp（支持透明）
区别于有损webp和无损webp，这种编码允许对RGB频道的有损编码同时可对透明度频道进行无损编码。由于这种形式目前其他的格式还未能提供，所以目前需要使用透明度的话都会使用无损的PNG，导致大小膨胀。对于这类图片，webp提供了较好的压缩效果。相比有损的webp，添加透明通道只增加22%的大小。
因此，将支持透明的PNG换成无损+支持透明的WEBP可以平均节省60%-70%大小，这个已经被一些含较多Icon的移动网站证明。
webp的劣势
WebP使用的是视频编码
Android4.3之前 是不支持webp的
如果想兼容Android所有系统必须要重新编译libwebp（这里就不教大家怎么编译，大家可以自行百度编译libwebp）
使用libwebp的优势
减少webp解码时间 可以超过 jpg 和png解码的时间
降低编码的时间，比原生的编码小号时间更短 30ms
增加兼容性，兼容所有型号的手机，4.3以下也是兼容的 播放器
关于webp大致介绍到这里，希望对大家有用。
