| 王成

本文轉(zhuǎn)載自SegmentFault

WebP格式介紹

WebP是Google開發(fā)的一種新的圖片格式，它支持有損壓縮、無損壓縮和透明度，壓縮后的文件大小比JPEG、PNG等都要小。所以可以節(jié)省帶寬，減少頁面載入時間，節(jié)省用戶的流量。

Android和iOS的App只要引入Google提供的解碼庫，都可以很輕松的支持WebP格式。不過在Web上，WebP的支持還不是很廣泛。根據(jù)Can I Use的數(shù)據(jù)，目前只有Chrome、Opera瀏覽器，以及Android的WebView是支持WebP的。但是WebP圖片有這么多優(yōu)點，我們能不能在Web頁面中使用呢？可以。這篇文章就來討論一下這個問題。

把已有的圖片轉(zhuǎn)換為WebP格式

要使用WebP格式，需要將你網(wǎng)站用到的圖片都制作一份WebP格式的版本，如果你使用CDN服務(wù)商，它們一般都會提供轉(zhuǎn)碼到WebP格式的選項。如又拍云：

增加這樣的配置后，我們可以通過給圖片URL加上相應(yīng)的后綴，來使用WebP格式的版本資源。

你也可以使用Webpack、Gulp的插件來批量轉(zhuǎn)換圖片格式。這里不贅述。

在瀏覽器中使用WebP格式

因為不是所有瀏覽器都支持WebP格式，我們就有兩種思路：一個是只在支持WebP格式的瀏覽器中使用WebP格式；一個是讓不支持WebP格式的瀏覽器可以支持WebP。

姿勢一： <Picture>標(biāo)簽

<Picture>是HTML5中的一個新標(biāo)簽，類似<Video>它也可以指定多個格式的資源，由瀏覽器選擇自己支持的格式進(jìn)行加載。

<picture class="picture">

<source type="image/webp" srcset="image.webp">

<img class="image" src="image.jpg">

</picture>

如果瀏覽器支持WebP格式，就會加載Image.webp，否則會加載Image.jpg。

即使瀏覽器不支持<Picture>標(biāo)簽，圖片仍然會正常顯示，只是CSS可能無法正確選取到Picture元素。比如在IE8中，下面的CSS就不會起作用：

.picture img { width: 100px; height: 100px;}

但是可以這樣來給圖片寫樣式：

.image { width: 100px; height: 100px;}

即使瀏覽器使用的是WebP格式的圖片，最終還是會應(yīng)用img元素的樣式。

不過只要使用了HTML5Shiv，使舊的瀏覽器支持這個標(biāo)簽，CSS選擇器就可以正常使用了。這種方法是最簡單的，但是不能作用于CSS中的圖片（如背景）。

姿勢二：使用JS替換圖片的URL。

我們有很多的頁面往往會用到圖片的“懶加載”——通常是把圖片的URL放在Img元素的一個自定義屬性中，然后用JS在適當(dāng)?shù)臅r機將URL賦值給SRC屬性。用類似的原理，我們可以根據(jù)瀏覽器是否支持WebP格式，給Img元素賦予不同的SRC值。

首先我們需要用JS來判斷瀏覽器是否支持WebP格式，方法是給瀏覽器一個WebP格式的圖片，看瀏覽器能否正確渲染。這種方法是異步的，所以需要把后續(xù)的操作寫在回調(diào)函數(shù)中。我們可以將結(jié)果存儲在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';

}

然后用下面的代碼來根據(jù)是否支持WebP替換相應(yīng)的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);

這種方式的優(yōu)點是可以與已有的懶加載函數(shù)相結(jié)合。而且使用JS，我們還可以處理CSS中的圖片（如背景圖等）。

姿勢三：使用JS解碼WebP圖片

既然WebP的解碼器是開源的，那么能否用JS來實現(xiàn)呢？當(dāng)然可以，有人就用JS寫出了WebP的解碼器。引入這個JS庫，就是將所有的WebP圖片用JS解碼后轉(zhuǎn)換為Base64，然后替換掉原來的URL，這樣就可以讓原本不支持WebP的瀏覽器正常顯示W(wǎng)ebP了。這個庫的使用方法非常簡單，看網(wǎng)頁的說明即可。

這種方法的缺點是，因為JS要解碼WebP圖片，需要在此異步請求SRC中的URL（不過因為圖片本身之前被下載了一次，直接使用了緩存）；而且JS解碼比較慢，對性能有影響，可能需要一段時間才能顯示出圖片來。

以上就是在瀏覽器中使用WebP圖片的幾種方法，可以根據(jù)自己的實際情況選用。在我們的實踐中，使用了WebP格式后，圖片的體積普遍縮小了1/3以上，既加快了加載的速度，還節(jié)省了用戶的流量，我們十分推薦從現(xiàn)在就開始使用這種格式。

又小拍也關(guān)注WebP一段時間呢，不但關(guān)注了WebP，還關(guān)注了動態(tài)WebP，不久之后會有驚喜帶給大家哦。

又拍云的處理功能實在太豐富，在圖片處理方面，略縮圖任意尺寸更改，全網(wǎng)一鍵更新所有圖片，打水印，URL防盜鏈等。最近上線的又拍直播云，除了直播加速、推拉流外，更具有豐富的美顏、濾鏡、水印、防盜鏈、鑒黃、禁播等功能，幫助直播平臺快速上線直播業(yè)務(wù)，快來試試吧~