核心差異一覽表

格式	壓縮類型	色深	透明度	動畫	典型用途	瀏覽器支援
JPG/JPEG	有損	24-bit (1677萬色)	❌	❌	照片、複雜漸層、網頁大圖	全平台完美
PNG	無損	24-bit + 8-bit Alpha (256階半透明)	✅ 全透明/半透明	❌ (APNG 支援但較少用)	截圖、UI 圖示、需透明底圖、文字銳利圖	全平台完美
GIF	無損 (LZW)	8-bit (256色)	✅ 單色透明 (1-bit)	✅ 多幀動畫	簡單動畫、表情包、低色圖示	全平台完美
WebP	有損/無損	24-bit + Alpha	✅	✅	網頁圖片首選、替代 JPG/PNG/GIF	現代瀏覽器全支援 (IE 需 polyfill)
AVIF	有損/無損 (AV1)	10/12-bit HDR + Alpha	✅	✅	下一代網頁圖片、HDR 內容、極高壓縮比	Chrome 85+, Firefox 93+, Safari 16.1+
SVG	向量 (XML)	無限縮放	✅	✅ (SMIL/JS)	圖示、Logo、圖表、響應式設計	全平台完美

深度解析：三大傳統格式

JPEG (JPG) — 照片之王

• DCT 離散餘弦變換 + 量化表，犧牲不可視細節換取高壓縮比。
• 品質 85~90% 通常肉眼無差異，檔案大小僅原始 10~20%。
• 不適合：截圖、文字、銳利邊緣、需透明底、需無損存檔。
• 漸進式 JPEG：分階段載入，優化網頁體驗。

PNG — 無損透明首選

• Deflate 壓縮（類 ZIP），無畫質損失。
• PNG-8：256 色調色盤，檔案極小，適合簡單圖示。
• PNG-24/32：真彩色 + Alpha 通道，截圖、UI 素材標準格式。
• 優化工具：oxipng、pngcrush、TinyPNG 可再壓縮 10~40%。

GIF — 動畫老將

• 256 色限制 → 照片/漸層嚴重色帶、抖動。
• 單色透明（全透明/不透明），無半透明邊緣，疊加非白底會有鋸齒白邊。
• 動畫幀延遲最小 10ms，無聲音、無互動。
• 現代網頁建議改用 WebP 動畫 或 影片 (MP4/WebM)，體積更小、畫質更好。

新世代格式：WebP 與 AVIF

WebP (Google, 2010)

• 同畫質下比 JPG 小 25~35%，比 PNG 小 20~50%。
• 支援有損/無損、Alpha、動畫、ICC 色彩配置檔。
• 目前網頁圖片首選格式，CDN/圖床多自動轉 WebP。
• 轉檔工具：cwebp、Squoosh、ImageMagick、線上轉檔網站。

AVIF (AOMedia, 2019) — 壓縮效率新標桿

• 基於 AV1 視訊編碼鍵幀，同畫質比 WebP 再小 20~50%，支援 HDR、廣色域、10/12-bit。
• 編碼較慢（CPU 密集），解碼需硬體加速較佳。
• 適用：高畫質攝影網站、HDR 畫廊、極致頻寬優化。
• 漸進式支援中，<picture> 標籤可優雅降級。

實務選擇決策樹

1. 是否為向量圖（Logo/圖示/圖表）？→ SVG。
2. 需要動畫？→ 簡單表情包 GIF（兼容舊環境） / 高品質 WebP 動畫 / MP4/WebM 影片。
3. 需要透明/半透明？→ PNG (無損) / WebP (有損/無損) / AVIF (最高壓縮)。
4. 照片/複雜漸層/不需透明？→ WebP (有損, quality 75-85) / AVIF (quality 50-60) / 兼容舊瀏覽器 JPG (quality 85)。
5. 截圖/文字/線條銳利圖/需無損存檔？→ PNG / WebP 無損 / AVIF 無損。
6. 列印/專業設計原稿？→ TIFF (無損/LZW)、PSD、EXR (HDR)。

網頁開發最佳實踐

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="描述" loading="lazy" width="800" height="600">
</picture>

• 瀏覽器按支援度自動選最佳格式。
• 配合 CDN 自動轉檔（Cloudflare Images、Imgix、Cloudinary）一鍵搞定多格式。
• 設定 Cache-Control: immutable, max-age=31536000 靜態資源長效快取。

掌握各格式特性，善用 <picture> 與現代工具鏈，您的網頁圖片將兼具極致畫質、最小體積、最佳相容性。