Google最新的圖片格式WEBP全面解析

前言

不論是 PC 仍是移動端，圖片一直是流量大頭，以蘋果公司 Retina 產品爲表明的高 PPI 屏對圖片的質量提出了更高的要求，如何保證在圖片的精細度不下降的前提下縮小圖片體積，成爲了一個有價值且值得探索的事情。

但現在對於 JPEG、PNG 和 GIF 這些圖片格式的優化幾乎已經達到了極致， 若想改變現狀開闢新局面，便要有釜底抽薪的膽量和睦魄，而 Google 給了咱們一個新選擇：WebP。

對 WebP 的研究緣起於手機 QQ 原創表情商城，因爲表情包體積較大，在 2G/3G 的網絡環境下加載較慢。同事小貝剛好由於 2013 Google I/O Event 瞭解到了 WebP，因而咱們便一塊兒開始了沒羞沒躁的技術預研，期待在原創表情圖片的質量與體積之間尋找最美的平衡。

今年 WebP 圖片格式獲得愈來愈多的關注，不少團隊也開始佈道，前陣子的前端圈「走進騰訊互娛前端技術專場」也有相關專題。藉此熱潮，在這裏把上一年的探索過程以及今年 WebP 新的發展一同分享出來，同時也期待更多的人將其應用於實際業務中。

什麼是 WebP？

WebP（發音 weppy），是一種支持有損壓縮和無損壓縮的圖片文件格式，派生自圖像編碼格式 VP8。根據 Google 的測試，無損壓縮後的 WebP 比 PNG 文件少了 45％ 的文件大小，即便這些 PNG 文件通過其餘壓縮工具壓縮以後，WebP 仍是能夠減小 28％ 的文件大小。

2010 年發佈的 WebP 已經不算是新鮮事物了，在 Google 的明星產品如 Youtube、Gmail、Google Play 中均可以看到 WebP 的身影，而 Chrome 網上商店甚至已徹底使用了 WebP。國外公司如 Facebook、ebay 和國內公司如騰訊、淘寶、美團等也早已嚐鮮。目前 WebP 也在我廠不少的項目中獲得應用，如騰訊新聞客戶端、騰訊網、QQ空間等，同時也有一些針對 WebP 的圖片格式轉換工具，如智圖（http://zhitu.tencent.com），iSparta（http://isparta.github.io/）等。

 

（Google 已和正在部署的 WebP 的產品）

可喜的是，直到今年，Google 對 WebP 依舊投入了持續的熱情，2014 年的 Google I/O Event 中也出現了兩個介紹 WebP 應用的視頻（https://www.google.com）。WebP 已大量應用於全球流量消耗最多的 Google 產品中，你還有理由拒絕它嗎？

WebP 的優點

上面只是簡單介紹了這種圖片格式的背景和應用，不過 「talk is cheap」，這種格式優點在哪裏？除了壓縮效果極好，圖片質量可否獲得保障？這須要更理性客觀的數據：

這裏列舉一個簡單的測試：對比 PNG 原圖、PNG 無損壓縮、PNG 轉 WebP（無損）、PNG 轉 WebP（有損）的壓縮效果。更多測試查看  https://isparta.github.io （請用 Chrome 瀏覽器打開）

能夠得出結論：

• PNG 轉 WebP 的壓縮率要高於 PNG 原圖壓縮率，一樣支持有損與無損壓縮
• 轉換後的 WebP 體積大幅減小，圖片質量也獲得保障（同時肉眼幾乎沒法看出差別）
• 轉換後的 WebP 支持 Alpha 透明和 24-bit 顏色數，不存在 PNG8 色彩不夠豐富和在瀏覽器中可能會出現毛邊的問題

WebP 的優點體如今它具備更優的圖像數據壓縮算法，能帶來更小的圖片體積，並且擁有肉眼識別無差別的圖像質量；同時具有了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉化效果都很是優秀、穩定和統一。

科技博客 GigaOM 曾報道：YouTube 的視頻略縮圖採用 WebP 格式後，網頁加載速度提高了 10%；谷歌的 Chrome 網上應用商店採用 WebP 格式圖片後，天天能夠節省幾 TB 的帶寬，頁面平均加載時間大約減小 1/3；Google+ 移動應用採用 WebP 圖片格式後，天天節省了 50TB 數據存儲空間。

兼容性與可用性

如今問題來了：WebP 的支持度和兼容性如何？

根據對目前國內瀏覽器佔比與 WebP 的兼容性分析，大約有 50% 以上的國內用戶能夠直接體驗到 WebP，若是你的網站以圖片爲主，或者你的產品基於 Chromium 內核，建議體驗嘗試。假如你打算在 App 中使用 WebP，除了 Android4.0 以上提供的原生支持外，其餘版本以及 iOS 均可以直接使用官方提供的解析庫（Android 、iOS ）。

