藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

來源：優(yōu)設(shè)網(wǎng)

編者按：相信走在前列的設(shè)計師已經(jīng)知道了WebP這種圖片格式，比起JPEG、PNG 和 GIF ，它能在保證圖片精細(xì)度的同時縮小圖片體積，在 Google 的明星產(chǎn)品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影，今天騰訊的同學(xué)@Hahn__研究后總結(jié)了一篇深度技術(shù)文《WebP 探尋之路》，不落人后，來學(xué)習(xí)吧。

想跟上大潮流，這篇熱門好文少不了：《我的征程是未來！帶你展望2015年最重要的網(wǎng)頁設(shè)計趨勢》不管是 PC 還是移動端，圖片一直是流量大頭，以蘋果公司 Retina 產(chǎn)品為代表的高 PPI 屏對圖片的質(zhì)量提出了更高的要求，如何保證在圖片的精細(xì)度不降低的前提下縮小圖片體積，成為了一個有價值且值得探索的事情。

但如今對于 JPEG、PNG 和 GIF 這些圖片格式的優(yōu)化幾乎已經(jīng)達(dá)到了， 若想改變現(xiàn)狀開辟新局面，便要有釜底抽薪的膽量和氣魄，而 Google 給了我們一個新選擇：WebP。

對 WebP 的研究緣起于手機(jī) QQ 原創(chuàng)表情商城，由于表情包體積較大，在 2G/3G 的網(wǎng)絡(luò)環(huán)境下加載較慢。同事小貝恰好因為 2013 Google I/O Event 了解到了 WebP，于是我們便一起開始了沒羞沒躁的技術(shù)預(yù)研，期待在原創(chuàng)表情圖片的質(zhì)量與體積之間尋找最美的平衡。

今年 WebP 圖片格式得到越來越多的關(guān)注，很多團(tuán)隊也開始布道，前陣子的前端圈“走進(jìn)騰訊互娛前端技術(shù)專場”也有相關(guān)專題。借此熱潮，在這里把上一年的探索過程以及今年 WebP 新的發(fā)展一同分享出來，同時也期待更多的人將其應(yīng)用于實際業(yè)務(wù)中。

什么是 WebP？

WebP（發(fā)音 weppy），是一種支持有損壓縮和無損壓縮的圖片文件格式，派生自圖像編碼格式 VP8。根據(jù) Google 的測試，無損壓縮后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使這些 PNG 文件經(jīng)過其他壓縮工具壓縮之后，WebP 還是可以減少 28％ 的文件大小。

2010 年發(fā)布的 WebP 已經(jīng)不算是新鮮事物了，在 Google 的明星產(chǎn)品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影，而 Chrome 網(wǎng)上商店甚至已完全使用了 WebP。國外公司如 Facebook、ebay 和國內(nèi)公司如騰訊、淘寶、美團(tuán)等也早已嘗鮮。目前 WebP 也在我廠很多的項目中得到應(yīng)用，如騰訊新聞客戶端、騰訊網(wǎng)、QQ空間等，同時也有一些針對 WebP 的圖片格式轉(zhuǎn)換工具，如智圖iSparta等。

（Google 已和正在部署的 WebP 的產(chǎn)品）

可喜的是，直到今年，Google 對 WebP 依舊投入了持續(xù)的熱情，2014 年的 Google I/O Event 中也出現(xiàn)了兩個介紹 WebP 應(yīng)用的視頻WebP 已大量應(yīng)用于全球流量消耗最多的 Google 產(chǎn)品中，你還有理由拒絕它嗎？

WebP 的優(yōu)勢

上面只是簡單介紹了這種圖片格式的背景和應(yīng)用，不過 “talk is cheap”，這種格式優(yōu)勢在哪里？除了壓縮效果極好，圖片質(zhì)量能否得到保障？這需要更理性客觀的數(shù)據(jù)：

這里列舉一個簡單的測試：對比 PNG 原圖、PNG 無損壓縮、PNG 轉(zhuǎn) WebP（無損）、PNG 轉(zhuǎn) WebP（有損）的壓縮效果。更多測試查看  （請用 Chrome 瀏覽器打開）

可以得出結(jié)論：

