WebP支持：超乎你想象
WebP 是 Google 發(fā)明的更小的替代 JPEG 和 PNG 的格式。最近有很多關(guān)于 WebP 支持的疑惑，細(xì)說(shuō)來(lái)就是可以用它做什么，不能做什么，比如說(shuō)瀏覽器支持，CMS 支持等等。今天我想清除你所有可能的疑慮。WebP 的支持程度實(shí)際上比你想的可能要好得多。
WebP 瀏覽器支持
并非所有瀏覽器都支持 WebP，所以很重要的是你得清楚哪些瀏覽器是支持的，這可能會(huì)影響你做決定，是否在你的網(wǎng)站或項(xiàng)目中轉(zhuǎn)換并采用 WebP 圖片。下面是所有主流瀏覽器及其 WebP支持程度。
截至 2016 年 7 月，全球?yàn)g覽器對(duì) WebP 支持率是 69.6% – caniuse.comChrome WebP
Google Chrome 官方自 Chrome 23 起開(kāi)始支持 WebP)(最初發(fā)布于 2012 年 11 月)，自 Chrome 9 起部分支持。部分支持指的是并不支持無(wú)損的、支持 alpha 通道的 WebP。
Google 的安卓瀏覽器從 4.2 版本起開(kāi)始官方支持 WebP(最初發(fā)布于 2012 年 11 月)，4 版本起開(kāi)始部分支持。Google Chrome 安卓版從 Chrome 50 起開(kāi)始支持 Webp。
Opera WebP
Opera 官方自 Opera 12.1 開(kāi)始支持 WebP(最初發(fā)布于 2012 年 11 月)，自 Opera 11.5 起部分支持。部分支持指的是并不支持無(wú)損的、支持 alpha 通道的 WebP。
Opera mini 瀏覽器當(dāng)前所有版本都官方支持 WebP。
FireFox WebP
Firefox 當(dāng)前不支持 WebP。Mozilla 論壇的 bug 856375 正在討論此事。
Internet Explorer WebP
Internet Explorer 和他們新的 Edge 瀏覽器，都不支持WebP。而且目前并無(wú)添加支持的任何打算。不過(guò)，已有用戶(hù)發(fā)聲討論，人們要求微軟將 Webp 支持加入 Edge。
Safari WebP
Apple 的 Safari 瀏覽器及其 iOS Safari 瀏覽器都不支持WebP。不過(guò)，最近 HTML5test 有條推文說(shuō)我們有望在 iOS 10 看到Safari支持 WebP。iOS 10 目前處于 beta 測(cè)試階段，所以時(shí)間會(huì)說(shuō)明一切。
你該使用 WebP 嗎?
因?yàn)槿?WebP 支持度在 70% 左右浮動(dòng)，使用這種圖片格式來(lái)替代 PNG 和 JPEG 是極有意義的。還有重要的一點(diǎn)要提到，無(wú)論如何實(shí)現(xiàn) WebP，你只是為支持的瀏覽器提供 WebP 服務(wù)，而為其他瀏覽器提供 PNG 和 JPEG。使用 WebP 并不會(huì)破壞你的圖片。把這當(dāng)做增值，而非改變。還有另外一些東西需要考慮，如瀏覽器市場(chǎng)份額，當(dāng)前流量，WebP 相對(duì)于 PNG 和 JPEG 的文件體積。
1. 瀏覽器市場(chǎng)份額
決定是否使用 WebP 的時(shí)候，記得看下瀏覽器市場(chǎng)份額，因?yàn)?Chrome 和 Opera 支持 WebP，所以有必要看下他們的占比。我們從一些不同來(lái)源收集了一些統(tǒng)計(jì)數(shù)據(jù)，它們都有自己不同的數(shù)據(jù)收集方式：
StatCounter 瀏覽器市場(chǎng)份額
StatCounter 截至 2016 年 6 月的數(shù)據(jù)顯示，Chrome 占有市場(chǎng)份額為 58% 的，F(xiàn)irefox 以大約 16% 排名第二。
瀏覽器市場(chǎng)份額 statcounter
W3Counter 瀏覽器市場(chǎng)份額
W3Counter 截至 2016 年 6 月的數(shù)據(jù)顯示，Chrome 占有約 57% 的市場(chǎng)比例，Safari 以約 14% 躋身第二。
瀏覽器市場(chǎng)份額 w3counter
W3Schools 瀏覽器市場(chǎng)份額
W3Schools 截至 2016 年 5 月的數(shù)據(jù)顯示，Chrome 占有約 71% 的市場(chǎng)份額，F(xiàn)irefox 以約 17% 居于其后。
瀏覽器市場(chǎng)份額 w3schools
Clicky 瀏覽器市場(chǎng)份額
Clicky 截至 2016 年 7 月的數(shù)據(jù)顯示，Chrome 占有約 50% 的市場(chǎng)份額，F(xiàn)irefox 以約 18% 位居第二。
clicky browser market share
從上面的數(shù)據(jù)可以看到，Chrome 平均占有約 59% 的市場(chǎng)份額，所以必須意識(shí)到，如果在項(xiàng)目中加入 Webp 圖片，大多數(shù)訪客都會(huì)看到 WebP 版本。Opera 僅擁有市場(chǎng)份額的一小部分，但它們的用戶(hù)也可以看到。
2. Google Analytics
盡管瀏覽器市場(chǎng)份額對(duì)大多數(shù)人來(lái)說(shuō)可能傾向于 Chrome，并不意味著你的網(wǎng)站/項(xiàng)目也是如此。確認(rèn)數(shù)據(jù)總是很重要的。做起來(lái)很容易，點(diǎn)擊 Google Analytics 的 “瀏覽器與操作系統(tǒng)”(“Browser & OS”)部分就能看到。在下面的例子中，可以看到將近 70% 的流量來(lái)自 Chrome。在這種情況下，WebP 是很有利的，這意味著 70% 的訪客會(huì)看到更小體積的文件。
browser google analytics
還有，別忘了移動(dòng)端!可以在 Google Analytics 的“設(shè)備”(“Devices”)部分看到。如你所見(jiàn)，大部分流量來(lái)自蘋(píng)果設(shè)備。所以如果 iOS 10 完全支持 WebP 的話(huà)會(huì)頗有意思，這樣一來(lái)會(huì)大量的移動(dòng)端流量將會(huì)有戲劇性的不同。
google analytics mobile
3. WebP 文件體積
已經(jīng)有大量研究比較了 WebP 與 PNG、JPEG 的文件體積。一定要去看看它們。
- JPG 轉(zhuǎn) WebP – 壓縮大小比較
- WebP 平均減小了 85.87% 的文件提交。加載時(shí)間降低了 11%，頁(yè)面整體大小減少了 29%。
- PNG 轉(zhuǎn) WebP – 壓縮大小比較
- WebP 平均減小了42.8% 的文件提交。加載時(shí)間降低了 3%，頁(yè)面整體大小減少了 25%。
- WordPress 緩存開(kāi)啟下的 WebP
案例研究
還需要考慮成本效益比cost-benefit ratio。對(duì) WordPress 這樣的 CMS 來(lái)說(shuō)，現(xiàn)在有兩種圖片，一個(gè)是 JPEG 或 PNG，還有一個(gè) WebP。因此使用 WebP 會(huì)占用服務(wù)器更多的硬盤(pán)空間。但事實(shí)是，更小體積的圖片帶來(lái)的是更快的加載時(shí)間。不應(yīng)忽略節(jié)省下來(lái)的流量：取決于不同項(xiàng)目，積累下來(lái)的數(shù)量相當(dāng)可觀。
其他人正在使用 WebP，雖然你可能沒(méi)注意到。Dollar Shave Club 可以將其 App 的大小由 230 MB 減少到 30 MB!結(jié)果就是，使用 WebP 格式將體積減少了七倍。
webp image savings
CMS WebP 支持
接著平臺(tái)支持的問(wèn)題就來(lái)了，不管你是使用 WordPress 或 Joomla 這樣 的 CMS，或者僅僅是像 Laravel 這樣的 PHP 框架搭建的簡(jiǎn)單的靜態(tài)站點(diǎn)。下面我們將會(huì)介紹一點(diǎn)關(guān)于如何在在不同平臺(tái)上支持 Webp 圖片的內(nèi)容。
WordPress WebP
事實(shí)上，WordPress 很容易實(shí)現(xiàn) WebP 支持。你可以使用我們的集成圖片優(yōu)化(Image Optimizer) 插件，在將圖片上傳至 WordPress 媒體庫(kù)時(shí)候自動(dòng)轉(zhuǎn)換為 WebP 格式。
optimus webp files
然后你可以使用免費(fèi)的 WordPress Cache Enabler 插件來(lái)為訪客提供 WebP 圖片。
webp support caching
重點(diǎn)是，Cache Enabler 做的其實(shí)是判斷瀏覽器支持，為支持的瀏覽器提供 WebP，而為其他瀏覽器提供 JPEG 或 PNG。它實(shí)際上已經(jīng)自動(dòng)為你做好了切換工作。
Joomla WebP
Yireo 的免費(fèi)的 WebP Joomla 擴(kuò)展，允許在瀏覽器支持的情況下啟用 WebP 支持。其偵測(cè)瀏覽器對(duì) WebP 的支持，基于 user-agent 簡(jiǎn)單檢測(cè)(這樣就能正確匹配 Chrome)以及額外的 JavaScript 檢測(cè)。如若檢測(cè)到支持 WebP，擴(kuò)展會(huì)解析輸出的 HTML，確保那些支持圖片(png，jpg，jpeg)的鏈接被 Webp 圖片替換掉。
Magento WebP
Yireo 的免費(fèi)的 WebP Magento 擴(kuò)展，允許在瀏覽器支持的情況下啟用 WebP 支持。其偵測(cè)瀏覽器對(duì) WebP 的支持，基于 user-agent 簡(jiǎn)單檢測(cè)(Chrome)以及額外的 JavaScript 檢測(cè)(這樣也能夠匹配其他瀏覽器)。如若檢測(cè)到支持 WebP，擴(kuò)展會(huì)解析 HTML 輸出，確保那些支持圖片(png，jpg，jpeg)的鏈接被 Webp 圖片替換掉。
其他平臺(tái)上的 WebP
對(duì)于其他平臺(tái)，你應(yīng)該去看看我們的這篇如何提供 WebP (how to deliver WebP)。某些平臺(tái)啟用 WebP 支持，可能需要修改你的 .htaccess 文件或者 Nginx 配置。
小結(jié)
如你所見(jiàn)，WebP 的支持程度可能比你最初想的要好得多。當(dāng)然應(yīng)該講瀏覽器市場(chǎng)份額以及當(dāng)前的瀏覽數(shù)據(jù)納入考慮中。比方說(shuō)，如果 70% 以上的流量都來(lái)自 Chrome，那使用 WebP 來(lái)加速網(wǎng)站意義重大。如果你在使用 CMS，一切都很簡(jiǎn)單，因?yàn)橛泻芏嗖寮?lái)幫你完成 WebP 的轉(zhuǎn)換。
相關(guān)文章