爲了驗證 WebP 圖片格式的業務可行性，咱們從流暢度、解碼耗時、CPU 使用、內存佔用幾個維度進行的分析，在開發同窗們的幫助下獲得了很是寶貴的測試數據：

測試一：

AndroidQQ 下 PNG 和 WebP 各指標對比。

• 測試環境：AndroidQQ、Galaxy Nexus、Android4.2.2 系統
• 測試對象：WebP、PNG

測試數據（部分）：

測試結論：

• 解碼耗時：WebP 的解碼時間是 PNG 格式的 4.4 倍（24.8ms）
• 流暢程度：兩種格式下，AIO 滑動流暢度無明顯差別
• CPU使用：兩種格式下，連續發送 15 個表情，CPU 使用均在 10%—26% 之間波動，二者無明顯差別
• 內存佔用：二者格式下，連續發送 15 個表情，PSS 內存佔用跨度均爲 11M，無明顯差別

測試二：

iPhoneQQ 下 PNG 和 WebP 各指標對比。

• 測試環境：iPhoneQQ、iPhone四、iOS5.1.1 系統
• 測試對象：WebP、PNG

測試數據（部分）：

測試結論：

• 解碼耗時：WebP 的解碼時間是 PNG 的 5 倍 左右（64.1ms）
• 流暢程度：WebP 的 FPS 平均值會比 PNG 的平均值要小，可是比較穩定，跨度不大，性能也相差不大
• CPU使用：整體上看，PNG 格式的表情使用 CPU 波動比較大。從平均值來看 WebP 格式表情佔用的 CPU 會比 PNG 表情的佔用率大
• 內存佔用：WebP 格式表情，佔用內存的跨度爲 4M，波動比較明顯。PNG 格式表情，佔用內存的跨度爲 5M，沒有明顯波動。中止發送表情後，40s 左右內存均有回降

可見除了 WebP 在解碼時間與 PNG 有較明顯差別（毫秒級別）以外，整體使用體驗和 PNG 基本無差別。同時也須要明確，移動設備的發展迅猛，硬件升級快，上一年的表現也許在今年又有了明顯的提高。因此，在 App 中使用 WebP 基本沒有技術阻礙。

對原創表情商城的技術指導

在驗證了業務可行性以後，WebP 又激發了咱們對另一些方向的思考：既然它表現如此優秀，可否進一步摸清其「秉性」，獲得一些能在將來使用中遵循的指導方案？

因而，爲了更深刻了解 WebP 特性，咱們針對原創表情項目 「不一樣的表情圖片，如何得到 WebP 的最佳壓縮效率」 問題繼續展開探究，主要從圖片規格、色彩數（顏色數量）、參數配置幾個維度進行：

探索一：圖片規格

經過閱讀文獻了解到 WebP 使用的是 Fancy 採樣算法，既然是採樣算法必然有采樣區塊，而 JPEG 的採樣區塊是 8*8，對於原始圖片的長寬不是 8 的倍數，都須要先補成 8 的倍數，使其能一塊塊的處理，因此對於 8 的整數倍的圖片，壓縮會更高效。

那麼 WebP 的採樣區塊會是多少？咱們在其餘因素保持不變的前提下改變圖片規格，選取了 200*200 附近多個規格值，獲得了一些數據。將數據可視化以後能夠看到凡是以 16*16 倍數（160*160、176*17六、192*19二、256*256）爲規格的圖片，有損壓縮的比例都明顯大於以 4*4 或 8*8 的倍數爲規格的圖片。

結論：

原創表情能夠考慮使用 「16n*16n」 的規格。目前原創表情選擇的是 200*200 的規格大小，實際上選擇 256*256 或者 192*192 能得到更高的 WebP 壓縮效率，量級在千分之幾。

探索二：色彩數

在 JPEG 和 PNG 格式的選擇經驗上能夠知道，對於色彩複雜的圖片，通常使用 JPEG 格式，而對於色彩單一的圖片，使用 PNG 格式。可見色彩數會影響圖片的壓縮效果。因而咱們經過 Photoshop 中的色階分離功能調整表情圖片的色彩數，在其餘因素保持不變的前提下對比不一樣色彩數對於 WebP 有損無損壓縮的影響。

可見，在色彩數相對較少的前提下，無損壓縮的效果要優於有損壓縮；而色彩數不少時，有損壓縮效果要優於無損壓縮，這個分界點在 256±100 之間。

結論：

建議原創表情儘可能控制顏色數在 256 色之內，採用無損壓縮性價比最高。

