把已有的圖片轉換為WebP格式
要使用WebP格式，需要將你網站用到的圖片都制作一份WebP格式的版本，如果你使用CDN服務商，它們一般都會提供轉碼到WebP格式的選項。如又拍雲：
增加這樣的配置后，我們可以通過給圖片URL加上相應的后綴，來使用WebP格式的版本資源。
你也可以使用webpack、gulp的插件來批量轉換圖片格式。這里不贅述。
在瀏覽器中使用WebP格式
因為不是所有瀏覽器都支持WebP格式，我們就有兩種思路：一個是只在支持WebP格式的瀏覽器中使用WebP格式；一個是讓不支持WebP格式的瀏覽器可以支持WebP。
設計塢https://www.wode007.com/sites/73738.html
姿勢一： <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以上，既加快了加載的速度，還節省了用戶的流量，我們十分推薦從現在就開始使用這種格式。