前言
目前網(wǎng)絡中圖片仍然是占用流量較大的一部分，對于移動端更是如此，因此，如何在保證圖片視覺不失真前提下縮小體積，對于節(jié)省帶寬和電池電量十分重要。然而目前對于JPEG、PNG、GIF等常用圖片格式的優(yōu)化已幾乎達到極致，因此Google于2010年提出了一種新的圖片壓縮格式 — WebP，給圖片的優(yōu)化提供了新的可能。
現(xiàn)如今webp也在各大公司廣泛使用，那么它和常規(guī)的圖片有什么不同呢？
基本概念
- WebP（發(fā)音weppy)，是一種同時提供了有損壓縮與無損壓縮（可逆壓縮）的圖片文件格式。
- WebP最初在2010年發(fā)布，目標是減少文件大小，但達到和JPEG格式相同的圖片質量，希望能夠減少圖片檔在網(wǎng)絡上的發(fā)送時間。
- 根據(jù)Google較早的測試，WebP的無損壓縮比網(wǎng)絡上找到的PNG檔少了45％的文件大小，即使這些PNG檔在使用pngcrush和PNGOUT處理過，WebP還是可以減少28％的文件大小。
有損壓縮上，webp只是比JPG所有處理過程多了一個預測模式，在數(shù)據(jù)壓縮方面就把JPG干倒，WebP能夠輕易的比jpg小很多。
png vs webp
- PNG 轉 WebP 的壓縮率要高于 PNG 原圖壓縮率
- 同樣支持有損與無損壓縮轉換后的 WebP 體積大幅減少，圖片質量也得到保障（同時肉眼幾乎無法看出差異）
- 轉換后的 WebP 支持 Alpha 透明和 24-bit 顏色數(shù)
- 不存在 PNG8 色彩不夠豐富和在瀏覽器中可能會出現(xiàn)毛邊的問題
科技博客 Gig???aOM 曾報道：YouTube 的視頻略縮圖采用 WebP 格式后，網(wǎng)頁加載速度提升了 10%；谷歌的 Chrome 網(wǎng)上應用商店采用 WebP 格式圖片后，每天可以節(jié)省幾 TB 的帶寬，頁面平均加載時間大約減少 1/3；Google+ 移動應用采用 WebP 圖片格式后，每天節(jié)省了 50TB 數(shù)據(jù)存儲空間。
綜上可以簡單的總結出，webp可以在不明顯損失質量的前提下降低大小，同時也支持透明通道。
壓縮原理
（因為網(wǎng)上零零散散沒有很全的歸納文檔，干脆直接閱讀官方文檔歸納總結其主要陳述內容，如果翻譯有誤歡迎指出。）
谷歌不斷的在尋找提速的辦法，其中之一就包括通過壓縮圖片60%-65%的大小來提高頁面渲染速度。webp比常規(guī)的png和jpg圖片通常要小個30%大小。其特點：
- 基于VP8的有損壓縮
- 無損壓縮
- 透明度
- 動畫：支持彩色動圖
- 元數(shù)據(jù)：包含EXIF and XMP metadata （例如用于相機）
- 顏色檔案：It may have an embedded ICC profile，顏色管理器
webp有損壓縮
使用預測性編碼去處理一張圖片，派生自VP8壓縮視頻的關鍵幀的視頻編碼方式。編碼器會根據(jù)先前加工好的塊去進行預測推算，冗余會被減去，最后只保留非重復內容。
轉換編碼結束后，留存的大量0也會被壓縮掉。有趣的是數(shù)字化是唯一一個可能造成有損的步驟，其余步驟都是可逆且無損的
下圖展示了有損壓縮的步驟，其中紅圈部分是與jpg不同的地方。
webp無損壓縮
WebP無損編碼是通過各種技術傳輸圖片完成的。熵編碼在傳輸?shù)膮?shù)和圖片上去執(zhí)行。
- 空間預測：通常鄰近的片段有相互關系，因此可以利用空間預測減少多余存儲。
- 顏色傳輸：目的是去相關每個像素的r、g、b值。保持g(green)不變，r(red)基于g，b(blue)基于r再基于g。
- 顏色標志傳輸：當顏色位數(shù)小于256時，使用調色板用array存儲。
- 顏色緩存編碼：無損壓縮去查看32個最近使用的顏色。
- 允許透明通道傳輸
使用
實際使用很簡單，拿到webp圖片之后和普通的圖片一樣，直接引入就行。主流設備應該都已經支持了，兼容舊設備可以通過js代碼去區(qū)分寫邏輯。
// 直接返回是否支持webp
return document.createElement('canvas').toDataURL('image/webp')
.indexOf('data:image/webp') === 0
