提高網站用戶體驗—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 圖像）

圖 1.sample.jpg 27.9KB JPG

圖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) %>

<pre>
<?php echo cl_image_tag("sample", array("format" => "webp", "width" => 300,

"crop" => "scale")); ?>

</pre>

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="http://res.cloudinary.com/demo/image/upload/c_fill,h_100,w_150/sample.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 官方技術博客。

本文轉自 OneAPM 官方博客