新的图片格式：WebP

参考：

• WebP 探寻之路
• WebP Slide
• PNG

背景

　　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等老的格式：

1. 通过js判断浏览器是否兼容webp
2. 如果不支持，就换成png/jpeg的格式

缺点：
需要备两套图片

方案二

不跟浏览器玩了，自己搞定webp的渲染：

1. 使用第三方组件实现这个目的，像webpjs是通过flash来实现这个目的的。
2. 开发浏览器插件，给浏览器打补丁？

缺点:
对于大部分页面来说，第三方组件造成的流量增加搞不好就把webp辛辛苦苦减少的部分给吃掉了，而且渲染的性能估计也是个问题。至于插件开发，这个也有些鸡肋，让用户全部装上浏览器插件，不见得比让用户更新浏览器类型/版本简单多少。

转载于:https://www.cnblogs.com/chenzhizhong/p/6616993.html