WebP,是Google开发的一种旨在提升图片加载速度、节省流量的图片格式。同样的图片,使用WebP格式的大小只有JPEG的2/3。
2010年10月份,Google宣布了一种新的支持有损压缩和无损压缩的图片格式WebP,相对JPEG格式,大约可以减少1/3的大小。目前已经在Google的很多明星产品上得到广泛的应用,比如Gmail、Yutube、Google Play等。还有Fackbook、Ebay、腾讯、阿里巴巴、美团等公司也是WebP的忠实粉丝。
正在使用WebP的项目:
QQ表情包也使用了WebP技术
但此时的WebP功能还比较简单,图片还不支持透明度设置,因此,在2011年增加了新特性——支持透明度设置。这样就可以很好地替代PNG格式的图片。
使用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存储空间。想想这个效果还是蛮惊人的。
好了,问题来了——这么好用的格式,怎么生成呢?答案就在于智图或iSparta。
智图可以在线实现图片转换WebP的功能:http://zhitu.isux.us/
iSparta则是以安装包的形式存在,http://isparta.github.io/
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给到的预期效果,但不管怎么样,我们还是抱着学习的态度来了解一下,还是不错的。