提升網站用戶體驗—WebP 圖片的高效使用

一.WebP 的由來

現代圖像壓縮技術對我們的生活方式影響很大。數碼相機能將上千張高質量圖片存儲到一張內存卡里、智能手機可以與鄰近設備快速分享高分辨率的圖片、網站與手機等移動設備能快速展示各種 富媒體 。

然而，如果圖片只能以最原始的格式進行存儲的話，以上所有都只是紙上空談。

在 APP、瀏覽器或 PC 端、還是移動端等各種設備里，通常使用 JPEG 這種損耗較大的格式對圖片進行高效率的管理，而使用 PNG 這種失真較小的格式傳送圖表、圖標以及圖畫等。

然而，在過去幾年間，盡管視頻的格式發展迅速，圖像格式卻有些不盡人意。

直到 2010 年，谷歌推出了全新的WebP（發音為 「Weppy」）格式，一種開源且同時支持有損與無損壓縮的圖片格式，才改善了這一現狀。

WebP 格式文件要比常用的 JEPG 與 PNG 格式小得多，而且還支持許多高級特性，比如有損模式下的透明性，在低質、高壓縮設置下更為養眼的圖片質量等。

二.WebP 的意義

前兩年 Google 進行了一個統計調查：如果亞馬遜頁面加載每慢 100ms，將影響他們 1% 的收入；如果谷歌頁面加載慢 500ms ，流量將銳減 20%，這個數據到現在只會更加恐怖！

評價網站性能好壞的一個主要指標就是 頁面響應時間 ，也就是說用戶打開完整頁面的時間。IT 業內的人一般都了解，普通的基于 JEPG 還有 PNG 圖片格式的網頁，其圖片資源加載往往都占據了頁面耗時的主要部分，技術運維人員需要做的就是要 BOSS 知道這個事實而已，進而推動 WebP 技術的使用。

現在業內的很多前端監控工具都是基于撥測的模擬訪問。假設，在 網絡良好、用戶機器良好、用戶使用 pc 有線網、運營商及 DNS 無任何問題等等情況下 的訪問，這是真實的用戶訪問么？！！

像下圖這樣的，針對用戶訪問頁面時間的真實監控，才能用來作為推動某項技術落地于網站的有力證據。

然后，再通過類似 資源加載耗時 這樣的功能，就像上面說的那樣，基于真實的用戶體驗來抓出拖慢頁面響應時間的真正元兇——圖片！

筆者之前做過前端優化的工作，國內外的前端性能優化工具也使用了不少，最近也詢問了周圍做性能優化的朋友，現階段可以較好實現上面兩個功能的工具有： OneAPM Browser Insight 、 AppDynamics 、 Ruxit ，大家有興趣的話可以去嘗試下。

WebP 的意義就在于此，通過較小的文件來降低帶寬的消耗，為線上服務降低流量成本，更快的展示和更短的圖像共享時間，為網站及移動應用用戶帶去更好的用戶體驗。

在本文中，主要介紹 Cloudinary 基于云的即時 WebP 圖像生成技術以及 Google 開發的通過代碼行來實現的 WebP 圖像的生成。

三.WebP 的強大優勢

1.同等質量但是圖片更小

通過 Cloudinary 這個軟件，簡單地改變 CDN 提供的 URL 的文件擴展名，就可以進行圖像格式的即時轉換。

例如，有一張以公共 ID 名 「sample」 上傳到云的 JPG 圖片，現在我們要在網站上嵌入該圖像 300x200 px 的縮略圖。

下圖 1 是由 Cloudinary 使用 JPG 格式生成的，而圖 2 是使用 WebP 格式生成的。(注意，通過谷歌 Chrome 瀏覽器才能正確地查看 WebP 圖像）

圖2.sample.webp 12.4KB WebP

如果檢查網絡數據，你會發現，JPG 文件是 27.9 KB 而 WebP 文件只有 12.4 KB，而兩張圖片看起來幾乎相同。這意味著節省了56%的帶寬。如果你的網站包含了大量圖片，就可以節省一半的流量，讓你的網站以兩倍于之前的速度加載，訪問者肯定更加高興。

如果使用客戶端庫，既可以在公共 ID 后面連接「.webp」，也可以將「format」參數設置為「webp」。例如，在 Ruby on Rails 和 PHP 中：

<%= cl_image_tag("sample.webp", :crop => :scale, :width => 300) %>

   "webp", "width" => 300, 
                        "crop" => "scale")); ?>

