介面既要設計交付給工程、又要顧載入時，常採「PNG 保底 + WebP 主力 + AVIF 加分」。本文以 Mac 實務整理批量匯出轉碼決策，用一張表對齊素材一致性（色彩空間、sRGB、透明度、體積閾值），並附遠端 M4 批量驗收與交前端檢查項。🖼️
① 為何混用 WebP／AVIF／PNG
PNG 適合像素一致與複雜透明；WebP 常作較小體積主力；AVIF 適合首屏大圖但需 <picture> 或協商與 fallback。混用重點是命名、色域與驗收規則貫穿設計交付，避免半套 WebP 與未標色域的 PNG 並存。
② 格式對比表（色彩空間、sRGB、透明度、檔案體積閾值）
下表假設同一主體與倍率；實際比例因內容而異，閾值請寫入 README 或設計 token。
| 維度 | PNG | WebP | AVIF |
|---|---|---|---|
| 色彩空間 | 建議與設計稿一致（多數 Web 專案鎖 sRGB；若全鏈路支援可約定 Display P3） | 轉檔時須確認來源 ICC 是否保留或明確轉成目標色域，避免二次偏色 | 編碼器與參數差異大；需在交付說明標明「預期顯示色域」與抽檢螢幕 |
| sRGB 與描述檔 | 建議嵌入 sRGB ICC，利於跨裝置與舊版預覽一致 | 部分工具可附帶或剝離 metadata；與前端約定是否保留 ICC | 常與「無 metadata」管線並用；更依賴全站 CSS／瀏覽器預設色域策略 |
| 透明度（Alpha） | 完整 Alpha；圖示、遮罩、不規則去背首選基線格式 | 支援透明；有損模式需抽檢邊緣是否出現色帶 | 支援透明；需測試目標瀏覽器版本與 fallback 圖是否一致 |
| 檔案體積閾值（相對同內容 PNG） | 作為基線 100%；相容性與除錯優先時保留 | 一般 UI 點切：目標約 比 PNG 小 25%～55% 再納入交付（未達則檢查是否誤用無損或來源過大） | 大圖／照片向：常見目標為 比同品質 WebP 再小約 10%～35%；若更小反而要警覺過度有損 |
若已從 Figma、Sketch、Affinity 匯出 PNG，可再銜接壓縮與轉檔流程；細節可參考 三款工具批量匯出 PNG 工作流 與 ImageOptim 與命令行壓縮對比。
③ HowTo：Mac 批量匯出與轉檔步驟
下列步驟與頁首 HowTo 結構化資料一致。
- 鎖定色域與透明規則：書面約定 sRGB／P3、哪些元件必須 PNG、哪些可走 WebP／AVIF。
- 批量匯出 PNG 主檔：統一畫板、倍率與檔名前綴，輸出到 staging 資料夾，先做一次視覺抽檢。
- 批次轉 WebP／AVIF：在 Mac 或 CI 使用固定品質檔（例如 WebP
-q 80、AVIF-crf區間），並保留與 PNG 對應的檔名規則。 - 遠端 M4 跑全量：將同一腳本放到遠端機執行，利用 M4 吞吐縮短批量匯出與轉檔總時數，本機只做抽檢。
- 交付包：附上格式對照表、fallback 順序與下列「前端檢查項」，完成設計交付閉環。
④ 遠端 M4 批量驗收清單
遠端 M4 跑批量時，用清單守住素材一致性。
- ✓ 輸入／輸出檔案數量一致，或差異列在報告（略過清單需可解釋）。
- ✓ 隨機抽檢透明素材：疊在深淺底色上無異常邊緣或色帶。
- ✓ 抽檢色彩：對照設計稿與 sRGB 螢幕，確認無明顯色偏（特別是從 P3 專案匯出後轉檔）。
- ✓ 體積：依上表閾值抽樣比對；異常放大或過小都需記錄編碼器版本與參數。
- ✓ 產物可重跑：腳本、版本號、執行日誌一併存檔，方便下版批量匯出對齊。
若需與 OpenClaw 或 Docker 流水線結合，可延伸閱讀 遠端 Mac 批量導出自動化。
⑤ 設計交付給前端的檢查項
交檔時請前端依下列項目勾選。
- ✓ 格式矩陣：各模組使用 PNG／WebP／AVIF 的對照表已附；AVIF 是否有 PNG／WebP fallback。
- ✓ sRGB／色域：全站顯示假設與設計稿一致；特殊 P3 素材是否單獨標註。
- ✓ 倍率與命名：
@1x／@2x或等價目錄結構與設計 token 對齊。 - ✓ 透明度：關鍵 UI 在瀏覽器與設計工具預覽中透明行為一致。
- ✓ 體積與配額：是否滿足專案約定的體積閾值或效能預算（如 LCP 相關大圖）。
- ✓ 無障礙：裝飾圖與資訊圖的
alt策略已對齊；重要文案未僅存在點陣圖內。 - ✓ 清單與路徑：manifest 與實際路徑一致（可對照 Sketch／Figma 匯出校驗）。
將「色域、透明度、體積閾值、fallback」寫成一份單頁規格，之後每一輪批量匯出只需更新版本號與檔案清單，可大幅提升素材一致性。
⑥ 小結與延伸閱讀
2026 年 Mac 上的設計交付多為混用格式；成敗取決於色彩空間、sRGB、透明度與體積閾值是否與前端書面一致，以及遠端 M4 批量驗收與交檢清單。規則固定後，每輪批量匯出可複用同一套邏輯。
延伸閱讀：技術見解（部落格索引）、Affinity／Sketch／Figma 設計工作流、批量壓縮與交付三步。若要穩定、可重跑的 Mac 環境處理大批量轉檔，歡迎從 首頁 了解服務，並查看 租用方案、節點定價。