• PNG 轉(zhuǎn) WebP 的壓縮率要高于 PNG 原圖壓縮率，同樣支持有損與無損壓縮
• 轉(zhuǎn)換后的 WebP 體積大幅減少，圖片質(zhì)量也得到保障（同時肉眼幾乎無法看出差異）
• 轉(zhuǎn)換后的 WebP 支持 Alpha 透明和 24-bit 顏色數(shù)，不存在 PNG8 色彩不夠豐富和在瀏覽器中可能會出現(xiàn)毛邊的問題

WebP 的優(yōu)勢體現(xiàn)在它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的圖像質(zhì)量；同時具備了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉(zhuǎn)化效果都非常優(yōu)秀、穩(wěn)定和統(tǒng)一。

科技博客 GigaOM 曾報道：YouTube 的視頻略縮圖采用 WebP 格式后，網(wǎng)頁加載速度提升了 10%；谷歌的 Chrome 網(wǎng)上應(yīng)用商店采用 WebP 格式圖片后，每天可以節(jié)省幾 TB 的帶寬，頁面平均加載時間大約減少 1/3；Google+ 移動應(yīng)用采用 WebP 圖片格式后，每天節(jié)省了 50TB 數(shù)據(jù)存儲空間。

兼容性與可用性

現(xiàn)在問題來了：WebP 的支持度和兼容性如何？

根據(jù)對目前國內(nèi)瀏覽器占比與 WebP 的兼容性分析，大約有 50% 以上的國內(nèi)用戶可以直接體驗到 WebP，如果你的網(wǎng)站以圖片為主，或者你的產(chǎn)品基于 Chromium 內(nèi)核，建議體驗嘗試。假如你打算在 App 中使用 WebP，除了 Android4.0 以上提供的原生支持外，其他版本以及 iOS 都可以直接使用官方提供的解析庫（Android 、iOS ）。

為了驗證 WebP 圖片格式的業(yè)務(wù)可行性，我們從流暢度、解碼耗時、CPU 使用、內(nèi)存占用幾個維度進(jìn)行的分析，在開發(fā)同學(xué)們的幫助下得到了非常寶貴的測試數(shù)據(jù)：

測試一：

AndroidQQ 下 PNG 和 WebP 各指標(biāo)對比。

• 測試環(huán)境：AndroidQQ、Galaxy Nexus、Android4.2.2 系統(tǒng)
• 測試對象：WebP、PNG

測試數(shù)據(jù)（部分）：

測試結(jié)論：

• 解碼耗時：WebP 的解碼時間是 PNG 格式的 4.4 倍（24.8ms）
• 流暢程度：兩種格式下，AIO 滑動流暢度無明顯差異
• CPU使用：兩種格式下，連續(xù)發(fā)送 15 個表情，CPU 使用均在 10%—26% 之間波動，兩者無明顯差異
• 內(nèi)存占用：兩者格式下，連續(xù)發(fā)送 15 個表情，PSS 內(nèi)存占用跨度均為 11M，無明顯差異

測試二：

iPhoneQQ 下 PNG 和 WebP 各指標(biāo)對比。

• 測試環(huán)境：iPhoneQQ、iPhone4、iOS5.1.1 系統(tǒng)
• 測試對象：WebP、PNG

測試數(shù)據(jù)（部分）：

測試結(jié)論：

• 解碼耗時：WebP 的解碼時間是 PNG 的 5 倍 左右（64.1ms）
• 流暢程度：WebP 的 FPS 平均值會比 PNG 的平均值要小，但是比較穩(wěn)定，跨度不大，性能也相差不大
• CPU使用：總體上看，PNG 格式的表情使用 CPU 波動比較大。從平均值來看 WebP 格式表情占用的 CPU 會比 PNG 表情的占用率大
• 內(nèi)存占用：WebP 格式表情，占用內(nèi)存的跨度為 4M，波動比較明顯。PNG 格式表情，占用內(nèi)存的跨度為 5M，沒有明顯波動。停止發(fā)送表情后，40s 左右內(nèi)存均有回降

可見除了 WebP 在解碼時間與 PNG 有較明顯差異（毫秒級別）之外，總體使用體驗和 PNG 基本無差異。同時也需要明確，移動設(shè)備的發(fā)展迅猛，硬件升級快，上一年的表現(xiàn)也許在今年又有了明顯的提升。所以，在 App 中使用 WebP 基本沒有技術(shù)阻礙。

對原創(chuàng)表情商城的技術(shù)指導(dǎo)

