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