什么是WebP
具不完全統(tǒng)計(jì)材原，互聯(lián)網(wǎng)流量中60%都產(chǎn)生于圖片窿侈，圖片永遠(yuǎn)是流量的大頭念秧，如何保證在圖片的精細(xì)度不降低的前提下縮小圖片體積，成為了一個(gè)有價(jià)值且值得探索的事情估灿。
WEBP 是google推出的意圖改變web圖片JPG崇呵、PNG、GIF三分天下局勢(shì)的一種圖片格式馅袁。它不僅支持無(wú)損或有損壓縮域慷、alpha通道，還支持動(dòng)畫演示汗销。在同畫質(zhì)的情況下犹褒，webp格式圖片占用體積相較于jpg圖片大約減少40%，相較于無(wú)損png圖片大約減少30%弛针。
目前叠骑，移動(dòng)端Android4.0以上、PC端chorme 10+（14 ~ 16 有渲染bug）削茁、opera 11+ 宙枷、safri均支持webp格式圖片。
WebP的優(yōu)點(diǎn)
WebP 的優(yōu)勢(shì)體現(xiàn)在它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法茧跋，能帶來(lái)更小的圖片體積慰丛，而且擁有肉眼識(shí)別無(wú)差異的圖像質(zhì)量；同時(shí)具備了無(wú)損和有損的壓縮模式瘾杭、Alpha 透明以及動(dòng)畫的特性诅病，在 JPEG 和 PNG 上的轉(zhuǎn)化效果都非常優(yōu)秀、穩(wěn)定和統(tǒng)一粥烁。
科技博客 Gig???aOM 曾報(bào)道：YouTube 的視頻略縮圖采用 WebP 格式后贤笆，網(wǎng)頁(yè)加載速度提升了 10%；谷歌的 Chrome 網(wǎng)上應(yīng)用商店采用 WebP 格式圖片后讨阻，每天可以節(jié)省幾 TB 的帶寬芥永，頁(yè)面平均加載時(shí)間大約減少 1/3；Google+ 移動(dòng)應(yīng)用采用 WebP 圖片格式后钝吮，每天節(jié)省了 50TB 數(shù)據(jù)存儲(chǔ)空間恤左。
這里列舉一個(gè)簡(jiǎn)單的測(cè)試：對(duì)比 PNG 原圖、PNG 無(wú)損壓縮搀绣、PNG 轉(zhuǎn) WebP（無(wú)損）、PNG 轉(zhuǎn) WebP（有損）的壓縮效果戳气。更多測(cè)試查看這里（請(qǐng)用 Chrome 瀏覽器打開）
可以得出結(jié)論：
- PNG 轉(zhuǎn) WebP 的壓縮率要高于 PNG 原圖壓縮率链患，同樣支持有損與無(wú)損壓縮
- 轉(zhuǎn)換后的 WebP 體積大幅減少，圖片質(zhì)量也得到保障（同時(shí)肉眼幾乎無(wú)法看出差異）
- 轉(zhuǎn)換后的 WebP 支持 Alpha 透明和 24-bit 顏色數(shù)瓶您，不存在 PNG8 色彩不夠豐富和在瀏覽器中可能會(huì)出現(xiàn)毛邊的問(wèn)題
“WebP探尋之路”文章還從流暢度麻捻、解碼耗時(shí)纲仍、CPU 使用、內(nèi)存占用幾個(gè)維度對(duì)WebP格式和Png格式進(jìn)行了對(duì)比分析贸毕。詳情可移步查看郑叠。
WebP的缺點(diǎn)
目前WEBP與JPG相比較，編碼速度慢10倍明棍，解碼速度慢1.5倍乡革。
針對(duì)1.5倍的解碼速度是否影響用戶體驗(yàn)的問(wèn)題，dbay團(tuán)隊(duì)進(jìn)行了測(cè)試摊腋，50張同樣質(zhì)量的WEBP與jgp加載的速度對(duì)比：http://www.webpagetest.org/video/view.php?id=130125_7b15e676f5fa0b736f247ff0ed36517e64d9c9ea
此測(cè)試表明沸版，webp雖然會(huì)增加額外的解碼時(shí)間，但是由于減少了文件體積兴蒸，縮短了加載的時(shí)間视粮，實(shí)際上文件的渲染速度反而變快了，從下面的圖片中可以很明顯的看到橙凳。
WebP的應(yīng)用
2010 年發(fā)布的 WebP 已經(jīng)不算是新鮮事物了蕾殴，在 Google 的明星產(chǎn)品如 Youtube、Gmail岛啸、Google Play 中都可以看到 WebP 的身影钓觉，而 Chrome 網(wǎng)上商店甚至已完全使用了 WebP。國(guó)外公司如 Facebook值戳、ebay 和國(guó)內(nèi)公司如騰訊议谷、淘寶、美團(tuán)等也早已嘗鮮堕虹。目前 WebP 也在我廠很多的項(xiàng)目中得到應(yīng)用卧晓，如騰訊新聞客戶端、騰訊網(wǎng)赴捞、QQ空間等逼裆，同時(shí)也有一些針對(duì) WebP 的圖片格式轉(zhuǎn)換工具，如 智圖赦政，iSparta 等胜宇。
對(duì)于企業(yè)來(lái)講，如果要大面積應(yīng)用WEBP恢着，無(wú)疑對(duì)服務(wù)器存儲(chǔ)是一個(gè)很大考驗(yàn)桐愉。我們不能拋棄原有格式，那么存儲(chǔ)的數(shù)據(jù)量將會(huì)增加60%掰派，如果請(qǐng)求時(shí)再轉(zhuǎn)換从诲，由于目前轉(zhuǎn)碼的效率太低，特別的大文件的PNG速度相當(dāng)?shù)穆蚁郏@兩點(diǎn)都是目前實(shí)際使用最大的痛點(diǎn)系洛。
即使要嘗試使用俊性，也不能像facebook那樣，在相冊(cè)中做試驗(yàn)描扯，相冊(cè)類的應(yīng)用很多用戶會(huì)有把照片從web上另存的需求定页，而WEBP在沒(méi)有安裝解碼包的情況下，即使下載到電腦中也是無(wú)法直接瀏覽的绽诚，所以一定要避免這種應(yīng)用場(chǎng)景典徊。
目前我認(rèn)為可行的應(yīng)用場(chǎng)景：
- 客戶端軟件，內(nèi)嵌了基于Chromium的webview憔购，這類瀏覽器中應(yīng)用的網(wǎng)頁(yè)是可以完全使用webp格式宫峦，提升加載渲染速度，不考慮兼容玫鸟。
- 用node-webkit開發(fā)的程序导绷，用webp可以減少文件包的體積。
- 移動(dòng)應(yīng)用 或 網(wǎng)頁(yè)游戲 ,界面需要大量圖片,可以嵌入webp的解碼包,能夠節(jié)省用戶流量屎飘，提升訪問(wèn)速度妥曲。
