轉載請註明出處：http://www.jianshu.com/p/555859783f63
本篇文章翻譯自谷歌出的優化視頻裏面的光頭佬（Colt McAnlis），原文地址需翻牆， 以下正文：
說到互聯網的圖片格式，JPG一直以來都是標準格式。然而在2013年，Google(和一些開源貢獻者)創建了一種新的圖片編解碼算法，叫做WebP，它旨在同樣的的圖片質量下比JPG壓縮得更小。
WebP有多屌？一張同樣大小和複雜度的圖片，WebP可以比JPG小24%-35%。真令人震驚，因爲JPG已經把文件壓縮得差不多極致了。
對我來說，爲了節省文件空間值得我把APP裏的所有JPG圖片轉成WebP。另外一個事實是WebP支持大部分主流的瀏覽器，Android原生也同樣支持，我想對於大部分程序來說這都是一個“暴扣”“。(但這只是我個人的觀點)。
爲了理解WebP爲什麼能比JPG還要省空間，我們必須瞭解一下它的編解碼原理。
WebP從何而來
WebP文件格式來源於VP8視頻編解碼(你可能更知道WebM)。VP8編解碼器的其中一個強大特性是幀內預測壓縮，或者說，視頻的每一幀都被壓縮，後續幀與幀之間的差異也會被壓縮。
這就是WebP的由來：WebM文件裏單個被壓縮的幀。
或者，更精確的說WebP的核心來則WebM。自從2011年發佈以來，WebP作爲一個獨特文件類型它也做了很多改變和升級。例如像透明度，無損模式，和一些詭異扭曲，以及對動畫的支持。
沒錯，WebP是一種圖片格式…來自一種視頻格式…它支持動畫。(你可以對比一下三種格式香蕉舞，GIF版本，WebM版本，WebP版本)。
不過我們將忽略掉所有這些花哨的東西，專注於理解有損模式的原理。
有損模式
WebP的有損模式是建立在與一張靜止的JPG競爭的基礎上，因此，你會注意到在對文件處理上有一些驚人相識。
宏塊(MacroBlocking)
編碼器的第一個階段是將圖片分割成不同”宏塊”。典型的宏塊包括一個16x16的亮度像素塊，和兩個8x8的色度像素塊。這個階段非常像JPEG格式裏轉換顏色空間，對色度通道降低採樣，以及細分圖片。
預測
宏塊裏每個4x4的子塊都有一個預測模型。(又名過濾)。在PNG裏過濾用得非常多，它對每一行都做同樣的事，而WebP過濾的是每一塊。它是這樣處理的，在一個塊周圍定義兩組像素:有一行在它上面爲A，在它左邊那一列爲L。
利用A和L，編碼器會將它們放在一個4x4的測試像素塊填滿，並確定哪一個生成了最接近原始塊的值。這些用不同方法填滿的塊叫做”預測塊”。
- Horiz prediction(水平預測)——將塊的每列使用左列（L）數據的副本進行填充。
- Vertical Prediction(垂直預測)——將塊的每行使用上列（A）數據的副本進行填充。
- DC Prediction(DC 預測)——將塊使用 A 上列的像素與 L 左列的像素的平均值進行填充。
- True Motion (TrueMotion 預測)——一種超級先進的模式，我暫時不講。
值得注意的是，4x4的亮度塊還有另外6種模式，但你現在只需知道這些就好;)
基本流程是我們找到這個快最佳的預測塊，並導出過濾結果(剩餘誤差)，然後送到下個階段。
JPGify it
WebP編碼的最後階段看起來非常像我們的老朋友JPG:
- 對塊裏剩餘的值執行DCT過濾
- DCT矩陣後量化
- 轉成量化矩陣後重新排序，然後送到一個靜態壓縮器裏。
這有主要有兩點不同：
結果
從最後的結果看WebP感覺有點像加強版的JPG。WebP的預測階段相比JPG是最大的優勢，它減少了特殊顏色，使得在以後的處理階段能更有效的壓縮圖片數據。你可以自己查看WebP vs JPG文檔學習，或相信許多關心準確性和圖表的聰明人，下圖是他們研究出來的對比圖表。
總結
WebP只是比JPG所有處理過程多了一個預測模式，在數據壓縮方面就把JPG幹倒，WebP能夠輕鬆贏下JPG是因爲這個大表哥。
如前所述，WebP還有一個無損模式…不過那就是另外一篇文章了。
PS:由於文人水平有限，如有翻譯得不好的地方，請留言討論。