[2021-12月] webp safari 瀏覽器支援狀況

之前一直有在追蹤各家瀏覽器對於 webp 圖片格式的支援進度
webp 是新一代的圖片格式
號稱速度更快 檔案更小(節省儲存空間跟縮短傳輸時間)

但神奇的是
有些瀏覽器一直不支援
像是 safari

雖然 safari 的市佔率沒有很高
但也有個 3% 5%
加上 IE11 這個也有一點點人在用的瀏覽器也不支援
(雖然做網站的都不想管 IE)

今天突然想到
想說再來調查一下目前支援的狀況好了



看起來只有 IE11 跟 Safari 沒支援

實際用 iphone 跟 mac 測試一下
測試網址
WebP Gallery  |  Google Developers

iphone 的 safari 打開是這樣
看起來很正常




這是 舊版 macOS (Catalina) 的 safari
到現在仍然沒有支援

因為我有一台 iMac 已經用了8年 (2013年版本的 iMac 27")
雖然明明就用起來還很順
但 Apple 已經不打算幫他更新 OS 了
所以應該沒機會看到 webp 了


這是用新版 (m1) 的 mac air 測試的畫面
macOS 是 big sur 版本
safari 是可以正常顯示 webp 的

那有的裝置/瀏覽器還是沒支援 webp
我能把我網站的圖全部都改成 webp 嗎

如果你是直接把圖片跟圖片連結都改成 webp
就會有上面的狀況
有些瀏覽器無法顯示

如果要兩者相容
你可以使用新的 html <picture> 的寫法



測試連結
https://lupopi.com/test/webp

基本上
source 的部分有加一個 type 的屬性
瀏覽器知道這個 type 他沒支援
就會去讀取 <img> 的圖片
所以這樣就可以相容不支援 webp 的瀏覽器

不過缺點就是
除了要改語法以外

jpeg 跟 webp 都要各存一份
本來想要節省空間
結果反而要在另外存一份圖片

好處就是有支援 webp 的瀏覽器
傳輸跟顯示速度會快很多啦~

WordPress 之類的網站應該有外掛可以做
客製化的就要找廠商做囉

如果有這方面的問題也可以找路老闆討論喔 :D