WebP圖片優化

　　關於網站優化，除了減小請求數意外，縮減靜態資源體積也很重要，常見的好比壓縮js，css文件，還有就是壓縮圖片體積，使其更快的下載並節省流量，WebP技術的出現，給圖片壓縮帶來了更進一步的優化體驗，同時具有了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉化效果都至關優秀、穩定和統一。

　　有個網站裏面有對比，能夠看看轉換先後的差異：點擊查看WebP

　　我公司是作電商的，產品圖片就特別的多，除了已經用到的圖片懶加載等優化外，還須要對圖片自己瘦身，webp流行起來後，今年也作了web支持,寫了個webp檢測功能，主要方法是：

　　一張圖準備兩套，一個是原圖，一個是轉換後的同名webp圖片，dom元素加載完後遍歷img把原圖替換成webp格式的名字，而後加載寫入，核心方法：

　　像這樣，準備兩套圖，而後檢測的時候有webp格式的則替換，沒有的話用原圖

.replace(/(\.jpg|\.png|\.JPG|\.PNG)$/,'$1'+'webp'))

　　替換成功後，就獲得了新的webp格式的圖片，接着寫入就行啦。

　　完整代碼：Demo