格式起源與定位
| 格式 | 誕生年 | 核心定位 | 壓縮類型 | 色彩深度 | 透明度支援 | 動畫支援 |
|---|
| GIF | 1987 | 網頁動畫、簡單圖示 | 無損 (LZW) | 256 色 (8-bit 索引色) | 單一透明色 (1-bit Alpha) | 支援 (多幀循環) |
| JPEG/JPG | 1992 | 照片、連續調影像 | 有損 (DCT) | 1677 萬色 (24-bit 真彩色) | 不支援 | 不支援 |
| PNG | 1996 | 無損網頁圖示、截圖、透明素材 | 無損 (Deflate) | PNG-8: 256 索引色 / PNG-24: 1677 萬真彩色 / PNG-48: 48-bit 深色彩 | 完整 Alpha 通道 (256 級半透明) | 不支援 (APNG 為擴展) |
兩兩對比：核心取捨
JPEG vs PNG
- 照片壓縮：JPEG 擁有壓倒性優勢（同畫質體積更小、同體積畫質更好），無可替代。
- 有損 vs 無損：JPEG 每次存檔畫質遞減；PNG 無損，適合中間檔/素材保存。
- 螢幕截圖/文字/線條圖：PNG 畫質更銳利、檔案更小（JPEG 會產生明顯振鈴伪影/色塊）。
- 透明背景需求：唯有 PNG 支援半透明漸層邊緣，JPEG 需配合遮罩/抠圖。
GIF vs PNG
- 動畫領域：GIF 唯一優勢在於簡單動畫廣泛相容（瀏覽器、即時通訊、社群平台原生支援）。
- 色彩限制：GIF 256 色嚴重限制畫質，高畫質動畫實務上用 WebM/MP4/APNG。
- 靜態圖示/圖示字體：PNG 完整取代 GIF（更小體積、真彩色、Alpha 透明）。
PNG 內部變體
- PNG-8：256 索引色，類似 GIF 但支援 Alpha 透明，體積極小，適合圖示/介面元件。
- PNG-24：24-bit 真彩色 + 8-bit Alpha (32-bit RGBA)，標準無損素材格式。
- PNG-48：48-bit RGB (16-bit/通道)，HDR/專業列印工作流。
實務選擇決策樹
- 照片/連續調影像 → JPEG (品質 85-95%)。
- 截圖/介面/文字/線條/需透明背景 → PNG-24。
- 簡單圖示/小尺寸 UI 元件 → PNG-8。
- 簡單動畫/表情包/社群分享 → GIF (或優先 WebM/MP4)。
- 專業中間檔/歸檔/列印 → PNG-24/48 或 TIFF。
- Web 高效能載入 → WebP (有損/無損/動畫/Alpha 全支援)，配合 `` 標籤回退。
總結
理解三格式「壓縮機制、色彩模型、透明度、動畫」四大核心屬性差異，即可在設計、開發、發布各環節做出最優格式選擇，兼顧畫質、體積、相容與工作流效率。
