一、為什麼需要行動端圖片檢查清單
行動端使用者對頁面載入速度和視覺體驗要求更高。一張未優化的圖片可能導致頁面變慢、佈局錯亂，甚至影響使用者留存。因此，製作一份行動端圖片檢查清單，能夠幫助網站製作和維護人員在日常工作中系統地檢查圖片問題，減少遺漏。
二、檢查清單的核心維度
1. 圖片尺寸與解析度
- 檢查圖片最大寬度是否適配行動螢幕（通常不超過750px）。
- 避免使用過大的原始圖片直接顯示在行動端，應使用響應式圖片或按需裁剪。
- 確認圖片在Retina螢幕上不模糊（可考慮2x或3x圖，但需注意檔案大小）。
2. 圖片格式選擇
- 優先使用WebP格式（相容性較好，檔案小），同時提供JPEG/PNG作為回退。
- 圖示和簡單圖形建議使用SVG，避免失真。
- 照片類圖片使用JPEG，透明背景用PNG或WebP。
3. 壓縮與檔案大小
- 每張圖片檔案大小建議控制在200KB以內，首屏關鍵圖片更小。
- 使用工具（如TinyPNG、ImageOptim）進行無損壓縮。
- 檢查是否有未壓縮的原始大圖被直接引用。
4. 載入速度與懶載入
- 確認所有非首屏圖片使用了懶載入（loading="lazy"）。
- 檢查圖片是否阻塞頁面渲染，可透過Lighthouse測試。
- 考慮使用CDN加速圖片分發。
5. 適配與佈局
- 圖片是否採用彈性佈局（如max-width: 100%），避免溢出或出現滾動條。
- 在常見手機尺寸（iPhone、安卓主流機型）上測試顯示效果。
- 檢查圖片在橫豎屏切換時的表現。
6. 可訪問性與SEO
- 每張圖片是否添加了描述性alt屬性，幫助搜尋引擎和讀屏軟體理解。
- 圖片檔名是否使用英文描述，避免中文亂碼或無意義字元。
- 檢查圖片是否被搜尋引擎索引（可查看Robots.txt或meta標籤）。
三、清單製作方法
將上述維度整理成表格或列表形式，每條檢查項留出「通過/不通過/備註」列。建議使用線上文件或專案管理工具，方便團隊協作和更新。每次網站改版或新增圖片時，按清單逐項核對。
四、注意事項
檢查清單不是一次性工作，應隨著行動裝置和瀏覽器更新而調整。例如，新格式AVIF出現後，可評估是否加入清單。同時，不要為了追求檔案大小過度壓縮導致畫質損失，需在品質和速度之間找到平衡。
五、總結
製作行動端圖片檢查清單，核心是圍繞尺寸、格式、壓縮、載入、適配、可訪問性六大方面。透過系統化檢查，能有效減少行動端圖片問題，提升網站整體體驗。建議定期回顧清單內容，結合使用者反饋和效能數據持續優化。
