如何通過 WebP 相容減少圖片資源大小

標籤：支援   映像   包括   res   部分   使用者   load   img   int   

學軍
又拍雲 CDN 服務公測 WebP 自適應功能，為客戶減少圖片資源大小。本文我們將一起來闡述WebP相容的來龍去脈。

前言
我們知道，理想的網頁應該在 1 秒內開啟，而在頁面的整體大小中，圖片往往是所佔比例最大的一部分（大約佔到 60% 以上，更多瞭解請點擊），也可以參照如所示。最佳化圖片不僅可以加快頁面顯示，還能降低移動網路的流量費用。原圖產生的 PNG、JPEG、GIF 和 SVG 圖片一般都有很大的壓縮餘地。下文將重點介紹一款圖片新格式：WebP，從而揭開它神秘的面紗。

解決方案：使用 WebP 最佳化映像
1、什麼是 WebP ?
WebP（發音 weppy)，是一種支援有損壓縮和無損壓縮的圖片檔案格式，派生自映像編碼格式 VP8。根據 Google 的測試，無損壓縮後的 WebP 比 PNG 檔案少了 45％ 的檔案大小，即使這些 PNG 檔案經過其他壓縮公用程式壓縮之後，WebP 還是可以減少 28％ 的檔案大小。更多瞭解參照 WebP 官網文檔。

2、WebP 用戶端相容性
Google Chrome 和 Opera 瀏覽器以及許多其他工具和軟體庫都支援 WebP，但是當前並非所有瀏覽器都支援 WebP，支援的情況參見如所示：

詳細的支援情況參見 WebP 支援情況。

WebP 自適應方案解決了什麼問題？使用 WebP 圖片格式，顯而易見，可以享受的好處就是：
1、WebP 格式的圖片可以提供更好的壓縮比和更小的檔案大小，可以減少網路傳輸，使得網路傳輸的速度更快；
2、網路傳輸的流量減少了，可以節省 CDN 流量消耗，節省頻寬成本；
3、當前還有一部分用戶端並不支援 WebP 格式，可以通過 CDN 層去判斷，對於支援的用戶端，響應 WebP 格式的圖片；不支援的用戶端，響應原圖。從而實現無縫適配。

如何判斷瀏覽器支援 WebP 格式？
如所示，是通過 Chrome 瀏覽器開發人員工具抓包顯示，可以通過查看回應標頭和要求標頭相關欄位，得知該圖片已經被 CDN 自動轉化為 WebP 格式：
事實上，可以通過 HTTP Accept 頭就可以判斷該瀏覽器是否支援 WebP 格式的圖片，結合，Chrome 瀏覽器在發起請求的時候，會帶上 Accept 頭，且其值包括：image/webp，此時就說明該瀏覽器支援 WebP 格式圖片；參見如下格式：accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8
另外，通過 HTTP 回應標頭裡面的 Content-Type 就可以判斷檔案的真正類型，例如：Content-Type:image/webp，就說明此次服務端響應的是 WebP 格式的副本圖片。

如何通過又拍雲 CDN 實現 WebP 自適應？
如所示，在 CDN 層做 WebP 的自適應，需要考慮如下幾個方面：

1、CDN 如何判斷用戶端是否支援 WebP ?
該部分目前是通過 HTTP Accept 頭來判斷的，如果支援，則返回 WebP 副本並進行緩衝；如果不支援，則返回原圖。詳細介紹參照上文介紹。
2、CDN 如何?即時圖片格式轉換？
針對使用者來源站點並非 WebP 格式圖片的時候，CDN 層需要支援將原圖圖片的即時轉換為 WebP 格式副本，這個在 CDN 層面是無縫支援的。這樣的情境是這樣的：
用戶端瀏覽器請求一個圖片資源，例如：http://webp.example.com/test.png;

CDN 通過 Accept 頭已經判斷用戶端瀏覽器支援 WebP 格式的圖片；

CDN 回使用者來源站點取回原圖並將原圖即時轉為 WebP 格式的圖片，並響應給用戶端瀏覽器。

這裡值得強調的是，又拍雲 CDN 已經無縫相容了各種作圖情境和訪問方式，包括：
原圖訪問 ，樣本：/a.jpg

縮圖版本號碼，樣本：/a.jpg!123

URL 作圖 ，樣本：/a.jpg!/format/webp

版本號碼 + URL 作圖：/a.jpg!123/format/webp

詳細作圖情境請參見圖片處理服務。

3、如何?相同 URL 訪問，緩衝不同副本圖片？
這個需要利用到緩衝裡面的 Vary 機制了，同一個 URL 根據不同 Header 頭的值緩衝多份不同的拷貝，同時保持 URL 不變。例如：
要求標頭欄位 Accept: image/webp -> 回應標頭需要滿足 Vary: Accept 以及 Content-Type: image/webp;

要求標頭欄位 Accept-Encoding: gzip -> 回應標頭需要滿足 Vary: Accept-Encoding 以及 Content-Encoding: gzip

以上，回答以上 3 個問題之後，CDN 就可以實現了 WebP 的自適應。開啟 WebP 特性之後，可以產生怎樣的效果？且看下文。

使用 WebP 自適應之後的效果如何？
下面我們來做一次測試，訪問一張 PNG 圖片，看看開啟前後的效果怎樣。
1、開啟前
隨機在又拍雲官網產品文檔上找到了一張 PNG 圖片，所示：

通過顯示，可以得到如下資訊：
– content-length:290334 – content-type:image/png – x-cache:MISS(S) from mix-hz-fdi-165; HIT(R) from ctn-zj-lna3-016
可以知道，該圖片大小為 290 KB，圖片類型為 PNG，在 CDN 邊緣節點已經快取命中。
2、開啟後
開啟 WebP 特性之後，這裡強調一下，CDN 邊緣命中之後，是不會觸發 WebP 自動轉換。為了觸發該特性，我針對剛才的訪問連結做一次手動重新整理。然後重新請求圖片資源，重新抓包，看如下資訊：

通過顯示，可以得到如下資訊：
– content-length:69038 – content-type:image/webp – x-cache:MISS from 403-zj-fud-208, MISS from mix-hz-fdi-168, MISS from ctn-zj-lna3-016
可以很明顯的看出，圖片大小減少了，為：69 KB，圖片格式轉換為 webp 格式。

總結下，此次測試了一個 PNG 圖片，通過 CDN 自適應 WebP 之後，圖片大小從 290 KB 減少到了 69 KB，效果是非常的明顯，不同的圖片格式，壓縮比會有所不同。如果您的網站圖片居多，且希望提升使用者訪問體驗，減少 CDN 訪問頻寬，我們期待您的測試和使用。

附：WebP 效果測試頁

如何通過 WebP 相容減少圖片資源大小