前言：為什麼搞懂 PNG 格式至關重要？

網頁設計、UI 輸出、App 切圖，PNG 是透明背景的首選格式。但許多設計師只知「存成 PNG」，卻不清 PNG-8、24、32 的本質差異，導致檔案過大、色彩失真、鋸齒明顯、IE6 相容問題等災難。本文從底層原理到 PS/FW 導出實戰，一次釐清。

一、PNG 位深與色彩模式的本質關係

格式	位深	色彩數	透明度類型	典型用途
PNG-8	8-bit	256 色 (索引色)	不透明 / 索引透明 (1-bit) / Alpha 透明 (8-bit)	簡單圖示、扁平插畫、需極小體積的透明圖
PNG-24	24-bit	1677 萬色 (真彩色)	僅不透明 (無 Alpha 通道)	無透明需求的高色彩豐富圖片（建議改用 JPEG）
PNG-32	32-bit (24+8)	1677 萬色 + 256 級透明	完整 Alpha 通道 (半透明、漸變透明)	複雜半透明效果、陰光、光暈、UI 元件、切圖首選

二、關鍵迷思破解：PNG-24 其實是「不透明」的！

許多人在 PS 存儲為 Web 時選 PNG-24 並勾選「透明度」，以為得到了半透明。實則：PS 的 PNG-24 勾選透明度後，實際輸出是 PNG-32（24 色 + 8 Alpha）。真正的 PNG-24 標準不支援 Alpha 透明。Fireworks 的優化面板則明確區分三種格式，更直觀。

三、PNG-8 索引透明 vs Alpha 透明：鋸齒從何而來？

索引透明 (1-bit 透明)

• 每像素只有「完全不透明」或「完全透明」兩種狀態。
• 邊緣像素若為半透明（抗鋸齒），會被強制判定為不透明或透明 → 產生白邊/鋸齒。

Alpha 透明 (8-bit 透明)

• 256 級透明度，完美保留抗鋸齒邊緣、陰影漸變、光暈。
• PNG-8 也支援 Alpha 透明（Fireworks 可導出，PS 需特定設置），體積比 PNG-32 小得多，是 Web 透明圖的黃金平衡點。

四、PS 導出「PNG-8 Alpha 透明」實戰步驟

1. 檔案 > 匯出 > 存儲為 Web 所用格式 (舊版) (Ctrl+Shift+Alt+S)。
2. 預設組選 PNG-8。
3. 關鍵設置：透明度 ✓、色數 256、抖動 選「無」或「圖案」、雜邊 設為「無」或與背景色一致。
4. 若出現鋸齒，調整「雜邊」顏色為網頁背景色（如白色 #FFFFFF），視覺上消除白邊（缺點：換背景色又會出現）。

五、避開 PNG-8 索引透明鋸齒的三大策略

1. 優先用 PNG-8 Alpha 透明 / PNG-32（現代瀏覽器全支援，IE6 早已淘汰）。
2. 設計階段避免半透明邊緣：圖示、文字邊緣做硬邊、或預乘背景色。
3. CSS 處理：用 `background-color` 模擬雜邊色，或用 `mask-image`、`filter: drop-shadow()` 替代圖片陰影。

六、實戰決策樹：我該存哪種 PNG？

需要透明嗎？
├─ 否 → 色彩豐富？ → 是 → JPEG (品質 80-90%) / WebP
│                └─ 否 (單色/簡單) → PNG-8 不透明 (極小體積)
└─ 是 → 有半透明/漸變/陰影/光暈？
       ├─ 是 → PNG-32 (最保險) / PNG-8 Alpha (體積更小，現代瀏覽器首選)
       └─ 否 (只有硬邊透明) → PNG-8 索引透明 (最小體積，注意鋸齒)

總結

• PNG-8：索引色，支援三種透明模式，**Alpha 透明版是 Web 透明圖體積/品質平衡王**。
• PNG-24：真彩色但**無 Alpha 透明**，勿用於透明需求（PS 勾選透明實存 PNG-32）。
• PNG-32：真彩色 + 完整 Alpha，**複雜半透明首選**，體積最大。
• 現代前端環境，**大膽使用 PNG-8 Alpha 或 PNG-32**，拋棄索引透明鋸齒煩惱，配合 WebP/AVIF 更優。