前言
圖片本身比文字更容易給人留下直觀印象形成記憶，在資訊量爆發的移動網際網路時代更是如此，圖片基本佔據了使用者們80%以上的注意力，所以人們對於圖片質量的要求也就越來越高了。JPG、JPEG、PNG、GIF這些圖片格式基本上已經達到了優化極限，是時候試試新的東西了。
關於WebP
WebP是谷歌在10年推出一種新型圖片格式，最早也是應用在谷歌產品中，谷歌前不久釋出的Android Studio 2.3正式版中就包括對WebP支援的更新。
與其他圖片格式相比，在肉眼無法分辨圖片質量差異的情況下，WebP的空間佔用是最小的，目前國內外各大網際網路公司都已經開始應用這一圖片格式。
美團雲實踐：Webp 格式的識別與轉換
在實測中，webp 格式比 jpg 格式減小約 20%。這對優化使用者體驗，減少CDN頻寬消耗有很好的效果，但並不是所有瀏覽器都支援 webp ，所以為了使用 webp，需要做一點相容性的工作。
首先是判斷，即識別單次訪問的來源瀏覽器是否支援 webp 格式，
其次是執行，如果該瀏覽器支援，則將原圖替換為 webp 格式，並返回。如果不支援，則顯示原格式圖片。
在識別階段，我們有兩種方法：
- 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…