一、選擇合適的圖像格式，平衡畫質與體積

 不同圖像格式的壓縮邏輯和適用場景不同，需根據圖像內容（如照片、圖標、圖形等）選擇最優格式，減少冗余體積：

 照片 / 復雜色彩圖像：優先使用 WebP 或 AVIF 格式。

 WebP 比 JPEG 體積小 25%-35%，支持透明和動圖，兼容性覆蓋主流瀏覽器（需為老舊瀏覽器準備 JPEG/PNG 降級方案）。

 AVIF 是更先進的格式，壓縮效率比 WebP 再提升 20%-30%，但目前部分瀏覽器支持有限，可作為未來迭代方向。

 避免使用未壓縮的 BMP 或過大的 TIFF 格式。

 圖標 / LOGO / 簡單圖形：使用 SVG 格式。

 SVG 是矢量圖形，放大后不失真，體積遠小于 PNG/JPEG，且可通過代碼直接修改顏色、尺寸，適合響應式設計。

 若需兼容極低版本瀏覽器，可搭配 PNG 格式作為備選。

 透明背景圖像：用 WebP（支持透明）或 PNG-8/PNG-24（根據色彩復雜度選擇，PNG-8 體積更小）。

二、壓縮圖像體積，避免 “大材小用”

 即使選擇了合適的格式，未經壓縮的圖像仍可能占用過多帶寬，需通過工具壓縮并匹配顯示尺寸：

 按顯示尺寸縮放圖像：

 避免在頁面中用 HTML/CSS 強制縮小大尺寸圖像（例如將 2000px 寬的原圖縮小為 200px 顯示），這會導致瀏覽器加載冗余像素，浪費資源。

 提前用工具（如 Photoshop、Figma）將圖像裁剪為頁面實際需要的尺寸（如移動端、PC 端分別適配不同尺寸）。

 無損 / 有損壓縮結合：

 無損壓縮：不損失畫質，通過去除元數據（如拍攝日期、相機參數）、優化編碼實現體積減小（工具：TinyPNG、Squoosh、ImageOptim）。

 有損壓縮：適當降低畫質（肉眼幾乎不可辨）換取更大壓縮比，適合照片類圖像（工具：Squoosh 可手動調整壓縮率，平衡畫質與體積）。

 建議壓縮后單張圖片體積：PC 端主圖不超過 300KB，移動端配圖不超過 100KB，圖標控制在 10KB 以內。

三：優化圖像加載方式，提升感知速度

 即使圖像體積合理，加載時機不當也會影響用戶體驗，需通過技術手段減少 “等待感”：

 延遲加載（Lazy Loading）：

 對非首屏圖像（如頁面底部的產品圖、案例圖）啟用延遲加載，即用戶滾動到該區域時再加載，減少初始加載壓力。

 實現方式：通過 HTML 屬性 loading="lazy"（瀏覽器原生支持），或 Javascript 監聽滾動事件控制加載。