Blogger 是 Google 旗下的免費部落格平台，官方目前提供有條件的無限容量圖片空間，使用者撰寫文章時可以直接上傳圖片，只要圖片像素低於指定大小，就不用擔心圖床容量問題。不過，上傳圖片後，平台預設的 HTML IMG 標籤有點冗長，其中包含不必要的屬性，除了不利於編輯內容，對於 SEO 也不會達到正面效果。
工具介紹：
筆者以往都是手動修改 <img> 標籤屬性，並且持續了許多年，最近才想到利用 AI 撰寫 Web 自動優化工具，貼上原始的 Blogger IMG 程式碼，即可轉換為簡潔並有利於 SEO 的語法，還能批量處理多個圖片。
這個「Blogger IMG 標籤優化工具」僅針對 Blogger 平台提供的圖片 HTML <img> 標籤有效，利用 JavaScript 檢查特定字元（如 div.separator）來區分每張圖片，將每張圖片語法轉換為指定格式，包括移除無用屬性，添加非同步解碼、延遲載入、圖片高度等。
要提醒一點，若是已經自行修改圖片標籤，這項工具將無法執行轉換處理。
使用說明：
Blogger 圖片優化的效益：
一、添加圖片延遲載入 (Lazy Loading)：讓可視範圍外的圖片較慢載入，改善最大內容繪製 (LCP)和首次輸入延遲 (FID)等指標。
二、防止累計版面配置位移 (CLS)：讀取原始圖片寬高與自訂顯示寬度，計算出顯示高度，並將新的寬、高數值寫入 <img> 標籤，讓瀏覽器預留圖片位置，避免版面位移。
三、載入高解析度圖片：將 Blogger 圖片連結中的尺寸參數（如 s600 或 w640-h480）替換為 s1600-rw，其中 'rw' 代表呈現 Webp 格式，上傳 PNG、JPG 或其他格式都將顯示優化格式。
四、採用現代化圖片屬性：自動添加 `decoding="async"` 屬性，告知瀏覽器可以非同步解碼圖片，避免因複雜圖片解碼而拖慢整體網頁載入。
五、提供語意化 HTML 結構選項：使用者可以選擇 <figure>、置中<div> 或 <img> 圖片標籤。其中 <figure> 標籤是 HTML5 的標準做法，能讓圖片和其說明在語意上更清晰。
結語：
總結來說，這個 Web 工具是專門為了優化 Blogger 圖片語法所打造，只需複製、貼上和執行轉換，即可獲得乾淨的 HTML 圖片程式碼，大幅提升網頁載入速度並有利於 SEO 搜尋引擎排名。
補充：上面提供的範例網址是筆者利用 pCloud 建立的展示網頁，不保證永久有效，建議自行下載 HTML 文件，即可在本機上轉換 Blogger <img> 語法。
內容更新：由於原先內容已失效，本文於 2025 年 9 月重新撰寫，改為分享自製工具。
0 留言