• 小於 256 色：以圖標，圖形，剪貼畫爲表明，最適合採用 WebP 無損壓縮，精細度完美，體積大幅減小；
• 大於 256 色：以多數表情圖，廣告圖爲表明，最適合採用 WebP 有損壓縮，選擇較高壓縮比（建議壓縮質量爲 100% ~ 75%）
• 遠大於 256 色：以風景照，視頻截圖爲表明，最適合採用 WebP 有損壓縮，選擇適中壓縮比（建議壓縮質量爲 75% 如下）

探索三：色溫、漸變與雜色、直線與直線、描邊

隨後又從色溫、漸變與雜色、直線曲線、是否須要描邊上進行了分析，最後的結論即：

• 色溫並不會影響表情圖片的壓縮效果，可大膽用色
• 漸變與雜色理論上都是增長色彩數，它的壓縮規律從符合第二條，但建議表情圖片少用漸變雜色和沒必要要的線條
• 直線與曲線理論上也是增長了色彩數（由於曲線邊緣會存在漸變），建議若是表情中能夠「直」的地方就不要「彎」
• WebP 格式的圖片不會存在毛邊問題，因此不須要爲表情圖片添加描邊

探索四：壓縮配置

爲了獲得無損壓縮和有損壓縮的最佳壓縮配置，咱們經過對 900 張表情圖片進行不一樣壓縮配置的測試（大部分表情圖片的色彩數都在 256 色以上），獲得下面的數據：

壓縮參數說明：

• -lossless：無損壓縮
• -q：壓縮質量，值越大越圖片質量越好
• -m：壓縮方式，值越大則圖片質量越好，體積越小，可是耗時較長

能夠發現，無損壓縮表現很穩定，壓縮質量越高，壓縮效果也越好。而有損壓縮在壓縮質量設置爲 75 以上以後，壓縮效果反而減弱，甚至壓縮後的圖片體積會大於壓縮前的體積。因此得出如下結論：

• 選擇無損壓縮時，「-lossless -q 100」 是最佳方案
• 選擇有損壓縮時，「-q 75」是最佳方案（圖片質量與體積大小達到均衡）
• 不管何種壓縮參數，加上「-m 6」都能使得輸出的 WebP 圖片進一步減小體積，量級是1%~2%，可是會增長耗時

最終，得出了一個正反面案例，從技術角度分析不一樣的表情圖標的優劣（強調一下是「技術角度」，這裏列舉的表情都很贊 ^_^）。

動態 WebP 初探

瞭解完靜態 WebP，下面再瞭解一下動態 WebP（Animated WebP）：2013 年 11 月 21 日，Animated WebP 終於取得進展，並在 Chrome32 Beta 中獲得了支持。目前 Animated WebP 支持將 GIF 直接轉換成 Animated WebP，或者將多張 WebP 圖片組合成 Animated WebP。與傳統的 GIF 圖比較，Animated WebP 的優點在於：

• 支持有損和無損壓縮，而且能夠合併有損和無損圖片幀
• 體積更小，GIF 轉成有損 Animated WebP 後能夠減少 64% 的體積，轉成無損能夠節省 19% 的體積
• 顏色更豐富，支持 24-bit 的 RGB 顏色以及 8-bit 的 Alpha 透明通道（而 GIF 只支持 8-bit RGB 顏色以及 1-bit 的透明）
• 添加了關鍵幀、metadata 等數據

假如你在使用 Chrome32 以上的瀏覽器，能夠點這裏（https://isparta.github.io）體驗。

但新興的事物必然存在不足的地方，Animated WebP 存在的問題：

• 消耗較多的 CPU 和解碼時間（多 1.5~2.2 倍）
• 和 GIF 相比起來支持度還不夠，目前仍沒法通用
• 爲了支持 Animated WebP，Chrome 的新內核 Blink 添加了近 1500 行的代碼

根據本身實際的測試，發現 Animated WebP 的壓縮效果較不穩定，在默認壓縮配置下達不到 Google 官方提供的示例效果。但 Animated WebP 依然有不少值得期待的空間，值得繼續關注。

綜合技術方案

對於不一樣場景下 WebP 的使用，咱們總結了一些解決方案，以下：
一、若使用場景是瀏覽器，能夠：

• JavaScript 能力檢測，對支持 WebP 的用戶輸出 WebP 圖片
• 使用 WebP 支持插件：WebPJS：http://webpjs.appspot.com

二、若使用場景是 App，能夠：

• Android 4.0 如下 WebP 解析庫（https://github.com）
• iOS WebP 解析庫（https://github.com）

三、轉換工具：

• 智圖（http://zhitu.tencent.com）
• iSparta（http://isparta.ghub）

iSparta 是咱們組針對 WebP 和 APNG 兩種新型圖片格式的轉化而開發的一款桌面應用，直接圖片批量轉換爲 WebP，同時提供多種參數配置，歡迎體驗。

文章轉自CSDN 火山石

原文連接：https://blog.csdn.net/zhangcanyan/article/details/51842211