WebP簡(jiǎn)介：
WebP 格式是 Google 于2010年發(fā)布的一種支持有損壓縮和無(wú)損壓縮的圖片文件格式，派生自圖像編碼格式 VP8。它具有較優(yōu)的圖像數(shù)據(jù)壓縮算法，能帶來(lái)更小的圖片體積，而且擁有肉眼識(shí)別無(wú)差異的圖像質(zhì)量，同時(shí)具備了無(wú)損和有損的壓縮模式、Alpha 透明以及動(dòng)畫(huà)的特性。目前googleG+、YouTube以及Google Play全站都在使用WebP格式的圖片。15年雙11手淘前端技術(shù)巡演中提到，淘寶3年前native層面就已經(jīng)支持WebP， 兩年前H5頁(yè)面全面支持。QQ空間裝扮、淘寶廣告圖，Facebook Android也都使用WebP。
以下通過(guò)研究WebP圖片格式，盡可能全面地了解WebP圖片的優(yōu)劣勢(shì)以及應(yīng)用WebP圖片給我們帶來(lái)的收益以及風(fēng)險(xiǎn)，最終達(dá)到提升用戶(hù)體驗(yàn)，提升圖片加載速度，節(jié)省帶寬的目的。
WebP優(yōu)勢(shì)
官方測(cè)試：
根據(jù)測(cè)試，WebP無(wú)損壓縮的圖片比PNG格式圖片，文件大小上少 26%；
根據(jù)測(cè)試，WebP有損圖片在同樣SSIM質(zhì)量指標(biāo)上比JPEG格式圖片少25~34%。 SSIM是一種衡量?jī)蓮垟?shù)字影像相似的指標(biāo)
有損壓縮測(cè)試方法簡(jiǎn)述：
1.將PNG圖片設(shè)置不同的壓縮參數(shù)壓縮成JPEG圖片，記錄壓縮后的對(duì)比的SSIM。
2.將同一張PNG圖片壓縮成WebP圖片，壓縮的WebP圖片的SSIM指標(biāo)必須比1中記錄的SSIM高。
其他測(cè)試：
同樣質(zhì)量的WebP與JPG圖片，在線加載速度測(cè)試。測(cè)試的JPG和WebP圖片大小如下：
測(cè)試數(shù)據(jù)折線圖如下：
從折線圖可以看到，WebP雖然會(huì)增加額外的解碼時(shí)間，但由于減少了文件體積，縮短了加載的時(shí)間，頁(yè)面的渲染速度加快了。同時(shí)，隨著圖片數(shù)量的增多，WebP頁(yè)面加載的速度相對(duì)JPG頁(yè)面增快了。所以，使用WebP基本沒(méi)有技術(shù)阻礙，還能帶來(lái)性能提升以及帶寬節(jié)省。
通過(guò)以上兩組對(duì)比可以得知，WebP在文件大小以及傳輸速度上肯定是擁有優(yōu)勢(shì)的，將極大節(jié)省用戶(hù)及cdn流量。
動(dòng)圖
GIF 圖片主要應(yīng)用于圖片分享類(lèi)應(yīng)用中，如微博等。與傳統(tǒng)的 GIF 圖比較，動(dòng)態(tài) WebP 的優(yōu)勢(shì)在于：
1.支持有損和無(wú)損壓縮，并且可以合并有損和無(wú)損圖片幀；
2.體積更小，GIF 轉(zhuǎn)成有損動(dòng)態(tài) WebP 后可以減小 64% 的體積，轉(zhuǎn)成無(wú)損可以節(jié)省 19% 的體積；
3.顏色更豐富，支持 24-bit 的 RGB 顏色以及 8-bit 的 Alpha 透明通道（而GIF 只支持8-bit RGB 顏色以及 1-bit 的透明）；
4.添加了關(guān)鍵幀、metadata 等數(shù)據(jù)；
動(dòng)圖測(cè)試：
GIF動(dòng)圖1?63.9KB ??WebP動(dòng)圖1?28.9KB
GIF動(dòng)圖2?1.7MB ??WebP動(dòng)圖2?479KB
GIF動(dòng)圖3?2MB?WebP動(dòng)圖3?208KB
WebP劣勢(shì)：
1.各個(gè)端支持情況不一。這點(diǎn)會(huì)在下一節(jié)中詳細(xì)說(shuō)明。
2.遷移成本較大，需要對(duì)所有圖片重新編碼，考慮到對(duì)舊版的支持，需要額外開(kāi)辟空間存兩種格式的圖片。
3.編解碼速度上，根據(jù)Google的測(cè)試，目前WebP與JPG相比較，毫秒級(jí)別上，編碼速度慢10倍，解碼速度慢1.5倍。編碼速度即可被沒(méi)影響，我們只是在上傳時(shí)生成一份WebP圖片。解碼速度則需要客戶(hù)端綜合節(jié)省下的流量來(lái)綜合考慮。總之帶寬節(jié)省比cpu消耗更有價(jià)值
4.盡管有不少app在使用WebP圖片，但與JPG/PNG相比還是太少了，接受度并沒(méi)有太高。
5.app中部分“歸檔化”的交互操作，比如圖片保存，因此這些交互操作上需要進(jìn)行WebP編解碼成JPG。直接保存下來(lái)的webp圖片，非常不方便reuse以及review。
WebP各端支持情況：
瀏覽器支持情況：
根據(jù)對(duì)目前國(guó)內(nèi)瀏覽器占比與 WebP 的兼容性分析，大約有 50% 以上的國(guó)內(nèi)用戶(hù)可以直接體驗(yàn)到 WebP。
如何檢測(cè)瀏覽器是否支持：
1.JavaScript 能力檢測(cè)，對(duì)支持 WebP 的用戶(hù)輸出 WebP 圖片
2.使用 WebP?支持插件：WebPJS
3.有一部分CDN廠商是提供webp檢測(cè)服務(wù)
4.Http header accept type 返回接受的image typ
5.GooglePageSpeed提供自動(dòng)將jpg轉(zhuǎn)化成webp，提供給支持webp的瀏覽器上。
Android：
Android 4.0及以上原生支持； 4.0以下可以使用官方提供提供的編解碼庫(kù)。
iOS：
iOS native 不支持，safari目前也不支持。據(jù)說(shuō)ios 10的safari有可能會(huì)支持。native支持層面，google官方，以及第三方都提供了解決方案。國(guó)內(nèi)也有不少ios團(tuán)隊(duì)在做webp圖片的支持工作。
視覺(jué)設(shè)計(jì)：
Photoshop 原生是不支持WebP的，但有插件提供WebP支持。
總結(jié)：
1.圖片占據(jù)云音樂(lè)cdn服務(wù)中很大的一部分流量，更節(jié)省的圖片流量對(duì)產(chǎn)品及用戶(hù)肯定有巨大提升。一部分cnd廠商是支持webp轉(zhuǎn)化服務(wù)或者web支持探測(cè)服務(wù)的，這點(diǎn)可以問(wèn)我們的cdn廠商。
2.目前各端從jpg/png圖片遷移肯定需要一段比較長(zhǎng)的過(guò)程，并且需要cdn、后臺(tái)等準(zhǔn)備工作。
參考：
1. WebP官方文檔https://developers.google.com/speed/webp/
2. 淘寶前端優(yōu)化https://github.com/amfe/article/issues/21
3. 騰訊WebP探尋https://isux.tencent.com/introduction-of-webp.html
4. iOS WebP實(shí)踐https://segmentfault.com/a/1190000006266276
5. 七牛云存儲(chǔ)WebP支持https://segmentfault.com/a/1190000002726138
6. 探究WebP一些事兒http://web.jobbole.com/87103/
7. Frequently Asked Questionshttps://developers.google.com/speed/webp/faq
8. 七牛云圖片處理http://blog.qiniu.com/archives/5793
9. https://havecamerawilltravel.com/photographer/webp-website
