【譯】 WebP 支持：超出你想象

時間 2019-11-08

標籤 webp 支持超出想象简体版

原文原文鏈接

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

WebP 是 Google 發明的更小的替代 JPEG 和 PNG 的格式。最近有不少關於WebP支持的疑惑，細說來就是能夠用它作什麼，不能作什麼，好比說瀏覽器支持，CMS 支持等等。今天我想清除你全部可能的疑慮。WebP 的支持程度實際上比你想的可能要好得多。html

WebP 瀏覽器支持

並不是全部瀏覽器都支持 WebP，因此很重要的是你得清楚哪些瀏覽器是支持的，這可能會影響你作決定，是否在你的網站或項目中轉換並採用 WebP 圖片。下面是全部主流瀏覽器及其 WebP支持程度。html5

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

Chrome WebP

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 WebP

Opera 官方自 Opera 12.1 開始支持 WebP（最初發佈於 2012 年 11 月），自 Opera 11.5 起部分支持。部分支持指的是並不支持無損的、支持 alpha 通道的 WebP。服務器

Opera mini 瀏覽器當前全部版本都官方支持 WebP。框架

FireFox WebP

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

Internet Explorer WebP

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

Safari WebP

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

你該使用 WebP 嗎?

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

1. 瀏覽器市場份額

決定是否使用 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 僅擁有市場份額的一小部分，但它們的用戶也能夠看到。

2. Google Analytics

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

還有，別忘了移動端！能夠在 Google Analytics 的「設備」（「Devices」）部分看到。如你所見，大部分流量來自蘋果設備。因此若是 iOS 10 徹底支持 WebP 的話會很有意思，這樣一來會大量的移動端流量將會有戲劇性的不一樣。

3. 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 格式將體積減小了七倍。

CMS WebP 支持

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

WordPress WebP

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

而後你可使用免費的 WordPress Cache Enabler 插件來爲訪客提供 WebP 圖片。

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

Joomla WebP

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

Magento WebP

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