<< HTML Image Attribute Optimizer >> ▉ How It Works This extension appends attributes to the end of the img tag by default, ensuring it doesn't interfere with your preferred attribute order (such as src or alt): Before < img src="......" > after < img src="......" width="1920" height="1080" loading="lazy" decoding="async" > 
HTML Image Attribute Optimizer is a performance optimization tool specifically designed for frontend developers. It automatically scans img tags in HTML files, completes width and height based on the original image dimensions, and adds loading="lazy" and decoding="async" attributes with a single click. This significantly improves your website's LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) scores. ▉ Key Features 1.Automatic Size Detection: Supports both local and remote (HTTP/HTTPS) images; automatically reads binary data to fill in precise width and height. 2.Performance Optimization Bundle: Automatically appends loading="lazy" (to reduce initial page load) and decoding="async" (to prevent decoding blocks). 3.Non-Destructive Modification: Uses precise Regular Expressions to update only img attributes, perfectly preserving your original HTML structure, indentation, and comments. 4.Batch Processing: Optimize all image tags within the current file with just one command. ▉ Installation & Usage How to Use 1.Open any .html file in VS Code. 2.Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) to open the Command Palette. 3.Search for and select Optimize HTML Images. 4.Alternatively, right-click anywhere in the editor and select Optimize HTML Images from the context menu. ▉ Supported Formats CategoryDescription File Types .html, .php, .vue, .jsx, .tsx (Depending on settings) Image Formats PNG, JPG, JPEG, WebP, GIF, SVG, BMP Path Support Relative paths (./img.jpg), Absolute paths (/assets/img.jpg), Network URLs (https://...) ▉ Why Do You Need This Extension? According to Google Web Vitals recommendations: 1.Set Dimensions: Providing width and height allows the browser to reserve space for the image, preventing "layout shifts" (reducing CLS) as images load. 2.Lazy Loading: Avoids downloading images that the user hasn't scrolled to yet, significantly reducing initial page weight (optimizing LCP). 3.Async Decoding: Allows the browser to decode images in the background, keeping the UI thread smooth and responsive. ▉ Version History 1.0.0 Initial release. Support for reading dimensions of both local and remote images. Automatic addition of width, height, loading, and decoding attributes. ▉ Contribution & Feedback If you encounter any issues or have suggestions for new features, please feel free to submit feedback via GitHub Issues. ============================================================================ << 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 標籤，並根據圖片原始尺寸自動補全 width 與 height，同時一鍵添加 loading="lazy" 與 decoding="async" 屬性，顯著提升網站的 LCP (Largest Contentful Paint) 與 CLS (Cumulative Layout Shift) 分數。 ▉ 核心功能 1.自動尺寸偵測：支援本地（Local）與遠端（HTTP/HTTPS）圖片，自動讀取二進制數據並填寫精確的寬高。 2.效能優化組合拳：自動補全 loading="lazy"（減少首屏負載）與 decoding="async"（減少解碼阻塞）。 3.非破壞性修改：使用精準的正則表達式定位，僅針對 img 屬性進行更新，完美保留原本的 HTML 結構、縮排與註解。 4.批次處理：只需一個指令，即可優化目前檔案中所有的圖片標籤。 ▉ 安裝與使用 使用方法 1.在 VS Code 中開啟任何一個 .html 檔案。 2.按下 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (macOS) 開啟命令面板。 3.輸入並選擇 Optimize HTML Images。 4.或者直接在編輯器區域點擊 滑鼠右鍵，從選單中選擇 Optimize HTML Images。 ▉ 支援格式 分類支援說明 檔案類型.html, .php, .vue, .jsx, .tsx (視設定而定) 圖片格式PNG, JPG, JPEG, WebP, GIF, SVG, BMP 路徑支援相對路徑 (./img.jpg), 絕對路徑 (/assets/img.jpg), 網路路徑 (https://...) ▉ 為什麼需要這個套件？ 根據 Google Web Vitals 的建議： 1.設定寬高：可以為瀏覽器預留圖片空間，防止頁面在載入圖片時發生「跳動」（即減少 CLS）。 2.延遲載入 (Lazy Loading)：避免下載使用者尚未捲動到的圖片，大幅減少首屏流量（即優化 LCP）。 3.非同步解碼 (Async Decoding)：允許瀏覽器在背景解碼圖片，保持 UI 執行緒順暢。 ▉ 版本說明 1.0.0 初始版本發布。 支援本地與遠端圖片尺寸讀取。 自動添加width、height、loading 與 decoding 屬性。 ▉ 貢獻與反饋 如果你在使用中遇到任何問題，或者有新的功能建議，歡迎前往 GitHub Issues 提交反饋。 |