更小更快更強，新一代圖片格式 WebP 的應用實踐

前言
圖片自己比文字更容易給人留下直觀印象造成記憶，在信息量爆發的移動互聯網時代更是如此，圖片基本佔據了用戶們80%以上的注意力，因此人們對於圖片質量的要求也就愈來愈高了。JPG、JPEG、PNG、GIF這些圖片格式基本上已經達到了優化極限，是時候試試新的東西了。

關於WebP
WebP是谷歌在10年推出一種新型圖片格式，最先也是應用在谷歌產品中，谷歌前不久發佈的Android Studio 2.3正式版中就包括對WebP支持的更新。

與其餘圖片格式相比，在肉眼沒法分辨圖片質量差別的狀況下，WebP的空間佔用是最小的，目前國內外各大互聯網公司都已經開始應用這一圖片格式。

（美團首頁）

美團雲實踐：Webp 格式的識別與轉換

在實測中，webp 格式比 jpg 格式減少約 20%。這對優化用戶體驗，減小CDN帶寬消耗有很好的效果，但並非全部瀏覽器都支持 webp ，因此爲了使用 webp，須要作一點兼容性的工做。

首先是判斷，即識別單次訪問的來源瀏覽器是否支持 webp 格式，
其次是執行，若是該瀏覽器支持，則將原圖替換爲 webp 格式，並返回。若是不支持，則顯示原格式圖片。

在識別階段，咱們有兩種方法：

1. Server 處理
   1）經過 UAString 判斷瀏覽器支持狀況
   經過對瀏覽器進行分類，支持webp放在白名單裏，不支持的則爲黑名單。判斷爲白名單，則直接調用，返回webp格式圖片；反之，則顯示原圖。
   這種方式的優勢在於，只需按期維護白名單便可，邏輯簡單；缺點則在於不可擴展、不可測試、UA判斷會出現不許確的狀況。

caniuse.mojijs.com/Home/Html/i…

2)讀取 JavaScript 種下的 cookie 判斷瀏覽器支持狀況
Server處理中的另外一種方式是經過讀取 JavaScript 種下的 cookie來實現判斷。
這種方式的優勢是表現穩定，訪問速度更快，切換無壓力。
但缺點是，頁面靜態化會致使用戶切換瀏覽器時不能自主更新，圖片服務失效。
好比用戶用支持webp的瀏覽器A請求頁面，這時緩存的靜態頁面均使用webp圖片，但當該用戶使用不支持webp的瀏覽器B時，訪問網頁則會出現請求不到圖片的報錯。

2.Client 處理
Client 處理，是美團云爲美團主站提供的處理方式。在這種處理方式中，瀏覽器端發送的beacon webp 請求後，經過檢測其加載狀況來斷定 webp 支持狀況，而後瀏覽器寫一個cookie。以後經過讀取瀏覽器cookie判斷是否支持webp，就能夠進行下一步替換操做了。

替換圖片過程當中也是有兩種處理方式：

1.Server 處理
在 server 端處理的優勢是對下游開發者透明，缺點是靜態頁面的緩存數量會翻倍。

替換方式以下：

• 生成 URL 的函數（ 好比 $deal->getImageUrl ) ，經過運行函數中直接實現替換
• 對 varnish 靜態化的頁面，首先識別瀏覽器請求頭類型，而後將webp 和傳統 jpg 的各緩存一份兩份待處理。而後在生成 URL 的地方作替換。

2.Client 處理
在 client 端處理能夠比較好地應對頁面靜態化的狀況，主要針對懶加載（非首屏）的圖片進行處理，直接經過修改懶加載器來實現。
對非懶加載的圖片暫時沒有特別好的辦法。目前，可用替換路徑的方式來處理。

Client 處理實際上效果也是不錯的，美團頁面裏90%以上的圖片都是懶加載的，基本上均可以知足需求。對於大多數用戶來講，採用Client 處理實現webp轉換是個不錯的選擇。

美團雲對象存儲服務如今已經支持webp功能，感興趣的朋友能夠實測對比一下，看看差異。
mos.meituan.com/activity/we…