JavaScript自动转换淘宝图片格式.webp

今天刚好有人提到淘宝或者阿里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

所以尽情的享受这段代码吧。