如何經過 WebP 自適應方案減小圖片資源大小

前言

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

解決方案：使用 WebP 優化圖像

一、什麼是 WebP ?

WebP（發音 weppy)，是一種支持有損壓縮和無損壓縮的圖片文件格式，派生自圖像編碼格式 VP8。根據 Google 的測試，無損壓縮後的 WebP 比 PNG 文件少了 45％ 的文件大小，即便這些 PNG 文件通過其餘壓縮工具壓縮以後，WebP 仍是能夠減小 28％ 的文件大小。更多瞭解參照 WebP 官網文檔。

二、WebP 客戶端兼容性

Google Chrome 和 Opera 瀏覽器以及許多其餘工具和軟件庫都支持 WebP，可是當前並不是全部瀏覽器都支持 WebP，支持的狀況參見以下圖所示：

詳細的支持狀況參見 WebP 支持狀況。

WebP 自適應方案解決了什麼問題？

使用 WebP 圖片格式，顯而易見，能夠享受的好處就是：

一、WebP 格式的圖片能夠提供更好的壓縮比和更小的文件大小，能夠減小網絡傳輸，使得網絡傳輸的速度更快；

二、網絡傳輸的流量減小了，能夠節省 CDN 流量消耗，節省帶寬成本；

三、當前還有一部分客戶端並不支持 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 的自適應，須要考慮以下幾個方面：

一、CDN 如何判斷客戶端是否支持 WebP ?

該部分目前是經過 HTTP  Accept 頭來判斷的，若是支持，則返回 WebP 副本並進行緩存；若是不支持，則返回原圖。詳細介紹參照上文介紹。

二、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

詳細做圖場景請參見圖片處理服務。

三、如何實現相同 URL 訪問，緩存不一樣副本圖片？

這個須要利用到緩存裏面的 Vary 機制了，同一個 URL 根據不一樣 Header 頭的值緩存多份不一樣的拷貝，同時保持 URL 不變。例如：

• 請求頭字段 Accept: image/webp -> 響應頭須要知足 Vary: Accept 以及 Content-Type: image/webp;
•  請求頭字段 Accept-Encoding: gzip -> 響應頭須要知足 Vary: Accept-Encoding 以及 Content-Encoding: 

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

使用 WebP 自適應以後的效果如何？

下面咱們來作一次測試，訪問一張 PNG 圖片，看看開啓先後的效果怎樣。

一、開啓前

隨機在又拍雲官網產品文檔上找到了一張 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 邊緣節點已經緩存命中。

二、開啓後

開啓 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 訪問帶寬，咱們期待您的測試和使用。