專題 C5：影像處理
Web 影像最佳化完整流程
影像最佳化不是一次壓縮，而是一套從展示尺寸、格式策略到發布驗證都能重複執行的流程。
先從展示限制出發
最佳化的起點不是壓縮率，而是圖片在真實頁面中的呈現尺寸。先確定容器寬度與比例，才能避免無意義地傳輸大圖。
Hero、卡片、縮圖與圖示應各自有尺寸策略，不要所有資產都套同一套輸出規則。
格式策略與發布門檻要一起存在
- 照片優先使用現代有損格式，向量與 UI 圖形則保持無損或直接使用 SVG。
- 把檔案大小上限、響應式變體與視覺抽查寫進發布清單。
- 保留至少一個失敗樣例給 QA，確認超標圖片真的會被攔下。
實用輸入/輸出範例
輸入
Hero 圖：3840x2160，5.4MB PNG 卡片圖：1920x1080，1.3MB JPG
輸出
Hero：輸出 1920x1080 響應式變體集 卡片：壓縮到 800x450，目標 <180KB