在驗證了業(yè)務(wù)可行性之后，WebP 又激發(fā)了我們對另外一些方向的思考：既然它表現(xiàn)如此優(yōu)秀，能否進(jìn)一步摸清其“秉性”，得到一些能在未來使用中遵循的指導(dǎo)方案？

于是，為了更深入了解 WebP 特性，我們針對原創(chuàng)表情項目 “不同的表情圖片，如何獲得 WebP 的最佳壓縮效率” 問題繼續(xù)展開探究，主要從圖片規(guī)格、色彩數(shù)（顏色數(shù)量）、參數(shù)配置幾個維度進(jìn)行：

探索一：圖片規(guī)格

通過閱讀文獻(xiàn)了解到 WebP 使用的是 Fancy 采樣算法，既然是采樣算法必然有采樣區(qū)塊，而 JPEG 的采樣區(qū)塊是 8*8，對于原始圖片的長寬不是 8 的倍數(shù)，都需要先補(bǔ)成 8 的倍數(shù)，使其能一塊塊的處理，所以對于 8 的整數(shù)倍的圖片，壓縮會更。

那么 WebP 的采樣區(qū)塊會是多少？我們在其他因素保持不變的前提下改變圖片規(guī)格，選取了 200*200 附近多個規(guī)格值，得到了一些數(shù)據(jù)。將數(shù)據(jù)可視化之后可以看到凡是以 16*16 倍數(shù)（160*160、176*176、192*192、256*256）為規(guī)格的圖片，有損壓縮的比例都明顯大于以 4*4 或 8*8 的倍數(shù)為規(guī)格的圖片。

結(jié)論：

原創(chuàng)表情可以考慮使用 “16n*16n” 的規(guī)格。目前原創(chuàng)表情選擇的是 200*200 的規(guī)格大小，實際上選擇 256*256 或者 192*192 能獲得更高的 WebP 壓縮效率，量級在千分之幾。

探索二：色彩數(shù)

在 JPEG 和 PNG 格式的選擇經(jīng)驗上可以知道，對于色彩復(fù)雜的圖片，一般使用 JPEG 格式，而對于色彩單一的圖片，使用 PNG 格式?？梢娚蕯?shù)會影響圖片的壓縮效果。于是我們通過 Photoshop 中的色階分離功能調(diào)整表情圖片的色彩數(shù)，在其他因素保持不變的前提下對比不同色彩數(shù)對于 WebP 有損無損壓縮的影響。

可見，在色彩數(shù)相對較少的前提下，無損壓縮的效果要優(yōu)于有損壓縮；而色彩數(shù)很多時，有損壓縮效果要優(yōu)于無損壓縮，這個分界點(diǎn)在 256±100 之間。

結(jié)論：

建議原創(chuàng)表情盡量控制顏色數(shù)在 256 色以內(nèi)，采用無損壓縮性價比最高。

• 小于 256 色：以圖標(biāo)，圖形，剪貼畫為代表，最適合采用 WebP 無損壓縮，精細(xì)度完美，體積大幅減少；
• 大于 256 色：以多數(shù)表情圖，廣告圖為代表，最適合采用 WebP 有損壓縮，選擇較高壓縮比（建議壓縮質(zhì)量為 100% ~ 75%）
• 遠(yuǎn)大于 256 色：以風(fēng)景照，視頻截圖為代表，最適合采用 WebP 有損壓縮，選擇適中壓縮比（建議壓縮質(zhì)量為 75% 以下）

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

隨后又從色溫、漸變與雜色、直線曲線、是否需要描邊上進(jìn)行了分析，最后的結(jié)論即：

• 色溫并不會影響表情圖片的壓縮效果，可大膽用色
• 漸變與雜色理論上都是增加色彩數(shù)，它的壓縮規(guī)律從符合第二條，但建議表情圖片少用漸變雜色和不必要的線條
• 直線與曲線理論上也是增加了色彩數(shù)（因為曲線邊緣會存在漸變），建議如果表情中可以“直”的地方就不要“彎”
• WebP 格式的圖片不會存在毛邊問題，所以不需要為表情圖片添加描邊

探索四：壓縮配置

為了得到無損壓縮和有損壓縮的最佳壓縮配置，我們通過對 900 張表情圖片進(jìn)行不同壓縮配置的測試（大部分表情圖片的色彩數(shù)都在 256 色以上），得到下面的數(shù)據(jù)：