2.壓縮之后質量無明顯變化！

JPG 和 WebP 都支持有損壓縮格式，允許你控制目標圖像的質量。

目標圖像的質量和文件大小之間存在明顯的折中關系。在很多情況下，可以很大程度降低圖像的質量和尺寸，而用戶卻幾乎不會注意到其中的差別。

不過，JPEG 格式的圖片在質量較低時會有明顯的缺陷，尤其是當圖片包含微小的細節或文本時，但 WebP 格式則沒有明顯的缺陷，但也會在低質量設置時產生稍微模糊的圖像。

你可以將 Cloudinary 的「quality」參數（或者 URL 的「q」參數）設置為1到99之間的任何值（默認值為90）來自己測試一下。

下面的例子將樣本圖片的質量設置為30%。圖一是 JPG 圖片的效果，圖二是 WebP 圖片的效果。

圖1.sample.jpg 10.6KB

圖2.sample.webp 7.1KB WebP

顯然，只有眼尖的人才能察覺質量上的差別，質量降低后的圖片仍舊保持了不錯的觀感，WebP 格式圖片在這一點上尤為突出。30% 的質量設置下，JPG 圖片的大小為 10.6KB，而 WebP 僅為 7.1KB。

相比之下，WebP 格式的圖片減小了33% 的大小，而與 JPG 格式的原圖相比，低質量的 WebP 格式圖片只占了其四分之一大小。

下面的 Node.js 與 Django 示例會產生與上例效果相似的交付 URL。

cloudinary.image("sample.webp", { width: 300, crop: 「scale」, quality: 30 });

cloudinary.CloudinaryImage("sample.webp").image(width = 300,  
                           crop = 'scale', quality = 30)

3.完美支持無損 WebP 圖像

以上所有例子中，WebP 都是有損格式，只保留了 90% 或更低的質量。

WebP 同樣支持一如 PNG 格式的無損模式，這種無損模式對于柵格化的矢量圖形非常有用（比如，logo），因為這類圖像一旦保存為有損模式，就會出現明顯的質量下降。

想要生成無損的 WebP 文件，只需將 Cloudinary 的 「quality」 變量設置為 100:

圖1.cloudinary_icon.webp

在 Ruby on Rails 也是一樣：

<%= cl_image_tag("sample.webp", :quality => 100) %>

四.確定用戶比例

正如上面提到的，并不是所有的瀏覽器都支持的 WebP 圖片格式。

目前支持 WebP 的主要是 Chrome，Android 4.0+ 版本還有 Opera 瀏覽器。這確實是限制 WebP 推廣的最大問題，技術人員需要有選擇性地決定何時利用它。

但，在另一方面講，Chrome 是相當受歡迎，尤其是針對 IT 人員或者各個行業的高素質人員來講，所以，即使只為了提升 Chrome 用戶的用戶體驗并且節省 Chrome 瀏覽器所消耗的那一部分帶寬，使用 WebP 仍然是值得的。

那么問題來了，盡管 Chrome 瀏覽器和 Android 系統的普及程度是人盡皆知的，關于網站訪客的瀏覽器比例，技術人員同樣需要拿出一定的數據來像 Boss 證明，轉化 WebP 圖像這個操作是有意義的。

所以針對網站用戶統計的工具就非常重要了，而且這個工具還不能是像 GA、百度統計以及 CNZZ 這樣的營銷工具，一定要基于 真實用戶訪問 的用戶訪問統計圖才有說服力。

這個要識別起來其實很難的，因為各種機型瀏覽器非常復雜，目前國內外 APM （性能優化）領域涉及這個方面并且做的符合需求的工具也給大家推薦幾個： OneAPM Browser Insight 、 AppDynamics 、 NewRelic

五.通過命令行將圖像轉換為WebP

除了可以通過 Cloudinary 這款軟件來生成 WebP 圖片之外，還可以通過代碼命令來生成相應的 WebP 圖片。

