2022年1月11日

Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式

Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式

Wayne Fu 0 A+
Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式前陣子 FB 的 Blogger 社團分享了一篇「Blogger 圖片無痛轉換 WebP」,原來 Blogger 圖片網址加上特定參數後,就能直接轉換成 WebP 格式,檔案得以大瘦身,圖片載入時間縮短不少。 這對圖片為主的 Blogger 部落格站長可說是一大幅音,例如美食、旅遊等主題,網頁載入時需要花費很多時間在圖片讀取上,現在改成了 WebP 格式,相信可以大大提升使用者體驗。 順帶提件事,由於幾個月前 Blogger 上傳圖片的網址格式改了,若要轉換 WebP 格式,新、舊型態的網址格式都需要知道如何處理。 本篇除了介紹 WebP、說明此格式如何轉換,也會對此官方功能進行實測,以瞭解圖片改善程度為何,並說明所有相關該注意的地方。 (圖片出處: pexels.com)

一、什麼是 WebP

WebP 是一種新的圖片壓縮演算法,詳細說明可參考維基頁面「WebP」。就像以前的 .png、.jpg 圖檔格式,副檔名 .WebP 也是新的圖檔格式。由於格式比較新,壓縮比更大,一開始不一定所有瀏覽器都支援,最早是 Google 在 2010~2012 年從自家瀏覽器 Chrome 開始推廣。 時至今日九成以上的瀏覽器都已經支援 WebP,那麼現在開始全面使用 WebP 圖檔也是一個很好的時機點,不怕使用者瀏覽器看不到我們網站的圖片。

二、新舊圖片網址格式差異

進入主題之前,最好先了解 Blogger 後台上傳的圖片,網址格式為何: 1. 舊網址格式參數 請參考「Blogger 上傳的圖片網址參數」,說明了一些基本的參數修改方法。 這裡只舉例最基本的、後台上傳後會產生的舊網址格式: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s1600/girl.jpg 紅字 s1600 代表原圖尺寸,之後修改會用到。 更多網址格式參數可參考這篇「Blogger 圖片 URL 參數2. 新網址格式參數 現在 Blogger 後台上傳圖片產生的網址格式,「撰寫模式」與「HTML模式」長得並不一樣,以下為範例: https://blogger.googleusercontent.com/img/a/AVvXsEiOVkeZUJSFIfRlvL4UuHGyi8f2NhNYuzBXzD_B_B-d-Qzd1WEsa0EqS9KTTS61R2l7A2QdU-ScHK4m6EJRWcPGDC1w1nRCWRPqvtYh-lFXlndICqDQ9NKTk9oEr2nKvN4knhELVJtaUOlRUqnGz2bCzq5uLafGBh6HzLFLCJEfUtAK7Y24aqH6FaGfsA=s16000
  • 上圖為「撰寫模式」下的格式,多了紅字參數 "=s16000",代表是原始尺寸
  • 如果是「HTML模式」,則沒有紅字參數,但一樣是原始尺寸
  • 如果要改變尺寸參數,方法就是在圖片網址最後加上 "=" 及參數即可

三、新舊圖片轉換為 WebP

有了前面的概念之後,現在可以說明如何轉換為 WebP 格式: 1. 加上 -rw 參數 原理非常簡單,就是在新、舊圖片網址格式中,圖片參數的地方,加上字串 "-rw" 即可。 然而這件事我找遍了網路,都沒有任何官方文件提及,不曉得是不是 Google 還在等 WebP 真正一統江湖之時,才會正式放入文件。 我只找到了一個疑似 WebP 開發團隊工程師留言的討論串「Why does Google Images Service convert my WEBP images into JPG when serving them?」,代表早在 2013 年 Google 就以經釋出 "-rw" 這個轉換參數了,留言的 Sebastian Kreft 還表示會回報使用者提出的 bug,這也是我猜測他是開發團隊相關人員的原因。 2. 舊圖片網址轉換為 WebP 參照前面的舉例,舊圖片網址轉換為 WebP 的範例如下: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s1600-rw/girl.jpg 3. 新圖片網址轉換為 WebP 參照前面的舉例,新圖片網址轉換為 WebP 的範例如下: https://blogger.googleusercontent.com/img/a/AVvXsEiOVkeZUJSFIfRlvL4UuHGyi8f2NhNYuzBXzD_B_B-d-Qzd1WEsa0EqS9KTTS61R2l7A2QdU-ScHK4m6EJRWcPGDC1w1nRCWRPqvtYh-lFXlndICqDQ9NKTk9oEr2nKvN4knhELVJtaUOlRUqnGz2bCzq5uLafGBh6HzLFLCJEfUtAK7Y24aqH6FaGfsA=s16000-rw

