浅谈webp

定义

webp是由谷歌推出的新一代图片格式，在压缩方面比当前JPEG格式更优越,同时提供了有损压缩与无损压缩的图片文件格式，派生自图像编码格式VP8.以BSD授权条款发布。

优点

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。 根据Google较早的测试，WebP的无损压缩比网络上找到的PNG文件少了45％的文件大小，即使这些PNG文件在使用pngcrush和PNGOUT处理过，WebP还是可以减少28％的文件大小

缺点

1. 编解码速度偏慢 目前WEBP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍，实际上对于绝大部分的网络应用而言，图片都是静态文件，所以对于用户使用只需要关心解码速度即可。针对1.5倍的解码速度是否影响用户体验的问题，我们可以看看ebay团队的这个测试，50张同样质量的WEBP与jgp加载的速度对比：http://www.webpagetest.org/video/view.php?id=130125_7b15e676f5fa0b736f247ff0ed36517e64d9c9ea 此测试表明，webp虽然会增加额外的解码时间，但是由于减少了文件体积，缩短了加载的时间，实际上文件的渲染速度反而变快了。
2. 浏览器支持不全 移动端Android4.0以上、PC端chorme 10+（14 ~ 16 有渲染bug）、opera 11+ 、safri均支持webp格式图片。firefox曾经拒绝支持webp，今年也重启了关于webp第二次讨论https://bugzilla.mozilla.org/show_bug.cgi?id=856375

可行的兼容方案

目前要实现全浏览器兼容，虽然可以引入flash，但引入成本太高而且转为flash之后图片不能再操作，缺少灵活性，同时又会占用过多的CPU。因此，目前可行的解决方法只能是同时提供两套图片。 检测浏览器是否支持webp的方法。

1. var webpSupport=false;
2. (function(){
3. // native support check
4. var t = new Image;
5. t.onload=function(){webpSupport=true;}
6. t.onerror=function(){webpSupport=false;}
7. t.src = "data:image/webp;base64,UklGRjAAAABXRUJQVlA4ICQAAACyAgCdASoBAAEALy2Wy2WlpaWlpYEsSygABc6zbAAA/upgAAA=";
8. })();

})();

src中的字符串是经过base64编码过的一张webp图片，有了这个方法我们可以对jquery.lazyload稍加修改变成jquery.lazyloadWebp 修改之后的jquery.lazyloadWebp戳我下载 使用上和lazyload的不同之处。

<!--lazyload的使用方法--><img data-original="/images/pic.png" alt="这是一张图片"/>

$("img").lazyload({      effect : "fadeIn"});

<!--lazyloadWebp的使用方法--><img data-webp="/images/pic.webp" data-original="/images/pic.png" alt="这是一张图片"/>

$("img").lazyloadWebp({      effect : "fadeIn"});

演示页面：http://git.360rush.com/demo/lazyloadWebp/

如果要大面积应用WEBP，无疑对服务器存储是一个很大考验。我们不能抛弃原有格式，那么存储的数据量将会增加60%-80%

转换WEBP的工具

• 腾讯智图
• IMG2WebP.net
• cwebp命令行工具(可能有墙)

引用

• WEBP|冰糖橙子 http://www.btorange.com/2013/06/14/webp.html
• WebP - 维基百科 http://zh.wikipedia.org/wiki/WebP