前言：為什麼要搞懂 PNG 細節？

PNG 是現代網頁開發中最常用的無損格式，但許多設計師僅知「支援透明」，卻不清楚 PNG-8、PNG-24、PNG-32 的實際差異，導致匯出圖片體積過大、IE6 相容問題、鋸齒邊緣等痛點。本文將從 Fireworks/Photoshop 實際匯出面板切入，系統梳理三種深度的特性、透明度機制、實測數據與最佳實踐。

一、三種深度一覽表

格式	色彩深度	最大色數	透明度類型	典型檔案體積
PNG-8	8-bit 索引色	256	不透明 / 索引透明 / Alpha 透明	最小
PNG-24	24-bit 真彩色	1670 萬	不透明	中等
PNG-32	24-bit 真彩色 + 8-bit Alpha	1670 萬	256 級半透明	最大

二、透明度的三種面貌

1. 不透明

相當於 JPEG，無透明資訊。Photoshop 匯出 PNG-24 未勾選「透明度」時即為此模式。不建議用於網頁，同畫質下 JPEG 體積更小。

圖 04：未勾選透明度的 PNG-24 實為不透明

2. 索引透明

僅支援「完全透明」或「完全不透明」兩種狀態，邊緣無半透明像素，導致鋸齒明顯。Photoshop 匯出 PNG-8 並勾選透明度時預設為此模式。

鋸齒成因：半透明像素被強制轉為不透明或全透明。

圖 09：左側半透明邊緣在索引透明下產生鋸齒

3. Alpha 透明

擁有 256 級灰度 Alpha 通道，支援平滑半透明過渡。PNG-32 原生支援；Fireworks 可匯出 PNG-8 Alpha 透明（體積較小但 IE6 會出現灰邊）。

三、Photoshop 實操：如何匯出各類透明 PNG

PNG-8 索引透明（避免鋸齒技巧）

1. 開啟 存儲為 Web 所用格式，選 PNG-8，勾選透明度。
2. 在「雜邊」下拉選單選擇「與背景色一致」，並設定背景色為目標頁面背景色。
3. 匯出後，該圖片僅在該特定背景色下視覺無鋸齒，更換背景會再次出現邊緣。

圖 13：設定雜邊顏色以消除視覺鋸齒

PNG-32（標準半透明）

1. 選 PNG-24，勾選「透明度」→ 實際匯出為 32-bit。
2. Photoshop 介面無獨立 PNG-32 選項，因 24+8=32 邏輯內建。

圖 06：勾選透明度後匯出為 32-bit

PNG-8 Alpha 透明（需 Fireworks）

Photoshop 不支援 直接匯出 PNG-8 Alpha。Fireworks 優化面板選 PNG-8 → Alpha 透明即可。體積約為 PNG-32 的 60%，但 IE6 會渲染灰色邊緣，現代專案建議直接用 PNG-32。

圖 14：Fireworks 匯出 PNG-8 Alpha 介面

四、行動裝置實測：同一雪碧圖不同格式體積對比

測試素材：1230×82 px 彩色雪碧圖，平台 iOS & Android WebKit。

圖 16：不同 PNG 格式體積、透明度、鋸齒、Retina 表現對比

結論：

• 一般專案首選 PNG-32，兼容性最佳、無鋸齒、支援半透明。
• 極度在意流量且圖片無半透明需求 → PNG-8 索引透明 + 雜邊匹配背景色。
• 需支援 IE6 且有半透明 → 無完美方案，建議優雅降級或使用 PNG-32 + IE 專用濾鏡。

五、總結建議

1. 預設匯出 PNG-32，無腦好用。
2. 體積敏感專案，評估 PNG-8 索引透明 + 雜邊技巧。
3. 避免使用 PNG-24 不透明，改用 JPEG。
4. 團隊協作時制定「圖片匯出規範文件」，統一格式、命名、壓縮參數。