摘要：的支持程度實(shí)際上比你想的可能要好得多。的安卓瀏覽器從版本起開(kāi)始官方支持最初發(fā)布于年月，版本起開(kāi)始部分支持。安卓版從起開(kāi)始支持。而且目前并無(wú)添加支持的任何打算。瀏覽器市場(chǎng)份額截至年月的數(shù)據(jù)顯示，占有約的市場(chǎng)份額，以約位居第二。

本文轉(zhuǎn)載自：眾成翻譯
譯者：文藺
鏈接：http://www.zcfy.cc/article/862
原文：https://optimus.keycdn.com/support/webp-support/?utm_source=html5weekly&utm_medium=email

WebP 是 Google 發(fā)明的更小的替代 JPEG 和 PNG 的格式。最近有很多關(guān)于WebP支持的疑惑，細(xì)說(shuō)來(lái)就是可以用它做什么，不能做什么，比如說(shuō)瀏覽器支持，CMS 支持等等。今天我想清除你所有可能的疑慮。WebP 的支持程度實(shí)際上比你想的可能要好得多。

并非所有瀏覽器都支持 WebP，所以很重要的是你得清楚哪些瀏覽器是支持的，這可能會(huì)影響你做決定，是否在你的網(wǎng)站或項(xiàng)目中轉(zhuǎn)換并采用 WebP 圖片。下面是所有主流瀏覽器及其 WebP支持程度。

截至 2016 年 7 月，全球?yàn)g覽器對(duì) WebP 支持率是 69.6% – caniuse.com

Google Chrome 官方自 Chrome 23 起開(kāi)始支持 WebP）（最初發(fā)布于 2012 年 11 月），自 Chrome 9 起部分支持。部分支持指的是并不支持無(wú)損的、支持 alpha 通道的 WebP。

Google 的安卓瀏覽器（Google’s Android browser）從 4.2 版本起開(kāi)始官方支持 WebP（最初發(fā)布于 2012 年 11 月），4 版本起開(kāi)始部分支持。Google Chrome 安卓版（ Google’s Chrome for Android browser）從 Chrome 50 起開(kāi)始支持 Webp。

Opera 官方自 Opera 12.1 開(kāi)始支持 WebP（最初發(fā)布于 2012 年 11 月），自 Opera 11.5 起部分支持。部分支持指的是并不支持無(wú)損的、支持 alpha 通道的 WebP。

Opera mini 瀏覽器當(dāng)前所有版本都官方支持 WebP。

Firefox 當(dāng)前不支持 WebP。Mozilla 論壇的 bug 856375 正在討論此事。

Internet Explorer 和他們新的 Edge 瀏覽器，都不支持WebP。而且目前并無(wú)添加支持的任何打算。不過(guò)，已有用戶發(fā)聲討論，人們要求微軟將 Webp 支持加入 Edge。

Apple 的 Safari 瀏覽器及其 iOS Safari 瀏覽器都不支持WebP。不過(guò)，最近 HTML5test 有條推文說(shuō)我們有望在 iOS 10 看到Safari支持 WebP。iOS 10 目前處于 beta 測(cè)試階段，所以時(shí)間會(huì)說(shuō)明一切。

因?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 的文件體積。

決定是否使用 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% 排名第二。

W3Counter 瀏覽器市場(chǎng)份額

W3Counter 截至 2016 年 6 月的數(shù)據(jù)顯示，Chrome 占有約 57% 的市場(chǎng)比例，Safari 以約 14% 躋身第二。

W3Schools 瀏覽器市場(chǎng)份額

W3Schools 截至 2016 年 5 月的數(shù)據(jù)顯示，Chrome 占有約 71% 的市場(chǎng)份額，F(xiàn)irefox 以約 17% 居于其后。

Clicky 瀏覽器市場(chǎng)份額

Clicky 截至 2016 年 7 月的數(shù)據(jù)顯示，Chrome 占有約 50% 的市場(chǎng)份額，F(xiàn)irefox 以約 18% 位居第二。

從上面的數(shù)據(jù)可以看到，Chrome 平均占有約 59% 的市場(chǎng)份額，所以必須意識(shí)到，如果在項(xiàng)目中加入 Webp 圖片，大多數(shù)訪客都會(huì)看到 WebP 版本。Opera 僅擁有市場(chǎng)份額的一小部分，但它們的用戶也可以看到。

盡管瀏覽器市場(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ì)看到更小體積的文件。

還有，別忘了移動(dòng)端！可以在 Google Analytics 的“設(shè)備”（“Devices”）部分看到。如你所見(jiàn)，大部分流量來(lái)自蘋(píng)果設(shè)備。所以如果 iOS 10 完全支持 WebP 的話會(huì)頗有意思，這樣一來(lái)會(huì)大量的移動(dòng)端流量將會(huì)有戲劇性的不同。

已經(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
案例研究](https://www.keycdn.com/blog/wordpress-cache-enabler/)

還需要考慮成本效益比（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 格式將體積減少了七倍。

接著平臺(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)容。

事實(shí)上，WordPress 很容易實(shí)現(xiàn) WebP 支持。你可以使用我們的集成圖片優(yōu)化(Image Optimizer) 插件，在將圖片上傳至 WordPress 媒體庫(kù)時(shí)候自動(dòng)轉(zhuǎn)換為 WebP 格式。

然后你可以使用免費(fèi)的 WordPress Cache Enabler 插件來(lái)為訪客提供 WebP 圖片。

重點(diǎn)是，Cache Enabler 做的其實(shí)是判斷瀏覽器支持，為支持的瀏覽器提供 WebP，而為其他瀏覽器提供 JPEG 或 PNG。它實(shí)際上已經(jīng)自動(dòng)為你做好了切換工作。

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 圖片替換掉。

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 圖片替換掉。

對(duì)于其他平臺(tái)，你應(yīng)該去看看我們的這篇如何提供 WebP (how to deliver WebP)。某些平臺(tái)啟用 WebP 支持，可能需要修改你的 .htaccess 文件或者 Nginx 配置。

如你所見(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)換。

How to Use WordPress Retina and WebP Images

Convert to WebP Format – The Successor of JPEG