路老闆個人品牌網站
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則留言

相關文章

不要隨意給客人報價之接案恐怖情人

虛擬主機備份的重要性

WordPress 大量吃 CPU 的問題 (xmlrpc.php)

一直以來管理的主機都有一個問題 就是 WordPress 會莫名其妙的大量吃 CPU 如果是單一 user 那表示他外掛掛太多

Laraval 沒寫好也是會被 hack

我一直以為 Laraval 在安全性這塊很好 沒想到還是會被 Hack

部落格休假預告

2010 東京五日遊 Day3 上野恩賜公園 阿美橫町

關於路老闆

推薦連結

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

聯絡我們

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