壓縮參數(shù)說明：

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

可以發(fā)現(xiàn)，無損壓縮表現(xiàn)很穩(wěn)定，壓縮質(zhì)量越高，壓縮效果也越好。而有損壓縮在壓縮質(zhì)量設(shè)置為 75 以上之后，壓縮效果反而減弱，甚至壓縮后的圖片體積會大于壓縮前的體積。所以得出以下結(jié)論：

• 選擇無損壓縮時，“-lossless -q 100” 是最佳方案
• 選擇有損壓縮時，“-q 75”是最佳方案（圖片質(zhì)量與體積大小達(dá)到均衡）
• 無論何種壓縮參數(shù)，加上“-m 6”都能使得輸出的 WebP 圖片進(jìn)一步減少體積，量級是1%~2%，但是會增加耗時

最終，得出了一個正反面案例，從技術(shù)角度分析不同的表情圖標(biāo)的優(yōu)劣（強(qiáng)調(diào)一下是“技術(shù)角度”，這里列舉的表情都很贊 ^_^）。

動態(tài) WebP 初探

了解完靜態(tài) WebP，下面再了解一下動態(tài) WebP（Animated WebP）：2013 年 11 月 21 日，Animated WebP 終于取得進(jìn)展，并在 Chrome32 Beta 中得到了支持。目前 Animated WebP 支持將 GIF 直接轉(zhuǎn)換成 Animated WebP，或者將多張 WebP 圖片組合成 Animated WebP。與傳統(tǒng)的 GIF 圖比較，Animated WebP 的優(yōu)勢在于：

• 支持有損和無損壓縮，并且可以合并有損和無損圖片幀
• 體積更小，GIF 轉(zhuǎn)成有損 Animated WebP 后可以減小 64% 的體積，轉(zhuǎn)成無損可以節(jié)省 19% 的體積
• 顏色更豐富，支持 24-bit 的 RGB 顏色以及 8-bit 的 Alpha 透明通道（而 GIF 只支持 8-bit RGB 顏色以及 1-bit 的透明）
• 添加了關(guān)鍵幀、metadata 等數(shù)據(jù)

假如你在使用 Chrome32 以上的瀏覽器，可以點(diǎn)這里體驗。

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

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

根據(jù)自己實際的測試，發(fā)現(xiàn) Animated WebP 的壓縮效果較不穩(wěn)定，在默認(rèn)壓縮配置下達(dá)不到 Google 官方提供的示例效果。但 Animated WebP 依然有很多值得期待的空間，值得繼續(xù)關(guān)注。

綜合技術(shù)方案

對于不同場景下 WebP 的使用，我們總結(jié)了一些解決方案，如下：
1、若使用場景是瀏覽器，可以：

• JavaScript 能力檢測，對支持 WebP 的用戶輸出 WebP 圖片
• 使用 WebP 支持插件：WebPJS：
• 2、若使用場景是 App，可以：
• Android 4.0 以下 WebP 解析庫
• iOS WebP 解析庫
• 3、轉(zhuǎn)換工具：
• 智圖
• iSparta
• iSparta 是我們組針對 WebP 和 APNG 兩種新型圖片格式的轉(zhuǎn)化而開發(fā)的一款桌面應(yīng)用，直接圖片批量轉(zhuǎn)換為 WebP，同時提供多種參數(shù)配置，歡迎體驗。

【跟上流行的必備好文】

色彩的學(xué)問從來都是變幻多端的：
《快來跟上潮流！來了解一下2015年春夏流行色》

即將大幅流行的幽靈按鈕你都會了嗎？
《知根知底的趨勢！2014年最值得掌握的趨勢”幽靈按鈕”》

設(shè)計師必看的谷歌設(shè)計語言！
《該跟上潮流了！一大波優(yōu)質(zhì)的MATERIAL DESIGN資源免費(fèi)下載》

原文地址：騰訊 ISUX
作者：@Hahn__

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
“優(yōu)設(shè)網(wǎng)uisdc.com“是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：。
設(shè)計微博：擁有粉絲量87萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：官方微信：想在手機(jī)上、被窩里獲取設(shè)計教程和各種意想不到的”福利”嗎？添加優(yōu)設(shè)哥微信號：youshege