路老闆個人品牌網站
0
  • 會員登入
  • 關於我們
    回主選單
    • 關於我們
  • 服務項目
  • 我的錄音小間
  • 課程活動
    回主選單
    • 線上課程
    • 預約服務
    • 活動報名
  • 商品總覽
  • 創作與紀錄
    回主選單
    • 部落格
    • 影像紀錄
    • Podcast
    • 我的作品
  • 最新消息
  • 聯絡我們
  • Join us
  • Login
  • 0
    路老闆個人品牌網站
  • 關於我們
    關於我們
  • 服務項目
  • 我的錄音小間
  • 課程活動
    線上課程 預約服務 活動報名
  • 商品總覽
  • 創作與紀錄
    部落格 影像紀錄 Podcast 我的作品
  • 最新消息
  • 聯絡我們
部落格
  • 文章總覽
  • 分類
  • 技術筆記
  • 日本旅遊
  • 網站搬家
  • 時事觀察
  • 投資理財
  • 公司經營
  • 主機架設
  • 接案
  • 遊戲心得
  • 產品開箱
  • 網頁相關
  • 金流串接
  • 遊戲經濟
  • 閒聊
  • 直銷
  • CodeIgniter
  • cpanel
  • 出書材料
  • 個人品牌
  • SEO
  • 讀書心得
  • 金流物流
  • 線上課程心得
  • 日劇
    • 大河劇
      • 真田丸
  • AI
91app ClubHouse php8 imunify360 cdn apache php nginx linode digitalocean
  1. 首頁
  2. 部落格
  3. [2021-12月] webp safari 瀏覽器支援狀況

現在瀏覽器支援 webp 的狀況已經可以全面使用 webp 了嗎?

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

2021 Dec 04 技術筆記 主機架設 接案 網頁相關

之前一直有在追蹤各家瀏覽器對於 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









 

  • 分享此文章
0則留言

相關文章

想盡辦法阻礙你搬走網站的主機商

到底什麼時候才要做好官網? 2020年版

高價位是否能過濾低級用戶?

wix/squarespace 到底有什麼問題? 缺點是什麼? 2022 年更新版

2013 日本東北七日遊 Day3 米沢市/山形市/米沢上杉博物館 Part1

seo-rank.tw 超方便 網站關鍵字排名查詢工具

關於路老闆

推薦連結

  • Alice 你的理財陪跑教練
  • 羅鈞鴻/小虎老師
  • 徐慧玲Lynn
  • 寶寶牙醫 沈醫師
  • 保險資訊懶人包
  • 你的好感度教練
  • 天下為暢

聯絡我們

  • Email: louis@boss-louis.tw
  • 營業時間: 09:00~18:00
  • 聯絡電話: 02-77252950
  • 地址: 106 台北市大安區忠孝東路四段270號17樓
  • 隱私權政策
COPYRIGHT ©路老闆個人品牌網站 All rights reserved | Powered by 路老闆