HTML Image Attribute Optimizer

▉ 運作原理

本套件會將屬性預設添加於 <img> 標籤的末尾，確保不干擾你習慣的屬性排序（如 src 或 alt）：

轉換範例

Before:

<img src="">

After:

<img src="" width="1920" height="1080" loading="lazy" decoding="async">

HTML Image Attribute Optimizer 能自動掃描 HTML 檔案中的 <img> 標籤， 1.根據圖片尺寸自動補全 width 與 height 2.並一鍵添加 loading="lazy" 與 decoding="async"

▉ 安裝與使用

需要先安裝以下有關套件

1. 安裝 Node.js

2. 本套件預設會自動安裝以下二個依賴套件：image-size 與 axios，假如出現問題再手動安裝即可：

npm install image-size axios

image-size: 快速讀取圖片二進制數據獲取解析度，支援 PNG, JPG, WebP 等，
axios : 用於抓取遠端圖片的數據流。

3. 在VSCode延伸模組 尋找 與 安裝 HTML Img Optimize 本套件
4. 在 VS Code 中開啟任何一個 .html 檔案。
5. 按下 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (macOS) 開啟命令面板。
6. 搜尋並選擇 Optimize HTML Images。
7. 或者編輯器內點擊 滑鼠右鍵，從選單中選擇 Optimize HTML Images 優化。

▉ 運作原理

本套件會將屬性預設添加於 <img> 標籤的末尾，確保不干擾你習慣的屬性排序（如 src 或 alt）：

▉ 核心功能

1. 自動尺寸偵測支援本地與遠端圖片，自動讀取二進制數據並填寫精確的寬高。
2. 效能優化組合拳自動補全 loading="lazy" (減少首屏負載) 與 decoding="async" (減少解碼阻塞)。
3. 非破壞性修改使用精準的正則表達式，完美保留原本的 HTML 結構、縮排與註解。
4. 批次處理只需一個指令，即可優化目前檔案中所有的圖片標籤。

▉ 支援格式

▉ 為什麼需要這個套件？

根據 Google Web Vitals 的建議，明確的圖片屬性對於效能很重要：

1. 設定寬高 (width/height)：為瀏覽器預留空間，減少 CLS (Cumulative Layout Shift, 版面跳動)。
2. 延遲載入 (loading="lazy")：減少首屏下載流量，大幅優化 LCP (Largest Contentful Paint)。
3. 非同步解碼 (decoding="async")：允許瀏覽器在背景處理圖片解碼，保持 UI 執行緒順暢不卡頓。

▉ 版本說明

v1.0.2 初始版本發布。 支援本地與遠端圖片尺寸讀取。 自動添加 width, height, loading, decoding 屬性。