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