谷歌已開發了大量實用的命令行將圖像轉換為 WebP，每個人都可以從谷歌開發者網站下載。當你有一個實用程序的副本之后，你可能想要將實用程序的 bin 文件夾添加到您的本地路徑，這可以通過將以下代碼添加到你的主目錄 下的.bash_profile文件中來實現(針對 Mac/Linux 系統)。

PATH=$PATH:"/path/to/libwebp-utilities/bin"  
export PATH

你需要更新下引用路徑來表示你的系統上 WebP 實用程序文件夾的位置。重新啟動終端止，就能夠訪問命令行實用工具了。

另外，Mac 可以使用 homebrew 來安裝實用程序。

brew install webp

注:homebrew 不是總能匹配項目網站的最新版的。

安裝實用程序完成后，就可以使用 cwebp 將 JPEG 或 PNG 圖像轉換成 WebP 格式。

cwebp [options] -q quality input.jpg -o output.webp

質量選項應該是 0 (差)到 100 (很好)之間的數字，典型的質量值大約是 80，但是你也可以多多嘗試，直到文件質量和大小都讓你滿意。

完整的選項列表，可以使用此實用工具運行帶有 -longhelp 的 cwebp 命令，或者查看 幫助文檔 。

注:也可以使用 dwebp 實用程序將 WebP 圖像轉換回 PNG、PAM、PPM 或 PGM 圖像。

dwebp input_file.webp [options] [-o output_file]

六.基于訪客瀏覽器的動態 WebP 生成

就像上文說過的，為了僅針對 Chrome/Android4/Opera 的訪客生成 WebP 圖像，你可以使用 JS 代碼根據訪客的瀏覽器信息加載圖像。

Cloudinary 的 jQuery 插件能幫助你動態地生成展示 URL，后者會即時地生成圖片，再通過帶有高級緩存的 CDN 快速地展示結果。

例如，你可以在 HTML 頁面定義圖片標簽，將 「src」 屬性設置為空白圖片，將 「data-src」 屬性設置為已經上傳至 Cloudinary 的實際圖片的公共 ID 值。

<img src="blank.png" width="150" height="100" data-crop="fill" data-src="sample.jpg"/>

下面的 jQuery 代碼會將所有圖片標簽轉換為動態生成的圖像 URL，而不是占位的空白圖片。

$('img').webpify();

該頁面加載很快，無需等待圖片加載。之后，上面的 jQuery 代碼會動態地更新圖片標簽，根據訪客瀏覽器支持 WebP 格式與否，生成 WebP 圖像或 JPG 圖像。

Chrome 下的結果：

<img src="http://res.cloudinary.com/demo/image/upload/c_fill,h_100,w_150/sample.webp"  
         width="150" height="100" data-crop="fill" data-src="sample.jpg">

其他瀏覽器下的結果：

<img src="https://simg.open-open.com/show/0344afcd7142e1ff72f34102268d0d43.jpg"  
         width="150" height="100" data-crop="fill" data-src="sample.jpg">

欲知有關 jQuery 插件的更多細節，可以 點此 查看文檔。

七.總結

現如今，網站與移動應用的富媒體內容越來越豐富，追蹤帶寬使用情況、優化下載和上傳時間，對于優化用戶體驗都是至關重要的。很明顯，與 JPEG 或 PNG 相比 包括在圖片大小和質量之間的平衡，以及這個新興的格式支持的功能等方面來講，WebP 有許多優點。

WebP 格式是幫助你優化用戶體驗的又一利器，雖然瀏覽器對 WebP 的支持仍有很多需要改進的地方，但是恰當是使用一些工具和技術，很容易體會到 WebP 的好處，也不會疏遠使用不支持這種格式的瀏覽器的用戶。

注：本文改編自外文文章“How to support WebP images, save bandwidth and improve user experience” ，by Nadav Soferman ,由 OneAPM 產品運營整理改編發布.

原文地址:http://cloudinary.com/blog/how_to_support_webp_images_save_bandwidth_and_improve_user_performance

Browser Insight 是一個基于真實用戶的Web 前端性能監控平臺，能夠幫大家定位網站性能瓶頸，網站加速效果可視化；支持瀏覽器、微信、App瀏覽 HTML 和 HTML5頁面。想閱讀更多技術文章，請訪問OneAPM 官方技術博客。

</div>

來自： http://news.oneapm.com/bi-webp-2/