微信号:androidwalker

介绍:关注Android新技术、进阶开发

Android图片优化WebP

2016-06-16 07:22 xjj_app


       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给到的预期效果,但不管怎么样,我们还是抱着学习的态度来了解一下,还是不错的。




 
Android高级开发 更多文章 Android Studio 入门技巧之<基础篇> Android Studio 之<进阶篇:实用快捷键> Android Studio 之<进阶篇:IDE设置> 2015年度腾讯MIG内部技术峰会 多团队协同开发经验
猜您喜欢 Android wear 中国特别版GMS 视频分享 | 漂洋过海对话Docker&amp;Mesos 写给刚入行的数据分析师 有机会走向一线 跟着李克强学“大数据”:“人在干,云在算”