WebP使用指南

一、什么是WebP?

webp(weppy，项目主页)是谷歌2010发布的一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 26％ 的文件大小；有损压缩模式相等SSIM质量下，WebP比JPEG减少25-34%的文件大小。在 Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影，而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。

二、WebP的优劣

这种格式优势在哪里？除了压缩效果极好，图片质量能否得到保障？我们通过客观的数据来阐述：
这里列表一个简单测试：对比PNG原图、PNG无损压缩、PNG转WebP(无损)、PNG转WebP(有损)的压缩效果。更多测试请查看这里

可以得出结论：

*PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩
*转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

据权威曾报道：YouTube 的视频略缩图采用 WebP 格式后，网页加载速度提升了 10%；谷歌的 Chrome 网上应用商店采用 WebP 格式图片后，每天可以节省几 TB 的带宽，页面平均加载时间大约减少 1/3；Google+ 移动应用采用 WebP 图片格式后，每天节省了 50TB 数据存储空间。

当然它也不是没有缺点的，WebP解码性能相对 PNG大概会有 4 倍左右的差距，不过这和体积减小带来的性能提升，可以忽略不计了。

三、使用WebP的方法

首先，我们需要一个工具把图转成Web格式，这里就使用Google的官方工具即可，链接，教程

通过这个工具就可以生成webp图片了。

简单使用：
直接将png转化为webp，放到res/drawable目录，我们看看效果

这样就可以了

对于Android环境下WebP的使用，结合文档和实验大概得出如下结论：

• 4.2.1以上(API>=17)，对于webp的decode、encode是完全支持的（包含半透明的webp图）
• 对于4.0+(API=14)到4.2.1(API<17)，只支持完全不透明的decode、encode的webp图
• 4.0以下(API<14)，默认是不支持webp的

如果想在4.2.1以下版本能正常使用WebP，那就需要引入so(webp-android)来做低版本兼容(armeabi-v7a大小为:82kb)，地址，教程
注：webp-android这个库只提供了decode方法

四、实验方法

两张相同尺寸大小的输入法主题banner图，一张为webp格式，一张是png格式。然后让用户随机滑动暂时，统计解码耗时的打点。如果解码失败，打点的耗时就应该是0.

1、测试对象：

  1) 测试类型：PNG和WEBP
  2) 图片大小：1080 x 810
  3）WEBP类型：默认有损压缩
  4) Alpha通道:无

2、加载耗时测试方式

long l = System.currentTimeMillis();
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.drawer_left_header);
Log.d(TAG, "加载耗时:" + (System.currentTimeMillis() - l));

五、数据分析

以下是通过我们输入法项目线上手机的数据，并且PNG和WEBP数据是以ms为单位

1、共收集打点数据：3375条

2、Android版本分布：

3、手机型号分布：

4、WEBP和PNG耗时倍数比：

折线图中数据表明不同系统版本的WEBP和PNG解码耗时倍数比

5、相关崩溃情况和图片加载异常

没有相关的崩溃，解码耗时的打点为0.故加载webp很稳定

6、详细实验数据

7、WebP和PNG体积比较

-	PNG	有损压缩
体积大小	162kb	33.6kb
体积减少	-	79%

六、结论总结

1.无alpha通道的webp，在>=4.0都可以正常加载和使用
2.无alpha通道的webp比png，能够减小体积大概70%左右
3.无alpha通道的webp解码耗时是png的3倍左右，要关注耗时性能酌情替换

七、注意

1.有alpha通道的webp图片，目前还在试验中，后续会跟进。

八、参考资料

Webp项目主页：https://developers.google.com/speed/webp/
更多测试图片地址：https://isparta.github.io/compare-webp/index.html#12345
Webp官方工具：链接(https://developers.google.com/speed/webp/docs/precompiled)，教程(https://developers.google.com/speed/webp/docs/cwebp)
webp-android：链接(https://github.com/EverythingMe/webp-android)，教程(http://blog.csdn.net/lmj623565791/article/details/53240600)