[html] webp與jpg、png比較，它有什么優劣勢？如何選擇？

優勢更優的圖像數據壓縮算法 帶來更小的圖片體積肉眼識別無差異的圖片質量支持有損和無損壓縮支持動畫 透明色彩豐富 24-bit顏色數劣勢存在兼容性問題選擇? 當 圖片較少 體積不大 且存在兼容性問題時,兼容性方法處理起來較為復雜 可以選擇傳統格式? 當圖片較多 且不存在兼容性問題或者兼容性方法處理起來較為簡單時 便使用webp格式 兼容性處理 1.通過picture標簽進行選擇判斷<picture><source srcset="img/pic.webp" type="image/webp"><source srcset="img/pic.jpg" type="image/jpeg"><img src="img/pic.jpg"> </picture>該種方法要求在每個要請求webp圖片的標簽下都要通過picture標簽來進行兼容性處理， 同時注意該標簽在IE的兼容性并不是很好，不過已經比webp的兼容性好一些。 2.通過服務端判斷請求頭中的Accept的值判斷是否支持webp通過HTTP request header中是否存在Accept: image/webp來判斷， 這種方法的缺點在于：很多時候我們的圖片等靜態資源都會放到CDN服務器上，在這個層面加上判斷webp的邏輯會更麻煩一些 3.由瀏覽器端判斷是否支持WebP格式if(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0){// 該瀏覽器支持WebP格式的圖片}該種方法的原理為：HTMLCanvasElement.toDataURL() 方法返回一個包含圖片展示的 data URI 。可以使用 type 參數其類型，默認為 PNG 格式。1.如果畫布的高度或寬度是0，那么會返回字符串“data:,”。2.如果傳入的類型非“image/png”，但是返回的值以“data:image/png”開頭，說明該傳入的類型是不支持的。3.Chrome支持“image/webp”類型。

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[html] webp与jpg、png比较，它有什么优劣势？如何选择？的全部內容，希望文章能夠幫你解決所遇到的問題。

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