PNG vs JPG vs WebP：該用哪種圖片格式？
選錯圖片格式會讓檔案比實際所需大上 3-5 倍。本指南用真實基準資料對比 PNG、JPG 和 WebP，幫你每次都做出正確選擇。
快速結論
照片：用 WebP（比 JPG 小 30%）。若在意瀏覽器相容性，回退到 JPG。
截圖／文字：用 PNG 獲得畫素級清晰度。
網頁效能：能用 WebP 的地方都用。在每種場景下它都勝過 JPG 和 PNG。
格式總覽
| 特性 | JPG/JPEG | PNG | WebP |
|---|---|---|---|
| 壓縮方式 | 有損 | 無損 | 兩者皆可 |
| 透明 | 否 | 是 | 是 |
| 動畫 | 否 | 否（APNG 可以） | 是 |
| 瀏覽器支援 | 100% | 100% | 97%+ |
| 最適合 | 照片 | 圖形、文字 | 一切 |
| 誕生年份 | 1992 | 1996 | 2010（Google） |
基準測試：檔案體積對比
我們用相當的質量設定，把 50 張圖片（25 張照片 + 25 張圖形）在三種格式下分別壓縮：
照片（25 張，平均 3000×2000px）
| 格式 | 平均體積 | 相比原始 | 質量（SSIM） |
|---|---|---|---|
| 原始（未壓縮） | 5.2 MB | — | 1.000 |
| JPG (Q80) | 680 KB | -87% | 0.985 |
| PNG | 4.1 MB | -21% | 1.000 |
| WebP (Q80) | 490 KB | -91% | 0.987 |
圖形與截圖（25 張）
| 格式 | 平均體積 | 相比原始 | 質量 |
|---|---|---|---|
| 原始（PNG） | 1.8 MB | — | 畫素級完美 |
| JPG (Q90) | 420 KB | -77% | 文字略有模糊 |
| PNG（最佳化後） | 1.1 MB | -39% | 畫素級完美 |
| WebP（無損） | 780 KB | -57% | 畫素級完美 |
關鍵發現：WebP 在照片上比 JPG 小 28%，在圖形上比 PNG 小 29% — 同時保持同等或更好的質量。沒有任何場景 WebP 會落敗。
深入瞭解：JPG（JPEG）
工作原理：JPG 把影像分成 8×8 畫素塊，並對每塊應用離散餘弦變換（DCT）。高頻細節（細微紋理）會被最先丟棄，從而保留整體外觀。
優點：
- 通用支援 — 每個瀏覽器、應用和裝置
- 非常適合含複雜色彩漸變的照片
- 成熟生態，歷經數十年最佳化
缺點：
- 不支援透明
- 每次重新儲存畫質都會下降（代際損耗）
- 低質量時出現可見的「塊狀」瑕疵，尤其在銳利邊緣和文字周圍
深入瞭解：PNG
工作原理：PNG 對畫素資料採用 DEFLATE 壓縮（類似 ZIP）並配合預測濾波。每個畫素都被完整保留 — 零畫質損失。
優點：
- 畫素級完美 — 截圖、示意圖、文字疊加的理想選擇
- 完整支援 alpha 透明
- 重新儲存不損失畫質
缺點：
- 照片檔案體積大（比 JPG 大 3-5 倍）
- 沒有原生有損模式來進一步縮小體積
深入瞭解：WebP
工作原理：由 Google 開發，WebP 用 VP8 影片編碼技術做有失真壓縮，並以自定義方式做無失真壓縮。它分析最大 16×16 的整塊影像，而非固定的 8×8，從而獲得更好的預測。
優點：
- 同等視覺質量下比 JPG 小 25-35%
- 同時支援有損和無失真壓縮
- 支援透明（不像 JPG）
- 支援動畫（取代 GIF）
- 截至 2026 年瀏覽器支援率達 97%+
缺點：
- 部分老舊郵件客戶端和老工具不支援
- 某些社交平臺會把 WebP 重新壓縮成 JPG
決策流程圖
- 這是照片或寫實影像嗎？
- 是 → 用 WebP（或以 JPG 作為回退）
- 否 → 繼續
- 需要透明嗎？
- 是 → 用 WebP（或以 PNG 作為回退）
- 否 → 繼續
- 它包含文字、程式碼或銳利邊緣嗎？
- 是 → 用 PNG 獲得畫素級完美，或用 WebP 無損
- 否 → 用 WebP 有損
AVIF 怎麼樣？
AVIF 是最新的競爭者，壓縮率比 WebP 再好 20%。但其瀏覽器支援仍約 92%，編碼明顯更慢，工具鏈也不夠成熟。對 2026 年的大多數場景，WebP 仍是務實之選。我們會在後續文章中詳細介紹 AVIF。
小結
在 2026 年的網頁用途上，WebP 是明確的贏家，體積小於 JPG 和 PNG，質量卻持平或更優。把 JPG 作為照片的通用回退，需要帶透明的畫素級圖形時用 PNG。無論選哪種格式，釋出前都要先壓縮。