WebP转换技术图片瘦身实践总结

一、Android系统版本对WebP的支持

Android 系统在 4.0 版本中添加入了 WebP 的支持，并在 4.2.1 版本中加强了它:

• 4.0+ (Ice Cream Sandwich): 基础的 WebP 支持

• 4.2.1+ (Jelly Beam MR1): 支持带透明度与无损的 WebP

Fresco 默认使用系统的 WebP 方案来加载它。
但同时，Fresco 能够让你在更老的版本中使用 WebP，所以如果你想要在 Android 2.3 版本的设备上使用 WebP， 你需要做的就是在工程中添加一个 webpsupport的依赖：

dependencies {
  // your app's other dependencies
  compile 'com.facebook.fresco:webpsupport:1.0.1'
}

二、WebP介绍

官方介绍：

A new image format for the Web

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.

SSIM(structural similarity index)，结构相似性，是一种衡量两幅图像
相似度的指标。该指标首先由德州大学奥斯丁分校的图像和视频工程实验室
(Laboratory for Image and Video Engineering)提出。SSIM使用的两张
图像中，一张为未经压缩的无失真图像，另一张为失真后的图像。

以上内容可总结为2点：

1. 无损压缩的WebP比PNG至少压缩26%的体积，在相同的SSIM下有损压缩的WebP比JPEG压缩至少25-34%的体积；

2. 无损WebP的支持的透明通道只占大约22%的字节，有损压缩支持RGB和透明度的压缩，通常可以压缩PNG的1/3文件大小；

这是google经过测试得出的结论；

目前国内外各大互联网公司已逐步使用WebP，科技博客GigaOM曾报道，YouTube的视频缩略图采用WebP后，网页加载速度提升了10%；谷歌网上应用商店采用WebP后，每天可节省几TB的带宽，页面平均加载时间大约减少1/3；谷歌移动应用市场采用WebP图片格式后，每天节省了50TB的存储空间；2014年腾讯新闻客户端应用了WebP后，流量峰值带宽降低9GB，网络连接延时不变的前提下，平均图片延时和数据下载延时降低了100ms；2014年空间装扮也全量转换成WebP，带宽上也有显著降低。（虽然听说目前已转成SharpP格式…）

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

WebP（发音 weppy，项目主页），是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。

WebP和VP8的关系？WebP是容器，VP8是编码。

目前市场上常用的视频编解码器H.264 AVC, H.265 HEVC以及Google开源的VP8和VP9编解码器。
1、H.264/MPEG-4第10部分，或称AVC（Advanced Video Coding，高级视频编码），是一种视频压缩标准，一种被广泛使用的高精度视频的录制、压缩和发布格式，H.264因其是蓝光盘的一种编解码标准而著名，所有蓝光盘(blue-ray)播放器都必须能解码H.264。它也被广泛用于网络流媒体数据如Vimeo、YouTube、以及Apple的iTunes Store，网络软件如Adobe Flash Player和Microsoft Silverlight，以及各种高清晰度电视陆地广播（ATSC，ISDB-T，DVB-T或DVB-T2），线缆（DVB-C）以及卫星（DVB-S和DVB-S2）；
2、H.265是ITU-T VCEG继H.264之后所制定的高压缩率的视频压缩格式；
3、VP8 是一个开放的图像压缩格式，最早由 On2 Technologiesis 开发，随后由 Google 发布。同时 Google 也发布了 VP8编码的实做库：libvpx，以BSD授权条款的方式发布，随后也附加了专利使用权。
4、VP9 是Google提供的开源的免费视频codec，是VP8的后续版本，初始开发时命名为下一代开源视频或者VP-NEXT. VP9的开发始于2011年Q3，试图降低VP8的50%的码率而保持相同的质量，另外希望VP9比H.265（ High Efficiency Video Coding）有更好的编码效率。 2012年底，VP9的解码器被加入Chrome浏览器，2013年2月发布正式版本的chrome浏览器。VP9支持超宏块大小到32x32，也采用了四叉树的宏块分解结构。

三、WebP的实践对比

实践出真知，为了得出准确的结论，将WebP技术应用到我们的58Android项目中，以下内容都为实践结论：

将PNG转换WebP的效果

将三种图片同时在手机上显示查看效果，图片类型如下：

1. 原图

2. 原图无损压缩（58%）

3. 原图转WebP（有损压缩75%）

从上图可以看出三种图片从肉眼看是无差别的

PNG转WebP是可以控制有损压缩比例的，上图有损压缩75%，肉眼查看无差别，那其他的压缩比例呢？

接下来我们继续做实验查看：

三张图片进行对比

第一张为原图、第二张为使用tinypng在线压缩过的图片、第三张为WebP不同压缩比例的图片

• 无损压缩转换
  
  

• 有损压缩（75%）转换
  
  

• 无损压缩（50%）转换
  
  

• 无损压缩（0%）转换
  
  

数据分析

通过图片效果对比和上表数据分析，WebP的有损压缩75%是图片肉眼看是无差别的，文件体积减少也是较大的，是官方推荐方案

以上对比我们初步有了方案，再思考一个问题：

PNG经（tinypng）压缩是可以叠加压缩，同时图片体积也叠加减少的，那叠加压缩的图片在进行WebP转换是不是效果会更好呢？

带着问题我们做一个实验

1.先将PNG经过tinypng叠加压缩，查看效果

2.将每次叠加压缩后的图片转换WebP（有损压缩75%），查看效果
原图转换WebP

