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

　　有個網站里面有對比，可以看看轉換前后的差別：點擊查看WebP

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

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

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

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

　　替換成功后，就得到了新的webp格式的圖片，接著寫入就行啦。

　　完整代碼：Demo

轉載于:https://www.cnblogs.com/vvic/p/7087170.html

總結

以上是生活随笔為你收集整理的WebP图片优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。