關(guān)于網(wǎng)站優(yōu)化，除了減少請(qǐng)求數(shù)意外，縮減靜態(tài)資源體積也很重要，常見的比如壓縮js，css文件，還有就是壓縮圖片體積，使其更快的下載并節(jié)省流量，WebP技術(shù)的出現(xiàn)，給圖片壓縮帶來了更進(jìn)一步的優(yōu)化體驗(yàn)，同時(shí)具備了無損和有損的壓縮模式、Alpha 透明以及動(dòng)畫的特性，在 JPEG 和 PNG 上的轉(zhuǎn)化效果都相當(dāng)優(yōu)秀、穩(wěn)定和統(tǒng)一。

　　有個(gè)網(wǎng)站里面有對(duì)比，可以看看轉(zhuǎn)換前后的差別：點(diǎn)擊查看WebP

　　我公司是做電商的，產(chǎn)品圖片就特別的多，除了已經(jīng)用到的圖片懶加載等優(yōu)化外，還需要對(duì)圖片本身瘦身，webp流行起來后，今年也做了web支持,寫了個(gè)webp檢測(cè)功能，主要方法是：

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

　　像這樣，準(zhǔn)備兩套圖，然后檢測(cè)的時(shí)候有webp格式的則替換，沒有的話用原圖

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

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

　　完整代碼：Demo

轉(zhuǎn)載于:https://www.cnblogs.com/vvic/p/7087170.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。