第一次压缩(叠加)后转换WebP

第二次压缩(叠加)后转换WebP

第三次压缩(叠加)后转换WebP

第四次压缩(叠加)后转换WebP

可以看出图片肉眼看是无差别的

我们在分析一下体积变化

结论：webp文体大小与图片压缩次数成正比，WebP的转换最好是用原图转换

GIF转换WebP效果对比

1、原GIF图

2、将原gif转换AnimationWebP

PNG（images with transparency/alpha）转换WebP效果对比

带有透明通道的图片转换效果对比

查看效果后产出结论

1、项目中的原图体积是39.6KB(之前是经过压缩了的图片)，转换（75%）后的体积是43.0KB，反而增大了；
2、不是所有的图片在推荐的有损转换75%的情况下体积会变小，尤其是有透明度通道的图片；

四、讲解一下Android studio 自带 WebP Tool

• 支持有损转换，默认推荐75%，同时支持无损转换；

• 可以跳过那些转换后比原是大小大的文件；

• 点9图是默认跳过，不支持转换的；

• 可以跳过有透明度通道的图片；

五、将项目中hybrid module 的drawable资源压缩

以上试验可以看到WebP转换技术可以使图片体积减小，如果我们将项目中的资源图片都替换成WebP是不是APK的体积会明显减小呢？

就以我们58主工程的hybrid module的drawable资源做实验

1. 使用WebP tool 将所有资源转换，跳过含有透明度通道的图片

2. 查看APK大小

效果分析：
1、仅hybird库就可以减少将近1MB的大小，全部替换更客观；                 
2、但因为WebP格式存在机型适配问题，不能将全部图片替换.

WebP对图片的体积减少真的是个利器，那么内存方面的影响呢，我们项目中图片框架是Fresco，同时Fresco对WebP也做了很好的支持，接下来使用Fresco加载WebP查看内存的占用。

六、Fresco加载WebP在项目实践中的内存占用

项目中往往引导图都是较大的图片资源，使用引导图作为试验对象，查看内存情况，同时可以得出是否有优化空间。

1、项目中找一个引导图做实践

先来看PNG和WebP图片引导图的显示效果

PNG图片,原生控件ImageView加载显示

WebP图片，Fresco控件加载WebP显示

显示效果一致，肉眼看无差别

#引导图PNG转换为WebP操作数据对比

图片体积减少40%

2、引导图PNG和WebP内存占用对比

为了更好的显示对比效果，我做了一个显示数量扩大的试验，具体操作步骤如下：
先使用PNG图片为引导图

• 使用一个引导框（Dialog）为例，有一个引导图，如上图显示；

• 将引导图的PNG图片资源用原生ImageView加载，在未弹起引导框时记录初始状态内存量（A）；
  
  

• 弹起引导框－>关闭引导框－>再弹起引导框－>关闭引导框，每个引导框对象都是new 出来的，如此重复1000次后，记录执行1000次引导操作后内存量(B)；
  
  

• 强制执行GC操作，执行多次，在内存平稳时记录执行GC后内存量(C)；
  
  

• 计算执行GC后比初始状态增加内存量(C-A)。

将PNG图片转换为WebP后使用Fresco加载，重复PNG图片引导图的操作步骤，然后进行数据对比

3、将结果纪录并对比

结论：
1、5.0以上系统，由于内存管理的优化，所以对于5.0以上的系统 Fresco将Bitmap缓存直接放到了Java Heap中，5.0以下系统，图片不存储在Java heap，而是存储在ashmem；
2、Android 原生ImageView的PNG显示引导图增大了native heap内存；
3、使用原生ImageView 加载图片内存增大要比使用Fresco大；
4、强制执行GC只会释放Java Heap，对Native Heap 无影响；

七、Android Profier的使用简介

如上图所示，内存分析器的默认视图包括以下内容：

• ① 强制执行垃圾收集事件的按钮。

• ② 捕获堆转储的按钮。

• ③ 记录内存分配的按钮。

• ④ 放大时间线的按钮。

• ⑤ 跳转到实时内存数据的按钮。

• ⑥ 内存使用时间表，其中包括以下内容：

• 每个内存类别使用多少内存的堆栈图，如左边的y轴和顶部的颜色键所示。

• 虚线表示已分配对象的数量，如右侧y轴所示。

• 每个垃圾收集事件的图标。

在classes列表中，您可以看到以下信息：

• Heap Count: 堆中的实例数。

• Shallow Size: 此堆中所有实例的总大小（以字节为单位）。

• Retained Size: 这个类的所有实例(以字节为单位)保留的内存总大小。

在类列表的顶部，可以使用左下拉列表在以下堆转储之间切换:

• Default heap: 当系统没有指定堆时。

• App heap: 应用程序分配内存的主堆。

• Image heap: 系统引导映像，包含在引导期间预加载的类。这里的分配保证永远不会移动或离开。

• Zygote heap: Android系统中分发应用程序进程的写时复制堆

八、项目使用WebP格式文件的规范

1. 使用推荐转换方案，75%有损压缩；

2. Fresco对WebP的使用做了支持，相当于扩展了一种图片类型，API的使用和PNG、JPEG、GIF无差别；

3. 对于大图显示建议使用Fresco加载，使用WebP格式降低文件体积。

   九、WebP的原理

   对WebP原理感兴趣，大家可以查看以下链接
   官网：https://developers.google.com/speed/webp/
   https://zhuanlan.zhihu.com/p/23648251