新的图片格式:WebP
参考:
背景
WebP是一种新的图片格式,在同等保真度的前提下,比JPG/PNG具有更高的压缩率。高保真、高压缩率的算法通常会带来低性能,幸运的是性能的衰减不大,图片体积减小带来的网络加载变快,就可以弥补页面渲染速度的差异。WebP也支持动态图,和GIF格式类似,但是效果比GIF更好。
美中不足的是,目前的主流浏览器,大约只有50%左右支持WebP,对于纯web的应用场景来说,目前还必须做兼容性的考量。
感觉现在webp面临的问题,和早期png格式的图片一模一样。png格式的图片也是因为体积小、效果好,支持透明,支持动画(APNG)这些优点而推广开的。但早期的时候,要使用PNG格式的图片也是有些费劲的,最典型的就是IE6不支持PNG格式的图片,虽然也有兼容的办法,但并不完美。
到了今天,IE6跟着Windows XP一起退出历史的舞台了,基本上所有的主流浏览器、图片查看器都支持png格式的图片了。我觉得明天的WebP会跟今天的PNG一样,大行其道。
兼容性处理
只有纯web的应用场景才需要考虑这点。目前了解到的方案有:
方案一
如果浏览器支持,就用webp,如果浏览器不支持,就改成jpeg/png等老的格式:
- 通过js判断浏览器是否兼容webp
- 如果不支持,就换成png/jpeg的格式
缺点:
需要备两套图片
方案二
不跟浏览器玩了,自己搞定webp的渲染:
- 使用第三方组件实现这个目的,像webpjs是通过flash来实现这个目的的。
- 开发浏览器插件,给浏览器打补丁?
缺点:
对于大部分页面来说,第三方组件造成的流量增加搞不好就把webp辛辛苦苦减少的部分给吃掉了,而且渲染的性能估计也是个问题。至于插件开发,这个也有些鸡肋,让用户全部装上浏览器插件,不见得比让用户更新浏览器类型/版本简单多少。