圖片格式指南：PNG、JPG、WebP、SVG — 何時使用哪種格式

選擇錯誤的圖片格式會浪費頻寬、拖慢頁面載入速度並降低視覺品質。每種格式都有其特定優勢——照片在某種格式中效果最佳，標誌在另一種格式中更好，圖示又適合另一種格式。本指南幫助您每次都做出正確的選擇。

快速決策圖表

格式深入探討

JPEG (JPG)

自 1992 年以來照片的標準格式。使用基於離散餘弦變換（DCT）的有損壓縮。

最適合：照片、自然場景、具有漸層的複雜圖片。 避免用於：文字、標誌、截圖、邊緣銳利的圖片。

品質甜蜜點：

• 品質 85：大多數照片視覺上無損（最佳預設值）
• 品質 75：網頁縮圖的良好平衡
• 品質 95：接近無損，適用於列印或存檔

提示：JPEG 不支援透明度。如果您需要帶有透明背景的照片，請使用 WebP 或 PNG。

PNG

無損壓縮——每個像素都被完整保留。支援完整的 Alpha 透明度。

最適合：截圖、UI 元素、彩色背景上的標誌、任何包含文字的圖片。 避免用於：照片（檔案大小會是 JPEG 的 5-10 倍）。

PNG-8 與 PNG-24：

• PNG-8：256 色，檔案較小，適用於簡單圖形
• PNG-24：1600 萬色，檔案較大，照片或漸層所需

WebP

Google 的現代格式，同時支援有損和無損壓縮、透明度和動畫。

最適合：網頁上的所有內容——它是最佳的通用格式。 避免用於：列印（軟體支援有限）、電子郵件（某些客戶端不顯示 WebP）。

相較 JPEG 的優勢：在同等品質下小 25-35%，支援透明度。 相較 PNG 的優勢：無損圖片小 26%，支援有損壓縮。 瀏覽器支援：全球 97% 以上。

使用我們的圖片最佳化工具轉換和最佳化圖片。

SVG

基於 XML 的向量格式。圖片由數學形狀定義，而非像素。

最適合：標誌、圖示、插圖、圖表、任何需要縮放的圖形。 避免用於：照片、複雜的點陣圖片。

獨特優勢：

• 無限縮放不失真
• 簡單圖形的檔案極小（通常不到 1 KB）
• 可用 CSS 設定樣式（變更顏色、製作動畫）
• 無障礙性佳（SVG 中的文字可被搜尋和螢幕閱讀器讀取）
• 可在任何文字編輯器中編輯

<!-- SVG icon: 200 bytes vs PNG: 5,000 bytes -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 8v4l3 3"/>
</svg>

AVIF

最新的格式，基於 AV1 視訊編碼器。壓縮效果優於 WebP。

最適合：主視覺圖片、產品照片、任何需要最大壓縮效果的高優先級圖片。 考量事項：92% 瀏覽器支援、編碼較慢、編輯工具支援有限。 節省幅度：在同等品質下比 JPEG 小 50%。

GIF

最古老的網頁圖片格式（1987 年）。限制為 256 色。

最適合：簡單動畫（但 WebP 動畫更好）。 避免用於：幾乎所有其他用途——WebP 或 APNG 是更好的替代方案。 傳統用途：在通訊應用和社群媒體中仍被廣泛用於表情反應和迷因。

大小比較（同一張圖片）

一張 1200×800 的照片，針對網頁最佳化：

同一個圖形（標誌，500×200）：

現代最佳實踐：Picture 元素

為每個瀏覽器提供最佳格式：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

瀏覽器會選擇第一個支援的格式。每個人都能以最小的檔案大小獲得最佳的可用品質。

最佳化工作流程

1. 從最高品質的來源開始 — 永遠不要從已壓縮的圖片再次最佳化
2. 選擇正確的格式 — 使用上方的決策圖表
3. 調整為顯示尺寸 — 不要在 800px 的容器中使用 4000px 的圖片
4. 壓縮 — 使用我們的圖片壓縮工具進行快速最佳化
5. 提供響應式尺寸 — 使用 srcset 對應不同的視窗寬度
6. 啟用延遲載入 — 對摺疊線以下的圖片使用 loading="lazy"

更多最佳化資訊，請參閱我們的網頁圖片最佳化指南。

常見問題

我應該將所有圖片都轉換為 WebP 嗎？

就網頁發布而言，是的——WebP 是最佳的通用格式，瀏覽器支援率達 97% 以上。保留原始檔案的原生格式（JPEG、PNG）用於存檔和編輯，並轉換為 WebP 來發布。使用 <picture> 元素為少數不支援 WebP 的瀏覽器提供 JPEG 備案。

AVIF 已經可以用於正式環境了嗎？

AVIF 已可用於正式環境，瀏覽器支援率達 92% 以上。主要考量是編碼速度較慢（比 WebP 慢 3-10 倍）和編輯工具支援有限。對於圖片僅在建置時編碼一次的靜態網站，編碼速度並不是問題。請務必提供 WebP 或 JPEG 備案。

相關資源

• 圖片最佳化工具 — 壓縮網頁圖片
• 圖片調整大小工具 — 調整為精確尺寸
• 網頁圖片最佳化 — 完整的最佳化指南