核心差異快速比較表

特性	JPG (JPEG)	PNG	GIF
壓縮方式	有損壓縮	無損壓縮	無損壓縮 (LZW)
色彩深度	24-bit (1670 萬色)	PNG-8: 256 色 / PNG-24: 1670 萬色 / PNG-32: 含 Alpha 通道	256 色 (8-bit)
透明度支援	❌ 不支援	✅ 全支援 (Alpha 通道，256 級半透明)	✅ 單一透明色 (布林透明)
動畫支援	❌	❌ (APNG 為擴展，非標準)	✅ 原生支援多幀動畫
適用場景	照片、複雜漸層、網頁大圖	截圖、UI 圖示、需透明背景、文字銳利圖像	簡單動畫、小圖示、低色彩動圖
檔案大小傾向	照片最小	截圖/線條圖比 JPG 小	動畫較大，靜態圖不如 PNG

深度解析

JPG/JPEG：照片之王

• 1992 年標準化，專為連續調影像設計。
• 有損壓縮：每次儲存都會損失品質，編輯請保留原檔（RAW/TIFF/PSD），最後匯出 JPG。
• 不支援透明背景，不適合文字、銳利邊緣、純色區塊（會產生伪影）。
• 品質參數 80~90% 通常肉眼不可辨別，檔案大幅縮小。

PNG：設計師最愛

• 1996 年推出，取代 GIF 專利限制。
• PNG-8：256 色索引色，檔案極小，適合簡單圖示、扁平化設計。
• PNG-24：真彩色，無損，適合高品質靜態圖。
• PNG-32 (PNG-24 + Alpha)：唯一主流支援 256 級半透明 的格式，陰光、陰影、漸層透明完美呈現。
• 截圖存 PNG：文字銳利、檔案比 JPG 小、無壓縮伪影。

GIF：動畫獨佔鰲頭

• 1987 年誕生，歷史最悠久。
• 限制 256 色，複雜圖片會產生色帶、抖動。
• 動畫原理：將多張圖疊成單一檔案，逐幀播放。
• 僅支援「完全透明」或「完全不透明」，無半透明效果。
• 現代網頁動畫多改用 WebP、APNG、MP4/WebM 影片，GIF 逐漸退居次要。

實戰選擇指南

📸 攝影照片、產品圖、Banner 大圖

→ JPG (品質 85%)

🖥️ 螢幕截圖、程式碼片段、UI 線框圖

→ PNG (預設 PNG-24)

🎨 Logo、Icon、需透明背景的設計素材

→ PNG-32 (含 Alpha 通道)

🌈 簡單幾何圖形、扁平插圖、色塊少

→ PNG-8 或 SVG (向量更佳)

🎬 簡短無聲動畫、表情包、載入動畫

→ GIF (或更優的 WebP/APNG)

📱 網頁效能優化

→ WebP (同時支援有損/無損、透明、動畫，瀏覽器支援度已超 95%)

進階補充：WebP 與 AVIF

現代網頁開發建議優先輸出 WebP（Google 推動）或 AVIF（下一代），兩者在相同視覺品質下檔案比 JPG/PNG 小 30~50%。可用 `` 標籤提供回退相容。

記住：格式選對，畫質好、載入快、維護易。下次存檔前先問自己：「這張圖要透明嗎？要動嗎？是照片還是線條圖？」答案自然浮現。