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

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

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

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

截至 2016 年 7 月，全球瀏覽器對 WebP 支持率是 69.6% – caniuse.com

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

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

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

Opera mini 瀏覽器當前所有版本都官方支持 WebP。

Firefox 當前不支持 WebP。Mozilla 論壇的 bug 856375 正在討論此事。

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

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

因為全球 WebP 支持度在 70% 左右浮動，使用這種圖片格式來替代 PNG 和 JPEG 是極有意義的。還有重要的一點要提到，無論如何實現 WebP，你只是為支持的瀏覽器提供 WebP 服務，而為其他瀏覽器提供 PNG 和 JPEG。使用 WebP 并不會破壞你的圖片。把這當做增值，而非改變。還有另外一些東西需要考慮，如瀏覽器市場份額，當前流量，WebP 相對于 PNG 和 JPEG 的文件體積。

決定是否使用 WebP 的時候，記得看下瀏覽器市場份額，因為 Chrome 和 Opera 支持 WebP，所以有必要看下他們的占比。我們從一些不同來源收集了一些統計數據，它們都有自己不同的數據收集方式：

StatCounter 瀏覽器市場份額

StatCounter 截至 2016 年 6 月的數據顯示，Chrome 占有市場份額為 58% 的，Firefox 以大約 16% 排名第二。

W3Counter 瀏覽器市場份額

W3Counter 截至 2016 年 6 月的數據顯示，Chrome 占有約 57% 的市場比例，Safari 以約 14% 躋身第二。

W3Schools 瀏覽器市場份額

W3Schools 截至 2016 年 5 月的數據顯示，Chrome 占有約 71% 的市場份額，Firefox 以約 17% 居于其后。

Clicky 瀏覽器市場份額

Clicky 截至 2016 年 7 月的數據顯示，Chrome 占有約 50% 的市場份額，Firefox 以約 18% 位居第二。

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

盡管瀏覽器市場份額對大多數人來說可能傾向于 Chrome，并不意味著你的網站/項目也是如此。確認數據總是很重要的。做起來很容易，點擊 Google Analytics 的 “瀏覽器與操作系統”（“Browser & OS”）部分就能看到。在下面的例子中，可以看到將近 70% 的流量來自 Chrome。在這種情況下，WebP 是很有利的，這意味著 70% 的訪客會看到更小體積的文件。

還有，別忘了移動端！可以在 Google Analytics 的“設備”（“Devices”）部分看到。如你所見，大部分流量來自蘋果設備。所以如果 iOS 10 完全支持 WebP 的話會頗有意思，這樣一來會大量的移動端流量將會有戲劇性的不同。

已經有大量研究比較了 WebP 與 PNG、JPEG 的文件體積。一定要去看看它們。

JPG 轉 WebP – 壓縮大小比較

WebP 平均減小了 85.87% 的文件提交。加載時間降低了 11%，頁面整體大小減少了 29%。

PNG 轉 WebP – 壓縮大小比較

WebP 平均減小了42.8% 的文件提交。加載時間降低了 3%，頁面整體大小減少了 25%。

[WordPress 緩存開啟下的 WebP
案例研究](https://www.keycdn.com/blog/wordpress-cache-enabler/)

還需要考慮成本效益比（cost-benefit ratio）。對 WordPress 這樣的 CMS 來說，現在有兩種圖片，一個是 JPEG 或 PNG，還有一個 WebP。因此使用 WebP 會占用服務器更多的硬盤空間。但事實是，更小體積的圖片帶來的是更快的加載時間。不應忽略節省下來的流量：取決于不同項目，積累下來的數量相當可觀。

其他人正在使用 WebP，雖然你可能沒注意到。Dollar Shave Club 可以將其 App 的大小由 230 MB 減少到 30 MB！結果就是，使用 WebP 格式將體積減少了七倍。

接著平臺支持的問題就來了，不管你是使用 WordPress 或 Joomla 這樣 的 CMS，或者僅僅是像 Laravel 這樣的 PHP 框架搭建的簡單的靜態站點。下面我們將會介紹一點關于如何在在不同平臺上支持 Webp 圖片的內容。

事實上，WordPress 很容易實現 WebP 支持。你可以使用我們的集成圖片優化(Image Optimizer) 插件，在將圖片上傳至 WordPress 媒體庫時候自動轉換為 WebP 格式。

然后你可以使用免費的 WordPress Cache Enabler 插件來為訪客提供 WebP 圖片。

重點是，Cache Enabler 做的其實是判斷瀏覽器支持，為支持的瀏覽器提供 WebP，而為其他瀏覽器提供 JPEG 或 PNG。它實際上已經自動為你做好了切換工作。

Yireo 的免費的 WebP Joomla 擴展，允許在瀏覽器支持的情況下啟用 WebP 支持。其偵測瀏覽器對 WebP 的支持，基于 user-agent 簡單檢測（這樣就能正確匹配 Chrome）以及額外的 JavaScript 檢測。如若檢測到支持 WebP，擴展會解析輸出的 HTML，確保那些支持圖片（png，jpg，jpeg）的鏈接被 Webp 圖片替換掉。

Yireo 的免費的 WebP Magento 擴展，允許在瀏覽器支持的情況下啟用 WebP 支持。其偵測瀏覽器對 WebP 的支持，基于 user-agent 簡單檢測（Chrome）以及額外的 JavaScript 檢測（這樣也能夠匹配其他瀏覽器）。如若檢測到支持 WebP，擴展會解析 HTML 輸出，確保那些支持圖片（png，jpg，jpeg）的鏈接被 Webp 圖片替換掉。

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

如你所見，WebP 的支持程度可能比你最初想的要好得多。當然應該講瀏覽器市場份額以及當前的瀏覽數據納入考慮中。比方說，如果 70% 以上的流量都來自 Chrome，那使用 WebP 來加速網站意義重大。如果你在使用 CMS，一切都很簡單，因為有很多插件來幫你完成 WebP 的轉換。

How to Use WordPress Retina and WebP Images

Convert to WebP Format – The Successor of JPEG