三大格式核心特性對照
| 特性 | GIF | JPEG | PNG-8 | PNG-24/32 |
|---|
| 色深 | 256 色 (索引色) | 24-bit (1670 萬色) | 256 色 | 24-bit + 8-bit Alpha |
| 透明度 | 布林 (全透/全不透) | 不支援 | 布林 (可模擬半透) | 完整 Alpha 通道 (256 級半透明) |
| 動畫 | 支援 | 不支援 | 不支援 (APNG 另規格) | 不支援 (APNG 另規格) |
| 壓縮類型 | 無損 LZW | 有損 DCT | 無損 Deflate | 無損 Deflate |
| 編輯損耗 | 無 | 每存一次損一次 | 無 | 無 |
| 漸進顯示 | 隔行掃描 | 支援 (IE 不支援) | 支援 (檔案變大) | 支援 (檔案變大) |
| 掃描方向 | 水平 (橫向重複色壓縮佳) | 區塊 | 水平 | 水平 |
| 典型適用 | 簡單圖示、動圖 | 照片、複雜漸層 | 替代 GIF、需透明圖示 | 需半透明、UI 切圖、中繼檔 |
關鍵結論
- 圖示/圖表/UI 切圖： 首選 PNG-8，體積比 GIF 小、支援半透明、無專利風險。極小圖示 (<16×16) GIF 偶爾更小。
- 照片/真實圖像： JPEG 壓縮率最高、相容最廣。編輯中繼請用 PNG-24 避免世代損耗。
- 需半透明/陰影/光暈： 唯有 PNG-32 (PNG-24+Alpha) 完美支援。IE6 需濾鏡修補 (
AlphaImageLoader)。
- 動畫： GIF 仍是通用首選；APNG/WebP/MP4 為現代替代方案。
實務工作流建議
設計稿 (PSD/XCF)
→ 切圖匯出 PNG-32 (UI 元件、透明素材)
→ 照片匯出 JPEG (品質 80-85%)
→ 簡單動圖匯出 GIF / WebP
→ 建置前用 ImageOptim / TinyPNG / Squoosh 批次無損/有損優化
→ 部署時啟用 HTTP/2 + Brotli/Gzip + Cache-Control immutable
歷史冷知識
- GIF 使用 LZW 專利曾引發 1999 年「燃燒所有 GIF」運動，直接催生 PNG 格式 (1996 年發布 RFC 2083)。
- PNG 全名 Portable Network Graphics，發音 "Ping"，非 "P-N-G"。
- JPEG 非格式而是壓縮標準；常見 .jpg/.jpeg 實為 JFIF/Exif 封裝。
