[html] 你有使用過webp的圖片格式嗎？

webp格式的優勢和兼容處理 優勢更優的圖像數據壓縮算法 帶來更小的圖片體積肉眼識別無差異的圖片質量支持有損和無損壓縮支持動畫 透明色彩豐富 24-bit顏色數兼容性處理 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的图片格式吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

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