免費AI編程助手
調(diào)研webp圖片格式
最近在調(diào)研為經(jīng)驗引入webp的可能性，下面總結(jié)一下最近的調(diào)研成果。
簡介
webp是谷歌在2010年開源的一種新的圖片格式，目前在谷歌瀏覽器（9+）和安卓（4.0+）里面都有很好的兼容性。
根據(jù)谷歌官方給出的數(shù)據(jù)，無損壓縮webp圖片比png圖片小26%，有損壓縮的webp可以比jpeg小25-34%，下面測試案例中有具體的demo，大家可以親眼查看效果。
鑒于webp的優(yōu)點，推薦引入webp格式。
注意：webp格式會增加解碼時間，是png的4-5倍（毫秒級）
谷歌官方給了幾種向后兼容使用webp的方案：
- 服務(wù)器端檢測
- js監(jiān)測
- html5 picture
PC端方案
通過caniuse，我們可以看到opera(11+)和chrome(9+)支持webp格式，但其他瀏覽器幾乎全軍覆沒。
通過百度流量研究院給出的瀏覽器數(shù)據(jù)看，chrome占比非常高，你應(yīng)該根據(jù)自己網(wǎng)站的流量統(tǒng)計作出具體決定。
pc端建議的方案是html5的picture，caniuse顯示picture和webp兼容性（在chrome上）幾乎是一樣的。
一個picture的簡單demo如下：
<picture>
<source srcset="xxx.webp" type="image/webp">
<img src="xxx.png" alt="test">
</picture>
移動端方案
webp在安卓上的兼容性非常好，但ios完全不支持，caniuse顯示兼容安卓4.0以上版本
通過百度統(tǒng)計出來的流量看，移動端安卓占比為70%+，你應(yīng)該根據(jù)自己網(wǎng)站的流量統(tǒng)計作出具體決定。
由于picture在移動端兼容性不好，所以這種方案不太可取，可以采用js監(jiān)測方案，js方案要求圖片必須是異步加載，下面是谷歌官方給出的代碼示例
// check_webp_feature:
// 'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
// 'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
var kTestImages = {
lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
};
var img = new Image();
img.onload = function () {
var result = (img.width > 0) && (img.height > 0);
callback(feature, result);
};
img.onerror = function () {
callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}
目前是基于回調(diào)，可以封裝成promise。
我寫了一組測試的demo，可以看這里：https://github.com/yanhaijing/webp
更多建議：