網站上線前圖片壓縮檢查清單

網站上線前，圖片壓縮是提升載入速度和使用者體驗的關鍵步驟。未經壓縮的圖片會導致頁面卡頓、跳出率升高，甚至影響搜尋引擎對網站的評價。本清單梳理了圖片壓縮的核心檢查項目，幫助你在上線前逐一核對，確保每一張圖片都「輕裝上陣」。

1. 確認圖片格式是否合理

不同的圖片格式適用於不同場景。通常，照片和複雜漸層圖使用JPEG，圖示、Logo和簡單圖形使用PNG-8或SVG，需要動畫或透明背景但檔案較小時考慮WebP。避免使用BMP或TIFF這類未壓縮格式。檢查清單：

• 照片類圖片是否已轉為JPEG或WebP？
• 圖示和裝飾性元素是否用了SVG（可縮放向量圖形）？
• PNG圖片是否檢查過色彩深度（8位元/24位元）？
• 是否考慮使用WebP格式（現代瀏覽器支援）？

2. 控制圖片原始尺寸

上傳的圖片尺寸應與實際顯示尺寸匹配，而不是依賴HTML或CSS縮小。例如，展示區寬度為800px，就無需上傳4000px寬的圖片。檢查清單：

• 每張圖片的最大寬度是否不超過佈局容器的寬度？
• 圖片高度是否自適應或固定，避免拉伸變形？
• 是否使用了響應式圖片（srcset屬性）為不同裝置提供合適尺寸？

3. 選擇合適的壓縮工具

壓縮工具分為有損和無損兩種。有損壓縮（如TinyPNG）可大幅減小檔案大小，但肉眼幾乎看不出差異；無損壓縮（如ImageOptim）不損失畫質，但壓縮率較低。建議先嘗試75%-85%品質的有損壓縮，若效果不明顯再切換。常用的工具有：

• 線上工具：TinyPNG、Compressor.io、Squoosh
• 本地軟體：ImageOptim、RIOT、Photoshop「儲存為Web所用格式」
• 建置工具：imagemin（搭配Webpack等）

4. 保持畫質與檔案大小的平衡

壓縮過度會出現鋸齒、色塊或模糊，影響品牌形象。建議在壓縮後透過預覽比對原圖和壓縮圖，重點檢查文字、邊緣和漸層區域。一般情況下，JPEG品質設定在70%-85%之間，WebP品質設定在80%左右，PNG-8保持256色以內。檢查清單：

• 關鍵圖片（如產品主圖）是否單獨檢查畫質？
• 壓縮後檔案大小是否控制在合理範圍（通常200KB以內，裝飾圖更小）？
• 是否存在明顯壓縮痕跡？

5. 批次處理與命名規範

如果網站圖片數量較多，不要手動一張張壓縮，應使用批次處理功能或自動化腳本。同時，圖片檔名應包含描述性關鍵詞（如「blue-tshirt-front.jpg」），而非「IMG_001.jpg」。這有助於搜尋引擎理解圖片內容。檢查清單：

• 是否使用批次壓縮（如TinyPNG同時上傳多張圖片）？
• 圖片檔名是否已統一規範（小寫字母、連字號分隔、含關鍵詞）？
• 是否已生成不同解析度的備選圖片（用於Retina螢幕）？

6. 驗證壓縮後的載入速度

壓縮完成後，建議在測試環境使用工具（如Google PageSpeed Insights、GTmetrix）檢查圖片載入情況。重點關注「避免未壓縮的圖片」和「使用適當格式的圖片」等建議。檢查清單：

• 圖片載入是否佔用了頁面總大小的比例過高？
• 是否有圖片未啟用懶載入（延遲載入）？
• 行動端圖片的尺寸是否已適配？