webp是由谷歌推出的新一代图片格式,在压缩方面比当前JPEG格式更优越,同时提供了有损压缩与无损压缩的图片文件格式,派生自图像编码格式VP8.以BSD授权条款发布。
在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%。 根据Google较早的测试,WebP的无损压缩比网络上找到的PNG文件少了45%的文件大小,即使这些PNG文件在使用pngcrush和PNGOUT处理过,WebP还是可以减少28%的文件大小
目前要实现全浏览器兼容,虽然可以引入flash,但引入成本太高而且转为flash之后图片不能再操作,缺少灵活性,同时又会占用过多的CPU。因此,目前可行的解决方法只能是同时提供两套图片。 检测浏览器是否支持webp的方法。
var webpSupport=false;
(function(){
// native support check
var t =
new
Image;
t.onload=function(){webpSupport=true;}
t.onerror=function(){webpSupport=false;}
t.src =
"data:image/webp;base64,UklGRjAAAABXRUJQVlA4ICQAAACyAgCdASoBAAEALy2Wy2WlpaWlpYEsSygABc6zbAAA/upgAAA=";
})();
})();
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%