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

Image may be NSFW.
Clik here to view.前陣子 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://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/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://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600-rw/girl.jpg3. 新圖片網址轉換為 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： Image may be NSFW.
Clik here to view.使用 -rw 參數改成 WebP 後檔案為 43 kb： Image may be NSFW.
Clik here to view.2. JPG 壓縮 80% vs WebP以下使用同一張圖片，經 JPG 壓縮 80%，檔案大小 52 kb： Image may be NSFW.
Clik here to view.使用 -rw 參數改成 WebP 後檔案為 40 kb： Image may be NSFW.
Clik here to view.3. PNG vs WebP這張音樂演奏圖片的 PNG 透明圖，來自 ICON 免費素材搜尋引擎的「PngTree 圖庫」搜尋。 圖片尺寸 1000x1000，PNG 原始檔案為 727 kb： Image may be NSFW.
Clik here to view.使用 -rw 參數改成 WebP 後檔案為 611 kb： Image may be NSFW.
Clik here to view.4. PNG 轉 JPG 80% vs WebP以下使用同一張圖片，經 JPG 壓縮 80%，檔案大小 93 kb： Image may be NSFW.
Clik here to view.使用 -rw 參數改成 WebP 後檔案為 76 kb： Image may be NSFW.
Clik here to view.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格式。

五、總結

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