扒一扒“WEBP格式”的圖片
使用WEBP圖片的目的
保證圖片質量的前提下縮小圖片體積。JPEG、PNG以及GIF這些格式的圖片已經沒有太大的優化空間。但是，WebP圖片格式給圖片優化提供了另一種可能
圖片壓縮
無失真壓縮的圖片格式
TIFF；GIF；RAW；PCX；TAG；PNG；BMP
有失真壓縮格式
JPEG；JPG；WMF
WEBP圖片對壓縮的支援
WebP是一種支援有失真壓縮和無失真壓縮的圖片檔案格式（也支援alpha通道，動畫演示），根據Google的測試，無失真壓縮後的WebP比PNG檔案少了26％的體積，有失真壓縮後的WebP圖片相比於等效質量指標的JPEG圖片減少了25％~34%的體積。
WEBP的相容情況
谷歌、歐朋、移動端的谷歌核心瀏覽器（移動端蘋果不支援）
WEBP與JPG的比較
WebP與JPG相比較，編碼速度慢10倍，解碼速度慢1.5倍
通過同樣質量的WebP與JPG圖片載入的速度進行測試。測試的JPG和WebP圖片大小如下：
WebP雖然會增加額外的解碼時間，但由於減少了檔案體積，縮短了載入的時間，頁面的渲染速度加快了。同時，隨著圖片數量的增多，WebP頁面載入的速度相對JPG頁面增快了。所以，使用WebP基本沒有技術阻礙，還能帶來效能提升以及頻寬節省。
如何轉換WEBP格式的圖片
iSparta軟體
下載地址：http://isparta.github.io/index.html
線上生成：
智圖：http://zhitu.isux.us/
如何實現全瀏覽器相容
此處的相容，指的是讓高階瀏覽器載入WEBP格式的圖片，而不支援WEBP的瀏覽器載入原格式圖片。
方案1：引入flash
引入成本太高而且轉為flash之後圖片不能再操作，缺少靈活性，同時又會佔用過多的CPU。
方案2：同時提供兩套圖片
1. 具體實現方法 - 伺服器端：
服務端方式服務端就只能通過UA資訊來判斷。針對不同瀏覽器提供不同檔案。（https://github.com/igrigorik/webp-detect）
2. 具體實現方法 - JS前端：
檢測WEBP的支援程度
JavaScript檢測是否支援WebP程式碼如下：
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];
}在瀏覽器向伺服器發起請求時，對於支援WebP圖片的瀏覽器，會在請求頭Accept中帶上image/webp的資訊，伺服器便能識別到瀏覽器是否支援WebP，在伺服器中處理圖片。
使用前端實現WEP的案例
考慮到不少開發人員沒有後臺操作許可權，因此利利在此利用JS，書寫了一個模擬性案例。原理和後臺比較相似：提供好兩種圖片，之後檢測瀏覽器是否支援WEP，如果支援則載入WEP格式的圖片，如果不支援則載入原格式圖片。
具體程式碼如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂 - H5course</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
</head>
<body>
<div class="wrap">
<img src="" webpsrc="images/1.webp" normalsrc="images/1.jpg" alt="" title="">
<img src="" webpsrc="images/2.webp" normalsrc="images/2.jpg" alt="" title="">
</div>
<script>
function check_webp_feature(feature, callback) {
var kTestImages = {
// 有損 - lossy； 無損 - lossless
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];
}
var imgs = document.getElementsByTagName('img');
check_webp_feature('lossy', function(feature, result){
if (result) {
console.log('支援' + feature + '的壓縮方式');
for (var i = 0; i < imgs.length; i++) {
imgs[i].setAttribute('src', imgs[i].getAttribute('webpsrc'));
};
} else {
console.log('不支援' + feature + '的壓縮方式');
for (var i = 0; i < imgs.length; i++) {
imgs[i].setAttribute('src', imgs[i].getAttribute('normalsrc'));
};
}
})
</script>
</body>
</html>支援WEBP格式的谷歌瀏覽器，載入webp格式的兩張圖片
不支援WEBP格式的火狐瀏覽器，載入的是jpg格式的兩張圖片
大面積應用WEBP存在的問題（目前實際使用最大的痛點）
1. 伺服器儲存空間，我們不能拋棄原有格式，那麼儲存的資料量將會增加60%
2. 如果請求時再轉換，由於目前轉碼的效率太低，特別的大檔案的PNG速度很慢
WEBP應用場景推薦
在網路上查閱資料時，看到的WEBP應用場景推薦（即無需考慮相容的場景）
1. 客戶端軟體，內嵌了基於Chromium（chrome瀏覽器背後的引擎）的webview，這類瀏覽器中應用的網頁是可以完全使用webp格式，提升載入渲染速度，不考慮相容。
2. 用node-webkit開發的程式，用webp可以減少檔案包的體積。（開發桌面+WEB混合型應用）
3. 移動應用或移動端網頁遊戲，介面需要大量圖片，可以嵌入webp的解碼包,能夠節省使用者流量，提升訪問速度
HTML5小編-利利 耗時10h