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

Posted on by

webp 格式的圖片顯示異常

webp介紹

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

webp轉換

  • 右鍵點擊圖片，點擊【在新標簽頁中打開圖片】。
  • 若是看到地址欄的後綴是webp，把webp改為jpg/png，回車。然後再點擊圖片，選擇【另存為】，圖片存儲為jpg/png。
  • 若看到地址欄的後綴不是webp，點擊圖片，選擇【另存為】，圖片存儲為wenp格式的。然後再次打開存在本地webp格式圖片，看到地址欄的後綴是webp，按照步驟二繼續操作。

在這裡插入圖片描述

踩坑：直接修改圖片的後綴名不可取，沒有改變原圖片的屬性，其實還是webp的格式。也可以通過轉換工具或者命令行進行轉換。

webp兼容性

目前網頁瀏覽器當中，Google Chrome和Opera原生支持靜態與動態的WebP格式。Firefox瀏覽器亦在65.0版本支持WebP圖像。
蘋果在macOS Sierra及iOS 10的早期beta版本中加入瞭WebP支持。而在2016年9月7日發佈的iOS 10 和 macOS Sierra GM種子版本中卻移除瞭WebP的支持。

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

兼容解決方案

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

參考原文鏈接：

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

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

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

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

// 定義請求商品詳情數據的方法
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
}

到此這篇關於webp 格式的圖片顯示異常的文章就介紹到這瞭,更多相關webp 格式圖片內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：