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： 使用 -rw 參數改成 WebP 後檔案為 43 kb： 2. JPG 壓縮 80% vs WebP 以下使用同一張圖片，經 JPG 壓縮 80%，檔案大小 52 kb： 使用 -rw 參數改成 WebP 後檔案為 40 kb： 3. PNG vs WebP 這張音樂演奏圖片的 PNG 透明圖，來自 ICON 免費素材搜尋引擎的「PngTree 圖庫」搜尋。 圖片尺寸 1000x1000，PNG 原始檔案為 727 kb： 使用 -rw 參數改成 WebP 後檔案為 611 kb： 4. PNG 轉 JPG 80% vs WebP 以下使用同一張圖片，經 JPG 壓縮 80%，檔案大小 93 kb： 使用 -rw 參數改成 WebP 後檔案為 76 kb： 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 格式。
• 雖然知道了這樣的密技，新文章的圖片都可以這樣處理，但整個網站範本各處的圖片，所有小工具產生的縮圖(例如相關文章等等)，以及所有舊文章的圖片，也要一個個手動處理。
• 如果網站有幾百篇、數千篇文章時，就不太可能手動修改，需要請前端工程師處理。
• 那麼順帶一提，如果覺得自己網站圖片量龐大，想要處理新舊文章及網站各處的圖片，提升網頁載入速度、進行圖片瘦身的工程，可以再與本站聯繫。

更多「網站效能」相關文章：