webp 格式圖片顯示異常分析及解決方案

更新時(shí)間：2023年04月20日 16:32:19 作者：我愛語文

WebP，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。提供了有損壓縮與無損壓縮（可逆壓縮）的圖片文件格式，能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間，這篇文章主要介紹了webp 格式圖片顯示異常分析及解決方案,需要的朋友可以參考下

webp 格式的圖片顯示異常

webp介紹

WebP，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。提供了有損壓縮與無損壓縮（可逆壓縮）的圖片文件格式，能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。

webp轉(zhuǎn)換

右鍵點(diǎn)擊圖片，點(diǎn)擊【在新標(biāo)簽頁中打開圖片】。
若是看到地址欄的后綴是webp，把webp改為jpg/png，回車。然后再點(diǎn)擊圖片，選擇【另存為】，圖片存儲(chǔ)為jpg/png。
若看到地址欄的后綴不是webp，點(diǎn)擊圖片，選擇【另存為】，圖片存儲(chǔ)為wenp格式的。然后再次打開存在本地webp格式圖片，看到地址欄的后綴是webp，按照步驟二繼續(xù)操作。

在這里插入圖片描述

踩坑：直接修改圖片的后綴名不可取，沒有改變?cè)瓐D片的屬性，其實(shí)還是webp的格式。也可以通過轉(zhuǎn)換工具或者命令行進(jìn)行轉(zhuǎn)換。

webp兼容性

目前網(wǎng)頁瀏覽器當(dāng)中，Google Chrome和Opera原生支持靜態(tài)與動(dòng)態(tài)的WebP格式。Firefox瀏覽器亦在65.0版本支持WebP圖像。
蘋果在macOS Sierra及iOS 10的早期beta版本中加入了WebP支持。而在2016年9月7日發(fā)布的iOS 10 和 macOS Sierra GM種子版本中卻移除了WebP的支持。

總結(jié)，webp 在 ios5/6 的 chrome、safari 瀏覽器不支持，在 Android 常用的瀏覽器都支持。

兼容解決方案

前端js的方案還未實(shí)踐，想實(shí)踐的可參考原文[3]。
簡單方案，把webp格式轉(zhuǎn)為png，在項(xiàng)目中使用，保正圖片在各設(shè)備正常顯示。

參考原文鏈接：

[1] https://developers.google.com/speed/webp
[2] https://zh.wikipedia.org/wiki/WebP
[3] https://segmentfault.com/a/1190000004948757

附錄：解決 .webp 格式圖片在 ios 設(shè)備上無法正常顯示的問題

解決.webp 格式圖片在 ios 設(shè)備上無法正常顯示的問題

使用字符串的 replace() 方法，將 webp 的后綴名替換為 jpg 的后綴名

// 定義請(qǐng)求商品詳情數(shù)據(jù)的方法
async getGoodsDetail(goods_id) {
  const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
  if (res.meta.status !== 200) return uni.$showMsg()

  // 使用字符串的 replace() 方法，將 webp 的后綴名替換為 jpg 的后綴名
  res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
  this.goods_info = res.message
}

到此這篇關(guān)于webp 格式的圖片顯示異常的文章就介紹到這了,更多相關(guān)webp 格式圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: