今天剛好有人提到淘寶或者阿里CDN里的圖片怎么轉(zhuǎn)換為webp格式，我們知道 webp 格式的圖片比對應(yīng)的 jpg 要小三分之一，視覺效果并沒有什么折扣，但是圖片體積縮小了三分之一，圖片越大，節(jié)省的越明顯。咋一看，好事呢？but。。?？聪旅妗?/p>
什么是 webp格式
百度百科是這樣解釋的：
WebP格式，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測試并使用WebP格式。
但WebP是一種有損壓縮。相較編碼JPEG文件，編碼同樣質(zhì)量的WebP文件需要占用更多的計算資源。
所以webp有利有弊吧！
并不是所有瀏覽器都支持webp格式！所以這里就是我們要說的重點。
先看兩張圖對比一下帶不帶webp的圖片效果。
我?guī)ebp（瀏覽器如果不支持是看不見的）
我不帶webp
兩張圖片的視覺并沒有任何差別?。。〉谴笮∮蟹浅４蟮膮^(qū)別。第一張25918 Bytes第二張42583 Bytes，大小就打了六折，六折，六折！對于網(wǎng)站體驗是非常好的。
問題來了，怎么讓不支持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 協(xié)議訪問存在問題 IE8，去 schema
if (/^http:/.test(src)) {
src = src.slice(5);
}
// 支持 webp 格式，并且 host 以 taobaocdn 和 alicdn 結(jié)尾，并且不是 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函數(shù)檢查瀏覽器是否支持webp，然后把返回值存在isWebp變量里，再調(diào)用autoWebP函數(shù)參數(shù)為圖片的路徑，路徑帶不帶webp結(jié)尾都可以。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
如果參數(shù)是：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
不支持不會改變
如果參數(shù)是：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
所以盡情的享受這段代碼吧。
