WebP格式介紹
WebP是Google開發的一種新的圖片格式，它支援有損壓縮、無損壓縮和透明度，壓縮後的檔案大小比JPEG、PNG等都要小。所以可以節省頻寬，減少頁面載入時間，節省使用者的流量。
Android 和 iOS 的 app 只要引入 Google 提供的解碼函式庫，都可以很輕鬆地支援 WebP 格式。不過在網頁上，WebP 的支援還不是很廣泛，根據Can I Use的資料，目前只有 Chrome、Opera 瀏覽器，以及 Android 的 WebView 支援 WebP。但是 WebP 圖片有這麼多優點，我們能不能在網頁中使用呢？可以。這篇文章就來討論一下這個問題。
把既有的圖片轉換為WebP格式
要使用WebP格式，需要將你網站用到的圖片都製作一份WebP格式的版本，如果你使用CDN服務供應商，它們一般都會提供轉碼到WebP格式的選項。如又拍雲：
新增這樣的設定後，我們可以透過給圖片URL加上相應的後綴，來使用WebP格式的版本資源。
你也可以使用webpack、gulp的外掛來批次轉換圖片格式。這裡不贅述。
在瀏覽器中使用 WebP 格式
因為不是所有瀏覽器都支援WebP格式，我們就有兩種思路：一個是只在支援WebP格式的瀏覽器中使用WebP格式；一個是讓不支援WebP格式的瀏覽器可以支援WebP。
姿勢一： <picture>標籤
<picture>是HTML5中的一個新標籤，類似<video>它也可以指定多種格式的資源，由瀏覽器選擇自己支援的格式進行載入。
<picture class="picture"> <source type="image/webp" srcset="image.webp"> <img class="image" src="image.jpg"> </picture>
如果瀏覽器支援WebP格式，就會載入image.webp，否則會載入image.jpg。
即使瀏覽器不支援<picture>標籤，圖片仍然會正常顯示，只是CSS可能無法正確選取到picture元素。比如在IE8中，下面的CSS就不會起作用：
.picture img { width: 100px; height: 100px;
}但是可以這樣來給圖片寫樣式：
.image { width: 100px; height: 100px;
}即使瀏覽器使用的是 WebP 格式的圖片，最終還是會套用img元素的樣式。
不過只要使用了html5shiv，使舊的瀏覽器支援這個標籤，CSS 選擇器就可以正常使用了。
這種方法是最簡單的，但是無法作用於CSS中的圖片（如背景）。
招式二：使用JS替換圖片的URL。
我們有很多頁面往往會用到圖片的「延遲載入」——通常是把圖片的 URL 放在img元素的一個自訂屬性中，然後用JS在適當的時機將URL賦值給src屬性。用類似的原理，我們可以根據瀏覽器是否支援 WebP 格式，給img元素賦予不同的src值。
首先我們需要用JS來判斷瀏覽器是否支援WebP格式，方法是給瀏覽器一張WebP格式的圖片，看瀏覽器能否正確呈現。這種方法是非同步的，所以需要把後續的操作寫在回呼函式中。我們可以將結果儲存在localStorage中，這樣之後就不用再次檢查了。
function checkWebp(callback) { var img = new Image();
img.onload = function () { var result = (img.width > 0) && (img.height > 0);
callback(result);
};
img.onerror = function () {
callback(false);
};
img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}然後用下面的程式碼來根據是否支援WebP替換相應的src。
function showImage(useWebp){ var imgs = Array.from(document.querySelectorAll('img'));
imgs.forEach(function(i){ var src = i.attributes['data-src'].value; if (useWebp){
src = src.replace(/\.jpg$/, '.webp');
}
i.src = src;
});
}
checkWebp(showImage);這種方式的優點是可以與既有的延遲載入函式相結合。而且使用JS，我們還可以處理CSS中的圖片（如背景圖等）。
姿勢三：使用JS解碼WebP圖片
既然WebP的解碼器是開源的，那麼能否用JS來實作呢？當然可以，有人就用JS寫出了WebP的解碼器。引入這個 JS 函式庫，就是將所有的 WebP 圖片用 JS 解碼後轉換為base64，然後替換掉原來的URL，這樣就可以讓原本不支援WebP的瀏覽器正常顯示WebP了。這個函式庫的使用方法非常簡單，看網頁的說明即可。
這種方法的缺點是，因為JS要解碼WebP圖片，需要在此非同步請求src中的URL（不過因為圖片本身之前被下載了一次，直接使用了快取）；而且JS解碼比較慢，對效能有影響，可能需要一段時間才能顯示出圖片來。
以上就是在瀏覽器中使用WebP圖片的幾種方法，可以根據自己的實際情況選用。在我們的實務中，使用了WebP格式後，圖片的體積普遍縮小了1/3以上，既加快了載入的速度，還節省了使用者的流量，我們十分推薦從現在就開始使用這種格式。
