Android图片优化WebP

图片,Android





       WebP，是Google开发的一种旨在提升图片加载速度、节省流量的图片格式。同样的图片，使用WebP格式的大小只有JPEG的2/3。

1简介

       2010年10月份，Google宣布了一种新的支持有损压缩和无损压缩的图片格式WebP，相对JPEG格式，大约可以减少1/3的大小。目前已经在Google的很多明星产品上得到广泛的应用，比如Gmail、Yutube、Google Play等。还有Fackbook、Ebay、腾讯、阿里巴巴、美团等公司也是WebP的忠实粉丝。

正在使用WebP的项目：



QQ表情包也使用了WebP技术



        但此时的WebP功能还比较简单，图片还不支持透明度设置，因此，在2011年增加了新特性——支持透明度设置。这样就可以很好地替代PNG格式的图片。

2使用WebP的优势

        使用WebP能够实际带来多大的效果呢？正所谓“Talk is cheap”,我们来看一下实际的优化效果、以及压缩率过高是否会导致图片失真。

        以下图片从左到右分别是：原图40.5KB->无损压缩27.5KB->有损压缩17.3KB。



    

        从上图可以看出，使用无损压缩的情况下，两张图片没有任何差别。这时候的优化效果为(40.5-27.5)/40.5≈32.10%。但当采用有损压缩的情况下，肉眼也很难看出区别来，但优化效果达到（40.5-17.3）/40.5≈57.28%。

        WebP在降低图片大小的同时，又确保图片尽可能地原汁原味（不失真）。这样开发者就可以放心地使用WebP标准的图片，而且又可以提升图片加载速度，减少服务器带宽。科技博客GigaOM曾这样报道过：YouTube的视频缩略图采用WebP格式图片后，网页加载速度提升10%；Google Chrome网上商店采用WebP格式图片之后，每天节省几TB带宽，页面平均加载时间减少1/3；Google+移动应用采用WebP格式图片之后，每天减少50TB存储空间。想想这个效果还是蛮惊人的。

3转换工具

        好了，问题来了——这么好用的格式，怎么生成呢？答案就在于智图或iSparta。

智图可以在线实现图片转换WebP的功能：http://zhitu.isux.us/



iSparta则是以安装包的形式存在，http://isparta.github.io/



4兼容问题

 

1

浏览器

        在PC端，Chrome已经支持了WebP格式，Opera在11.10版本也新增了WebP的支持，但火狐和IE暂时不支持WebP格式。

        Android系统则从4.0+开始支持WebP，所以，低版本的系统也不支持WebP格式。

        如果是使用浏览器访问H5页面，可以通过JavaScript检测是否支持，如果支持则服务器下发WebP图片，不支持则下发普通图片。当然，也可以使用WebP库——WebPJS来兼容不支持的情况。

2

App

 

        如果，自己的APP也希望能够使用WebP，可以在工程里面添加WebP支持库。WebP同时支持Android和iOS。

1）以Android为例，需要在工程里面集成

libs/armeabi/libwebp.so

libs/armeabi-v7a/libwebp.so

libs/libwebp.jar

2）定义一个webP转Bitmap的方法



3）判断系统版本

如果系统<4.0，则需要先将webP转bitmap，然后再使用；

如果系统>=4.0，则正常使用，不需要再做转换。

        想要获取webp的源码并进行编译的，可以从以下地址获取：

http://www.webmproject.org/code/

        
5动态WebP

        上面提到的都是基于静态的WebP，那么动态的WebP是什么样的呢？（类似于GIF）。2013年11月份，Google推出了Animated WebP，在Chrome32 Beta率先支持。可以将GIF转换为Animated WebP，或是由多张WebP制作成Animated WebP。和传统的GIF相比较，优势在于：

支持有损压缩和无损压缩，并且可以合并有损和无损的图片帧

体积更小，GIF转Animated WebP后，无损情况下，大小可以减少20左右，有损的则可以多达60%以上。

颜色更丰富，支持24-bit的RGB颜色和8-bit的透明通道（GIF仅只支持8-bit的RGB颜色以及1-bit的透明通道）

添加了关键帧、metadata等数据

        如果你的浏览器支持，可以点击这个地址:
https://isparta.github.io/compare-webp/index_a.html


当然，Animated WebP也存在不足的地方：

消耗更多的CPU和解码时间（多至2倍左右）

市面上支持该标准的还不够多

        同时，还有一些开发者发现Animated WebP的压缩效果不稳定，可能达不到Google给到的预期效果，但不管怎么样，我们还是抱着学习的态度来了解一下，还是不错的。