WebP 格式调研 - dongshuju/ImageCompressionStudy GitHub Wiki
WebP 介绍
WebP 是Google新推出的影像技术，它可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快。
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
WebP 在各大互联网公司已经使用得很多了，国外的有 Google（Chrome Store 已全站使用 WebP）、Facebook 和 ebay，国内的有淘宝、腾讯和美团等。
WebP
WebP的压缩主要分为有损压缩、无损压缩以及有损带透明通道压缩。
有损WebP (Lossy WebP)
有损WebP基于VP8视频编码中的预测编码方法来压缩图像数据，其基本步骤类似于JPEG压缩，主要包含格式转换、分割子块、预测编码、FDCT、量化、Z排列、熵编码。
无损WebP（Lossless WebP）
无损WebP基于使用不同的技术对图像数据进行转换，包括：预测空间变换、色彩空间转换、使用调色板、多像素打包成一个像素、alpha值替换等技术。对于熵编码，则采用改进的LZ77-Huffman编码来紧凑稀疏值，它是一种对距离值的2D编码技术。
有损WebP（支持透明）
区别于有损WebP和无损WebP，这种编码允许对RGB频道的有损编码同时可对透明度频道进行无损编码。由于这种形式目前其他的格式还未能提供，所以目前需要使用透明度的话都会使用无损的PNG，导致大小膨胀。对于这类图片，WebP提供了较好的压缩效果。相比有损的WebP，添加透明通道只增加22%的大小。
因此，将支持透明的PNG换成无损+支持透明的WEBP可以平均节省60%-70%大小，这个已经被一些含较多Icon的移动网站证明。
动态WebP
动态WebP的原理与GIF和APNG原理类似，每一帧记录变化区域的坐标、长宽、播放延时等用于还原并播放。
WebP 性能 PK
- WebP vs JPEG
谷歌使用Lenna、Kodak、Tecnick还有Image_crawl四个图像来源来做实验，在相同或稍高的SSIM基础上，WebP相比JPEG体积降低25% ~ 34%。
Detail：WebP vs. JPEG at Equal SSIM Index
- 无损WebP 、有损带透明WebP vs PNG
WebP的编码时间较长，是PNG的5倍以上，但解码速度与PNG差不多，甚至很多时候比PNG快。而WebP在编码时占用内存比PNG高25%，解码时比PNG低30%。绝大部分图片经过两种WebP压缩后均比PNG要小。
Detail: Lossless and Transparency Encoding in WebP
- 动态WebP vs APNG
APNG是一种基于PNG的编码，对动图的编码方式类似于WebP，都是对变化的区域进行编码。虽然理论上单张WebP要比PNG小，但有些整合成动图形式后WebP会比APNG更大。苹果iOS 8.1之后开始支持APNG格式。
- 动态WebP vs GIF 优势：
- WebP支持24位RGB和8位透明通道，GIF仅支持8位色彩及1位透明度。
- WebP支持无损和有损两种模式，而且对于动态图，能同时结合有损和无损的图片。而GIF仅支持无损的压缩。WebP的有损压缩技术也更好地适应从现实世界视频中创建的动图。
- WebP相比GIF占用更小的空间。Animated GIFs转换为有损WebP减少64%，转换成无损WebP减少19%，这对移动网络十分重要。
- WebP使用更短的解码时间，WebP所用解码时间是GIF的57%。
劣势： 支持不够普遍。添加WebP支持到浏览器需要添加较多代码，但这在将来当WebP和WebM共享更多解码代码或者WebP被WebM合并后会有改善。
SDWebImage + WebP
SDWebImage中支持WebP格式，可以完成UIImage -> Webp 和 WebP -> UIImage 的转换。
- pod导入：
pod 'SDWebImage'
pod 'SDWebImage/WebP'
-
设置
target－>build setting－>搜索preprocessor添加SD_WEBP=1 -
+ (UIImage *)sd_imageWithWebPData:(NSData *)data;
NSString *path = [[NSBundle mainBundle] pathForResource:@"webp_img" ofType:@"webp"];
NSData *data = [[NSData alloc] initWithContentsOfFile:path];
UIImage *img = [UIImage sd_imageWithWebPData:data];
self.imageView.image = img;
参考资料：