四、圖片轉換效果實測

為了加快網頁載入速度,我常常需要教育客戶壓縮圖片的重要性,以及建議用什麼軟體進行壓縮、使用的壓縮百分比等等。若是偷懶沒花時間壓縮 JPG 檔,肥大的圖檔載入時間是很可怕的。 而此次的 WebP 格式轉換,客戶提出一個很好的問題:「jpg 圖片是否不用壓縮,用 WebP 格式就好?」,因此以下就來進行各種測試: 1. JPG 未壓縮 vs WebP 這張戴墨鏡的少女,使用 CC0 免費圖庫搜尋引擎的「StockSnap 圖庫」搜尋。 圖片尺寸 960x628,未壓縮 JPG 原始檔案為 237 kb: Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式 使用 -rw 參數改成 WebP 後檔案為 43 kb: Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式 2. JPG 壓縮 80% vs WebP 以下使用同一張圖片,經 JPG 壓縮 80%,檔案大小 52 kb: Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式 使用 -rw 參數改成 WebP 後檔案為 40 kb: Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式 3. PNG vs WebP 這張音樂演奏圖片的 PNG 透明圖,來自 ICON 免費素材搜尋引擎的「PngTree 圖庫」搜尋。 圖片尺寸 1000x1000,PNG 原始檔案為 727 kb: Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式 使用 -rw 參數改成 WebP 後檔案為 611 kb: Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式 4. PNG 轉 JPG 80% vs WebP 以下使用同一張圖片,經 JPG 壓縮 80%,檔案大小 93 kb: Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式 使用 -rw 參數改成 WebP 後檔案為 76 kb: Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式 5. 測試結果 經由以上測試可以得出以下推論:
  • 上傳後的(JPG/PNG)圖片官方似乎會進行加工,檔案大小與原始略有差異,有可能變大也可能變小,請自行下載可看出差異。
  • Blogger 官方轉換後的 WebP 圖片效果不錯,跟原圖相比完全看不出差別
  • Blogger 官方 WebP 壓縮後的檔案已經比 JPG 壓縮 80% 還小
  • 所以上傳 JPG 之前的確可以不必另外再壓縮,可以交由 Blogger 幫我們轉換為 WebP,無形中等於我們省下不少處理圖檔的時間!
  • 若 PNG 是透明圖檔,使用 JPG 壓縮後會破壞透明圖
  • PNG 轉換成 WebP 後仍可維持透明圖
6. 補充說明
  • GIF 檔:根據這個 FB 社團討論串「BLOGGER 圖片無痛轉換 WEBP」,GIF 檔轉換為 WebP 格式使用的參數為 "-rwa"。
  • WebP 檔:Blogger 上傳 WebP 檔的話不會有作用,仍然會以 JPG 顯示。依照同樣規則,必須額外加上參數 "-rw" 才能顯示 WebP格式。
  • iOS:根據「FB 社團討論串」回報,iOS 需要更新到 14 以上才能支援 WebP 格式。(關於這一點可 寫 js 偵測瀏覽器版本, 例如 ios14 以下就將所有 img 網址的 "-rw" 字串去除, 即可做到相容性)

五、總結

  • 根據本篇的實測結果,Blogger 使用者將來可以節省圖檔壓縮的流程,直接上傳 JPG/PNG。圖片網址加上參數 "-rw" 後就能轉換為最佳壓縮比的 WebP 格式
  • 雖然知道了這樣的密技,新文章的圖片都可以這樣處理,但整個網站範本各處的圖片,所有小工具產生的縮圖(例如相關文章等等),以及所有舊文章的圖片,也要一個個手動處理。
  • 如果網站有幾百篇、數千篇文章時,就不太可能手動修改,需要請前端工程師處理。
  • 那麼順帶一提,如果覺得自己網站圖片量龐大,想要處理新舊文章及網站各處的圖片,提升網頁載入速度、進行圖片瘦身的工程,可以再與本站聯繫。
更多「網站效能」相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

2 則留言:

  1. 請問這個 webp,可以跟之前您的 "自適應 RWD 圖片語法產生器" 結合使用嗎?轉換成自適應之外還換成了 webp 圖片?

    回覆刪除
    回覆
    1. 謝謝建議 以後如果有更新圖片語法產生器的話 會列入此功能

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP