Blogger 啟用 WebP 終極指南：2 種完整實作方法與效能優化教學
您的 Blogger 網站是不是因為圖片太多，導致載入速度總是不如人意？在 2025 年的今天，網站速度不僅影響使用者體驗，更是 Google 搜尋排名的關鍵因素之一 (Core Web Vitals)。而解決這個問題的最佳利器，就是 Google 自家推出的現代化圖片格式——WebP。
WebP 格式能在不犧牲肉眼可見畫質的前提下，將圖片檔案大小縮減 30% 以上，效果驚人。
然而，許多 Blogger 使用者發現，平台對於 WebP 的支援並非開箱即用，常常需要手動調整才能完美運作。這篇文章將作為您的完整操作手冊，提供兩種實證有效的方法，帶您一步步為部落格全面啟用 WebP，享受網站飛速載入的快感。
前置作業：確認 Blogger 後台 WebP 設定已開啟
在我們開始進行任何程式碼修改之前，最重要的一步是確保您已經開啟了 Blogger 內建的 WebP 圖片服務。這個設定是後續所有優化的基礎，少了這一步，再多的修改也徒勞無功。
- 前往您的 Blogger 後台。
- 點選左側選單的「設定」。
- 在設定頁面中往下捲動，找到標題為「全域」的區塊。
- 找到「使用 WebP 圖片」的選項，並確認它的開關是啟用（呈現藍色）狀態。
請注意： 開啟這個選項是必要的第一步，它授權 Blogger 的伺服器為您上傳的圖片準備好 WebP 版本。但由於不同佈景主題的程式碼限制，光靠這個開關並無法保證圖片會成功以 WebP 格式呈現，因此我們仍需要透過以下的方法，來「強制」讓讀者的瀏覽器正確載入這些 WebP 檔案。
方法一：全自動 JavaScript 替換法 (適合所有使用者)
這個方法的原理是利用一小段 JavaScript 程式碼，在讀者瀏覽您的網頁時，自動判斷他們的瀏覽器是否支援 WebP。如果支援，程式碼會聰明地將文章中圖片的網址從 .jpg 或 .png 改為指向由 Blogger 自動生成的 .webp 版本。
優點： 設定一次，一勞永逸，對所有新舊文章都有效。
缺點： 依賴使用者端的 JavaScript 執行。
步驟一：準備 JavaScript 程式碼
請複製以下完整的程式碼：
// <![CDATA[
function convertImagesToWebP() {
// 檢查瀏覽器是否支援 WebP
var isWebPSupported = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
if (isWebPSupported) {
var images = document.querySelectorAll('img');
images.forEach(function(img) {
var imgSrc = img.getAttribute('src');
// 只處理 Blogger 上傳的圖片 (避免處理外部圖床)
if (imgSrc && imgSrc.includes('.bp.blogspot.com/')) {
// 將圖片網址參數改為輸出 webp (-rw)
var newSrc = imgSrc.replace(/-[wh]\d+(-[ch])?\/[a-zA-Z0-9_-]+\.(jpe?g|png|gif)$/, '-rw/image.webp');
img.setAttribute('src', newSrc);
}
});
}
}
// 確保在頁面載入完成後執行
document.addEventListener('DOMContentLoaded', convertImagesToWebP);
// ]]>步驟二：將程式碼安裝到佈景主題
- 登入您的 Blogger 後台。
- 前往左側選單的「佈景主題」。
- 點擊「自訂」按鈕旁邊的下拉箭頭，選擇「編輯 HTML」。
- 在程式碼編輯器中，使用 Ctrl + F 或 Cmd + F 搜尋 </body> 這個標籤。
- 將剛剛複製的完整程式碼，貼在 </body> 標籤的正上方。
- 點擊右上角的「儲存」圖示。
完成！現在起，您的部落格就會自動為支援的瀏覽器提供 WebP 圖片。
方法二：手動上傳與修改 HTML (適合進階使用者)
這個方法讓您擁有完全的控制權，透過 HTML5 的 <picture> 標籤，您可以同時提供 WebP 版本和傳統的 JPG/PNG 版本，讓瀏覽器自行選擇最適合的格式載入。
優點： 不依賴 JavaScript，語意化更佳，控制力最強。
缺點： 每張圖片都需要手動處理，非常費工。
步驟一：準備圖片檔案
在發布文章前，您需要先將您的圖片使用線上工具 (如 aconvert.com) 或本機軟體，分別轉換成 .jpg (或 .png) 和 .webp 兩種格式。
步驟二：上傳圖片並取得網址
將這兩種格式的圖片上傳到您的 Blogger（可以開一篇草稿專門用來上傳），並分別取得它們的圖片網址。
步驟三：在文章中使用 <picture> 標籤
在您要插入圖片的地方，切換到「HTML 檢視」，並貼上以下程式碼結構，換成您自己的圖片網址與替代文字：
<picture>
<source srcset="請填入您的圖片網址.webp" type="image/webp">
<source srcset="請填入您的圖片網址.jpg" type="image/jpeg">
<img src="請填入您的圖片網址.jpg" alt="請填寫詳細的圖片替代文字，有助於SEO" style="width:100%; height:auto;">
</picture>這段程式碼會告訴瀏覽器：「優先嘗試載入 WebP 圖片，如果不行，再載入 JPG 圖片。」
總結比較與常見問題
| 特性 | 方法一 (JavaScript) | 方法二 (<picture> 標籤) |
|---|---|---|
| 設定難度 | 簡單，一次性設定 | 複雜，每張圖都要處理 |
| 對舊文章 | 自動生效 | 無法自動套用 |
| 控制程度 | 低，全自動 | 高，可指定每張圖 |
| 網站效能 | 極佳 | 最佳 |
Q1: 我應該選擇哪種方法？
A: 對於 95% 的使用者來說，方法一都是最佳選擇，因為它最省時省力。如果您是追求極致效能的完美主義者，且不介意繁瑣的操作，可以為最重要的文章採用方法二。
Q2: 這會影響我的 SEO 嗎？
A: 會，而且是正面的影響。提升網站載入速度是 Google 官方推薦的 SEO 優化項目之一。
Q3: 如果有讀者的瀏覽器不支援 WebP 怎麼辦？
A: 請放心，以上兩種方法都內建了「向下相容」機制。方法一的程式碼會直接跳過，顯示原始圖片；方法二的 <picture> 標籤會自動載入您提供的 JPG/PNG 備用圖片。您的圖片對所有使用者都會正常顯示。
結論：為您的部落格按下加速鍵
為您的 Blogger 網站啟用 WebP，是現今最重要、也是投資報酬率最高的效能優化項目之一。無論您選擇方便的全自動方法，還是精準的手動控制法，只要確保完成了「前置作業」，都能為您的讀者帶來更流暢的閱讀體驗，並在 SEO 戰爭中取得領先優勢。現在就動手試試看吧！