其实今年很早就有接触到webp图片的概念，只是一直没怎么弄。今天在一个小项目中小用了一番。总结总结
采用 what,why，how的方式来总结
what? 什么是webp图片？
*：
1、WebP（发音weppy)，是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式。
2、WebP最初在2010年发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间。
3、根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45％的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28％的文件大小。
其实总结起来就一句话，webp是一种图片格式，在相同图片质量的情况下，webp比png和jpg的体积要小很多。
既然它那么好，为啥平时工作中很少用啊，因为它的兼容性不是很好：如下图所示
如图所示，基本上主流浏览器只有chrome支持,手机方面的话只有安卓支持。不过听说ios也快支持了。
这里附上webp的官网：https://developers.google.com/speed/webp/
why? 为什么要使用webp,有什么好处呢？
总所周知，网页的加载速度跟图片是有很大的关系的，因为在不影响图片质量的情况下，减小图片的大小显得尤为重要。
如前面所述，webp具有以下优点：
webp的优点：
1.同等质量下图片更小，而且支持有损和无损两种压缩模式
如图，两张图都是在原图的情况下将压缩质量设为 50%
jpg模式： 82.6k
webp模式：52.5k (因为博客园编辑器不能上传webp图片，所以这张是webp的截图)
图片质量像，基本一样，肉眼基本不能识别出差距，但是webp要小很多
2.压缩之后质量无明显变化，图片质量得到保证。
上面的两张图可以很好的说明一切。
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；
同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。
webp的缺点：
虽然有上述的优点，不过webp也存在以下两个缺点：
1、就是前面说到的兼容性问题，不过这个不妨碍我们在支持它的平台上使用
2、webp在解码时间上比png的图片要长一些，由于可以减少图片大小，来提高图片加载速度，总体来说，还是利大于弊，所以不妨碍我们使用
how？webp图片格式需要怎么使用？
前面说了那么多，那我们需要怎么来使用它呢？
1、如何将png或者jpg转为webp格式：
第一种方法：将图片转为webp,可以使用腾讯开发的两个工具。iSparta 或者是 智图
第二种方法(window用户)：去官网--》点击 downloads repository 下载，然后cmd进入到下载文件的bin目录，输入命令行：option是入口文件，output.webp是出口文件名。
cwebp [options] -q quality input.jpg -o output.webp
例如：
cwebp F:\image\1.png -q quality -o F:\image\1.webp
不过很明显，还是直接用腾讯开发的工具来比较方便些。
2、如何检测平台是否支持webp格式。
有下面几种方法
第一种：检测浏览器是否支持webp的图片格式，如果支持，就返回true，否则返回false
function checkWebp() {
try{
return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
}catch(err) {
return false;
}
}
console.log(checkWebp()); // true or false
第二种，来自官网的。
// check_webp_feature:
// 'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
// 'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
var kTestImages = {
lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
};
var img = new Image();
img.onload = function () {
var result = (img.width > 0) && (img.height > 0);
callback(feature, result);
};
img.onerror = function () {
callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}
其实跟第一种方法差不多，这里提供了几种webp的图片模式，如果浏览器支持webp，那么图片的宽高会大于0，从而返回true,否则返回false.
使用方法：
第一个参数feature可以传 lossy,lossless,alpha,animation中的一个，第一个传个回调函数。获取他result。如果支持，返回ture,否则返回false。可以再谷歌和IE下试试，谷歌返回ture，IE返回false
check_webp_feature('lossless',function(feature,result){
alert(result); //true or false
});
第三种：（来源于一位博友的）【推荐】
;(function(doc) {
// 给html根节点加上webps类名
function addRootTag() {
doc.documentElement.className += "webps";
}
// 判断是否有webps=A这个cookie
if (!/(^|;\s?)webps=A/.test(document.cookie)) {
var image = new Image();
// 图片加载完成时候的操作
image.onload = function() {
// 图片加载成功且宽度为1，那么就代表支持webp了，因为这张base64图是webp格式。如果不支持会触发image.error方法
if (image.width == 1) {
// html根节点添加class，并且埋入cookie
addRootTag();
document.cookie = "webps=A; max-age=31536000; domain=58.com";
}
};
// 一张支持alpha透明度的webp的图片，使用base64编码
image.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==';
} else {
addRootTag();
}
}(document));
原理也是一样的，不过这个比较贴近实战，就是加载一张webp图片，如果可以加载出来，那么就是支持webp，否则就是不支持。如果支持webp，那么给html加一个class 叫 webps。
3、如何应用到项目中？（这里只是介绍比较傻瓜式的方法）
假设我们用的是上面提到的第三种方法来检测浏览器是否支持webp格式，我们可以这样做。
在页面加载css之前，加载检测是否支持webp的js。如果支持，则html节点上里面有一名为webps的class。
背景图的话，我们就用写两套。一套是没有用webp的css，一套是用了webp图片的背景图。
比如：
.btn{
background-image: url('../images/btn.jpg');
}
.webps .btn{
background-image: url('../images/btn.webp');
}
使用less或者sass可以很方便的处理这两套css.
/**sass**/
@mixin bg($url) {
background-image: url($url);
@at-root(with: all) .webps & {
background-image: url($url + '.webp');
}
}
/**less**/
.mixin(@url) {
background-image: url(@url);
.webps & {
background-image: url('@{url}.webp');
}
}
如果是img图片，那么就js判断是否有webps的class名。如果有，img的路劲为webp的路径，否则就是普通图片的路径。
下面是谷歌情况下加载的图片路劲。
火狐浏览器图片下图片路径
当然，我这种方法是傻瓜式的，因为是webp的牛刀小试嘛，刚好手上有一个活动页，只有几张图片，刚好可以拿来练手。
至于webp的其他用法，下次用到再做更深入的总结