此文已由作者吳維偉授權網易雲社區發布。
歡迎訪問網易雲社區，了解更多網易技術產品運營經驗。
前端性能優化是一件很瑣碎的事情。它不像其它很多技術，在確切有限的步驟下就可以把功能做好。它就像是在打掃屋子，需要時常去檢查屋子是否有不整潔的地方，然后立即整理。所以在性能優化的過程中會遇到各方面的問題。本文的主題是聊聊怎么讓圖片更“整潔”。
什么是WebP
WebP是一種新的文件格式，相比於jpg、png、gif，在相同的圖片質量的情況下，它有着更小的圖片大小，可以大大縮小頁面加載時間。可以參考http://isux.tencent.com/introduction-of-webp.html
如何生成WebP格式的圖片
WebP官網上提供了轉換工具，可以把jpg、png圖片轉換成WebP。
如何使用
由於WebP並沒有被大多數瀏覽器原生支持，所以在使用時並不像jpg、png圖片一樣輕便。WebP的兼容方案一般分為3種：
1，服務器端判斷是否應該返回WebP格式的圖片
當服務器端接收到瀏覽器的圖片請求時，根據User-Agent判斷是否應該返回WebP格式的圖片。這種方法的優勢很明顯，前端幾乎不需要做任何修改就可以完美的完成此次優化任務。缺點也很明顯，你需要恭敬地給后端大大倒上一杯咖啡，然后真誠地說：“加個功能唄，這個真的很簡單！！！” 當然，這里有一個造好的輪子，你可以提供給后端大大。pagespeed，Google開發的一個支持Nginx和Apache的模塊，主要用來提高頁面加載速度。其中有一個功能convert_jpeg_to_webp，可以實現當支持WebP的瀏覽器請求圖片時，可以自動將jpg等轉換成WebP。pagespeed其它性能優化的功能也值得嘗試哦~
2，瀏覽器判斷是否應該使用WebP格式的圖片
首先，你需要知道普通格式圖片的URL和WebP格式圖片的URL。通過瀏覽器特性偵測，來判斷應該使用哪一類圖片。這種方式的缺點是只適用於javascript動態生成的圖片，無法統一處理CSS中引用的背景圖片。
3，替瀏覽器寫解析程序
我們要做的事情是，“你沒有實現解析WebP的功能，那我來吧”。對於不支持WebP的瀏覽器，我們通過JavaScript將其轉碼成瀏覽器支持的格式，以base64的形式賦值給DOM元素。這個輪子已經被造好了，只需要簡單的引入webpjs，就可以實現WebP的轉碼功能。這種方式能夠處理所有的圖片，包括Img標簽和背景圖片。不過由於是JavaScript實現轉碼，所以對頁面性能有所影響。
偵測瀏覽器是否支持WebP
方法1，嘗試加載一張WebP圖片，觀察是否能夠正常加載
(function () { var WebP = new Image();
WebP.onload = WebP.onerror = function () { if (WebP.height != 2) { // 不支持WebP
} else { // 支持WebP
}
};
WebP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
})();
方法2，嘗試從canvas中導出WebP格式的圖片，觀察是否能夠正常導出
function checkWebp() { try { return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
} catch (err) { return false;
}
}
網易雲免費體驗館，0成本體驗20+款雲產品！
更多網易技術、產品、運營經驗分享請點擊。
相關文章：
【推薦】 一些 ssh 小技巧
【推薦】 網易易盾驗證碼的安全策略