【網站經營】Google Blogger 文章圖片無痛轉換 WebP 格式

Google Blogger 網站 (部落格) 使用 WebP 圖片格式，除了能大幅提高頁面的載入速度，還可以提升「使用者體驗」及「網站 SEO」。但你知道在只要透過一個小動作，不用 Photoshop 或其他軟體幫忙，就能把現有文章的 JPG、PNG、GIF 圖片馬上轉換成 WebP？

將文章圖片更換為 WebP

目前要把圖片轉換為 WebP 格式，可以藉由 Photoshop 外掛程式，或是其他的 線上轉檔服務 來完成。不過長期累積了很多文章，整個網站圖片量肯定很驚人，所有 Google Blogger 的圖片都要再轉檔、上傳、置換，光想過程就覺得累啊。

這邊提供一個快速將文章圖片轉換至 WebP 的方法，所有圖片不需要重新轉檔、上傳，設定完的圖片就會自動轉換過去。首先呢，我們要把編輯模式切換為「HTML 檢視」。

▲ 先將編輯模式切換為「HTML 檢視」

從圖片的 HTML 標籤 <img> 的來源屬性 (src) 找到圖片尺寸，以下圖為例就是 w640-h426，接著我們在它的後面加上 -rw，Google Blogger 的圖片伺服器就會將圖片轉換為 webP 格式。

不過，大概在 2020/7 前的文章圖片會以 S640 來表示，也可能會以 S400 或其他數字出現，端看大家習慣使用圖片的大小。如果你習慣將圖片設定為「特大」就會是 640、「大」就會是 400，其他依此類推。

我們只要把圖片尺寸的後面加上 -rw 就會自動轉換成 WebP，後面顯示的 .jpg、.png 或 .gif 原始格式不用更改，請保持原本的設定就可以了！

▲ 找到 <img> 的 src 屬性，在圖片尺寸後面加上 -rw

更改完後，可以先看看 Google Blogger 裡的圖片是不是轉換為 WebP，如果沒有問題的話，就可以陸續更新其他文章的圖片了！

另外，大家也能利用 Google 提供的網頁效能工具 PageSpeed Insight，測試一下 WebP 是不是真的有助於於提速。特別對於圖多的網站 (部落格)，平均都能加快 2-4 秒不等的網頁載入速度，可以更有利於 提升使用者體驗 進而達到 SEO 優化的目的。

▲ 試試看網站 (部落格) 的圖片是否已轉換為 WebP

Google Blooger 的 WebP 疑雲

不過也提一件怪事，如果你下定決心要將圖片全面 WebP 化，目前把原生的 WebP 圖片上傳到 Google Blogger，圖片可是會變成 JPG 喔！(是不是瞬間黑人問號？)

Google Blogger 雖然支援 WebP 格式，但對於上傳原生的 WebP 圖片，還是要在 <img> 標籤裡的 src 屬性幫圖片尺寸加入 -rw，才能順利以 WebP 格式顯示圖片。

希望這個 bug 在不久後能修正過來，讓 Google Blogger 有更完整的 WebP 圖片應用。



延伸閱讀：

【網站經營】部落客別再癡癡等業配，趕緊用 Google AdSense 創造被動收入
【網站經營】利用 web.dev 測量工具幫網站健檢，找出 SEO 及使用者體驗問題
【行銷手札】免費圖庫網站推薦，社群、內容行銷秒強大
【行銷手札】短網址服務推薦，縮短網址、流量分析一次搞定
【網站 SEO】部落客都要懂，提高 Blogger 能見度的基礎設定
【網站 SEO】設定 Google Blogger 自訂網域，建立自己網站的專屬網址
【網站經營】Google Blogger 文章圖片無痛轉換 WebP 格式
【網站 SEO】使用 WebP 格式圖片，就可大幅提升使用者體驗

-------------------------------

更多內容，歡迎關注『布蘭特大叔』

部落格：https://bit.ly/UB-WebSite
FB 專頁：https://bit.ly/UB-FB
YouTube 頻道：https://bit.ly/UB-YouTube