今天刚好有人提到淘宝或者阿里CDN里的图片怎么转换为webp格式，我们知道 webp 格式的图片比对应的 jpg 要小三分之一，视觉效果并没有什么折扣，但是图片体积缩小了三分之一，图片越大，节省的越明显。咋一看，好事呢？but。。。看下面。
什么是 webp格式
百度百科是这样解释的：
WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
但WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。
所以webp有利有弊吧！
并不是所有浏览器都支持webp格式！所以这里就是我们要说的重点。
先看两张图对比一下带不带webp的图片效果。
我带webp（浏览器如果不支持是看不见的）
我不带webp
两张图片的视觉并没有任何差别！！！但是大小有非常大的区别。第一张25918 Bytes第二张42583 Bytes，大小就打了六折，六折，六折！对于网站体验是非常好的。
问题来了，怎么让不支持webp格式的浏览器也要显示图片呢？
如果浏览器不支持，那么就让它默认显示jpg图片吧，只需要几句js代码就可以搞定。
var isWebp = checkWebp();
function checkWebp() {
try{
return(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
}catch(err) {
return false;
}
}
function autoWebP(src){
src = src.replace(/\s/g, '');
// https 协议访问存在问题 IE8，去 schema
if (/^http:/.test(src)) {
src = src.slice(5);
}
// 支持 webp 格式，并且 host 以 taobaocdn 和 alicdn 结尾，并且不是 s.gif 图片
if (isWebp && /(taobaocdn|alicdn)\.com/.test(src) && (src.indexOf('.jpg') ||
src.indexOf('.png')) && !/webp/.test(src) && !/\/s\.gif$/.test(src)) {
src += '_.webp';
} else if(src.lastIndexOf('_.webp') >= 0){
src = src.split('_.webp')[0];
}
return src;
}
很简单的几段代码，上面checkWebp函数检查浏览器是否支持webp，然后把返回值存在isWebp变量里，再调用autoWebP函数参数为图片的路径，路径带不带webp结尾都可以。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
如果参数是：http://img02.taobaocdn.com/bao/uploaded/i2/TB1olBkHFXXXXXVXXXXXXXXXXXX_!!0-item_pic.jpg_290x290.jpg
在支持webp的浏览器返回的是http://img02.taobaocdn.com/bao/uploaded/i2/TB1olBkHFXXXXXVXXXXXXXXXXXX_!!0-item_pic.jpg_290x290.jpg_.webp
不支持不会改变
如果参数是：http://img02.taobaocdn.com/bao/uploaded/i2/TB1olBkHFXXXXXVXXXXXXXXXXXX_!!0-item_pic.jpg_290x290.jpg_.webp
在支持webp的浏览器返回的是http://img02.taobaocdn.com/bao/uploaded/i2/TB1olBkHFXXXXXVXXXXXXXXXXXX_!!0-item_pic.jpg_290x290.jpg_.webp
不支持返回的是http://img02.taobaocdn.com/bao/uploaded/i2/TB1olBkHFXXXXXVXXXXXXXXXXXX_!!0-item_pic.jpg_290x290.jpg
所以尽情的享受这段代码吧。
