WebP調(diào)研

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高。

jpg、webp相同ssim測(cè)試

其他測(cè)試:

同樣質(zhì)量的WebP與JPG圖片,在線加載速度測(cè)試。測(cè)試的JPG和WebP圖片大小如下:

在線測(cè)試圖片大小

測(cè)試數(shù)據(jù)折線圖如下:

加載時(shí)間對(duì)比

從折線圖可以看到,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支持

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 移動(dòng)端圖片格式調(diào)研 圖片通常是移動(dòng)端流量耗費(fèi)最多的部分,并且占據(jù)著重要的視覺(jué)空間。合理的圖片格式選用和優(yōu)化可以為你...
    AngeloD閱讀 1,253評(píng)論 0 5
  • 圖片通常是移動(dòng)端流量耗費(fèi)最多的部分,并且占據(jù)著重要的視覺(jué)空間。合理的圖片格式選用和優(yōu)化可以為你節(jié)省帶寬、提升視覺(jué)效...
    傻傻小蘿卜閱讀 794評(píng)論 1 9
  • 注明:本人原創(chuàng)翻譯,原版為Essential Image Optimization電子書(shū),這里將其拆分為幾篇文章發(fā)...
    ProteanBear閱讀 5,284評(píng)論 0 5
  • 盡量減少PNG圖片的大小是Android里面很重要的一條規(guī)范。相比起JPEG,PNG能夠提供更加清晰無(wú)損的圖片,但...
    Viking_Den閱讀 466評(píng)論 0 0
  • WebP(發(fā)音 weppy),是一種支持有損壓縮和無(wú)損壓縮的圖片文件格式,派生自圖像編碼格式 VP8。根據(jù) Goo...
    九都散人閱讀 4,435評(píng)論 0 10