給切片、電商去背與行銷素材交付:PNG-8 能縮體積,但 dithering、透明邊與白邊易在深色模式或壓縮管線翻車。本文提供選型表、參數清單、驗收步驟,以及遠端 M4 批處理與體積閾值對照。色彩請併看 sRGB/Display P3 色彩管理驗收清單。
PNG-8 vs PNG-24 選型表
請在 README 寫清「何時允許索引色」,避免半套透明或斷階漸層。下表以常見交付場景為主,仍以品牌簽核為準。
| 場景 | 建議格式 | 理由(交付視角) |
|---|---|---|
| 扁平 UI 圖示、少色插畫、像素風 | PNG-8(≤256 色) | 色塊邊界清楚,量化誤差可控;體積常優於 PNG-24。 |
| 柔邊陰影、複雜漸層、皮膚/毛髮去背 | PNG-24(真彩+Alpha) | 索引色易出色帶;強抖動可能讓品牌色「顆粒化」。 |
| 需全透明漸層(如玻璃感) | PNG-24 | PNG-8 僅 1 位元透明時無法表現多階 Alpha。 |
| 電商白底商品(硬邊輪廓) | PNG-8 或 PNG-24 | PNG-8 可行時先試 128~256 色;若有淺灰邊需回母檔修邊。 |
| 多格式並存(WebP/AVIF+PNG 後備) | 母檔 PNG-24 → 管線產 PNG-8 | 遠端批次較可複現,少手動反覆降色。 |
若管線已接 OpenClaw 或自訂巡檢,可把色數與體積規則對齊 PNG 調色盤與體積閾值自動巡檢 一文中的閾值思路。
Dithering/調色板參數可執行清單
試片階段勾選並寫入檔名後綴(如 -p8-dith-fs-q90),批量僅允許已簽核組合。
| 項目 | 建議取值/動作 | 備註 |
|---|---|---|
| 色數上限 | 32/64/128/256 | 從低往高試,直到品牌色 ΔE 可接受;電商主圖常落 128~256。 |
| 調色板策略 | 全域固定 vs 每圖最佳化 | 套圖一致性優先選全域;單檔體積優先可每圖(要記 manifest)。 |
| 抖動類型 | 無/Ordered/Floyd–Steinberg 等 | 無抖動易色帶;擴散抖動較自然但可能讓大色塊「髒」。 |
| 抖動強度 | 低→中→高試三檔 | 截圖對照深色底;與工程約定「以哪一檔為準」。 |
| 透明像素處理 | 鎖定「直線 Alpha」與去背邊緣羽化範圍 | 避免半透明髮絲在量化後變成雜點邊。 |
| CLI 參考(遠端可腳本化) | pngquant 色數、--quality、--speed |
與設計試片同參數寫入 shell;速度與品質在 M4 上再微調。 |
透明邊緣與白邊驗收步驟
透明與白邊常在深色模式或非白底頁才曝光;請依序抽檢,並參 設計師 PNG 透明 FAQ 清單。
- 底色素模:
#FFFFFF、#0B0B0B、品牌主色底各檢一次,看邊緣淺灰/洋紅暈圈。 - 放大鋸齒:Logo/細線圖示放大 400%,抗鋸齒是否變毛邊點陣。
- 白底商品:查 1~2px 淺邊;回母檔收縮選取或調邊緣對比。
- Alpha:約定 straight/premultiplied,混用易假白邊。
- 簽核:每版型淺底+深底截圖各一,附交付夾。
遠端 M4 批處理路徑(腳本/動作)與耗時對比
遠端 M4 利於固定環境、徹夜排程、避免本機睡眠中斷。下表耗時為相對量級,請用同批樣本實測寫 README。
| 路徑 | 適用 | 耗時特性 |
|---|---|---|
| Photoshop「動作」+批次 | 已習慣 PS、參數在錄製動作內 | CPU 為主;M4 上通常優於舊 Intel 筆電,大量開檔仍受磁碟影響。 |
| Automator/快捷指令 呼叫 sips、自訂 shell | 資料夾丟入即處理 | 編排簡單;大量 pngquant 時建議加佇列避免瞬間打滿 CPU。 |
| 純 Bash/zsh 迴圈+ pngquant、optipng/oxipng | 需與 CI、manifest、閾值銜接 | 最易版本化與重跑;M4 多核適合平行處理(控制同時工作數)。 |
建議記錄:單檔均時、千張總分鐘、峰值記憶體;含 4K 降階時另表長邊與併發,避免 I/O 瓶頸。
匯出後體積閾值 FAQ
正文速覽與頁首 FAQPage JSON-LD 對齊。
問:主圖限 150KB,PNG-8 仍超標?
答:查尺寸;再調壓縮 effort 或略降色數;品質崩壞則放寬規格或改 WebP/AVIF 主交付。
問:量化後品牌色跑色算合格嗎?
答:否。為品牌色保留名額或改 PNG-24,manifest 標 colorCritical。
問:批處理後還要無損壓?
答:可跑 oxipng/optipng 一輪,常再省 5%~15% 且不變像素;參數須與試片一致。
決策與驗收寫入 manifest 後,建議租用遠端 Mac(M4):共用匯出預設、徹夜批量、省本機負載。連線與節點見 幫助中心。
相關設計交付閱讀:ImageOptim 與 CLI 批量壓縮對照、PNG 元數據與無損重壓縮驗收。