JPG vs PNG vs WebP：三大圖片格式完整比較
在網頁開發和日常使用中，JPG、PNG 和 WebP 是最常見的三種圖片格式。每種格式都有其擅長的場景，選錯格式可能導致檔案過大或畫質不佳。本文將深入比較這三種格式，幫助你在不同場景下做出最佳選擇。
JPG
照片之王
有損壓縮
PNG
透明圖首選
無損壓縮
WebP
全能新秀
兩者兼具
JPG（JPEG）
JPG 是 1992 年由 Joint Photographic Experts Group 發明的格式，至今仍是最廣泛使用的圖片格式。
優點
- 壓縮率高，照片類圖片檔案小
- 所有裝置和軟體都支援
- 品質可調整，靈活控制檔案大小
缺點
- 不支援透明背景 — 透明區域會變成白色
- 有損壓縮，每次儲存都會損失畫質
- 不適合文字、線條等銳利邊緣的圖片（會產生鋸齒）
- 不支援動畫
最適合
照片、風景圖、人像、產品照等色彩豐富的圖片。
PNG
PNG 是 1996 年為了取代 GIF 而開發的格式，支援無損壓縮和透明背景。
優點
- 支援透明背景 — 8 位元 Alpha 通道，256 級透明度
- 無損壓縮，畫質完美保留
- 銳利邊緣不會產生鋸齒
- 適合文字、圖表、截圖
缺點
- 檔案通常很大 — 尤其是照片類圖片
- 不支援有損壓縮（無法大幅縮小照片）
- 不支援動畫（APNG 支援有限）
最適合
Logo、圖示、截圖、需要透明背景的圖片、文字圖片。
WebP
WebP 是 Google 在 2010 年推出的新世代格式，結合了 JPG 和 PNG 的優點。
優點
- 有損模式比 JPG 小 25-35%
- 無損模式比 PNG 小 26%
- 支援透明背景（有損和無損模式皆支援）
- 支援動畫（比 GIF 小很多）
- 一個格式就能滿足幾乎所有需求
缺點
- 部分舊版軟體不支援（如舊版 Photoshop）
- 作業系統的圖片預覽器支援不一
最適合
幾乎所有網頁圖片用途。特別是需要兼顧檔案大小和畫質的場景。
詳細規格比較
| 特性 | JPG | PNG | WebP |
|---|---|---|---|
| 發佈年份 | 1992 | 1996 | 2010 |
| 有損壓縮 | ✅ | ❌ | ✅ |
| 無損壓縮 | ❌ | ✅ | ✅ |
| 透明背景 | ❌ | ✅ | ✅ |
| 動畫 | ❌ | ❌ | ✅ |
| 色彩深度 | 24-bit | 48-bit | 32-bit |
| 瀏覽器支援 | 100% | 100% | 97%+ |
| 壓縮效率 | 中 | 低 | 高 |
實際檔案大小比較
以一張 1920x1080 的風景照為例（品質設定 80%）：
| 格式 | 檔案大小 | 相對大小 |
|---|---|---|
| JPG（80%） | 約 350 KB | 100% |
| PNG（無損） | 約 2.5 MB | 714% |
| WebP（80%） | 約 240 KB | 69% |
結論：相同畫質下，WebP 比 JPG 小約 30%，比 PNG 小約 90%。如果你的網站還在使用 JPG/PNG，轉換成 WebP 就是最簡單有效的優化。
什麼情況下不該用 WebP？
注意：如果你需要在不支援 WebP 的舊版軟體（如 Paint、舊版 Office）中編輯圖片，或是需要在印刷品中使用，建議保留 JPG/PNG 版本。網頁使用則優先用 WebP。
最佳實務：何時該用哪個格式？
- 照片、風景、人像 → WebP（有損）或 JPG
- Logo、圖示、UI 元素 → WebP（無損）或 SVG 或 PNG
- 需要透明背景的照片 → WebP（有損 + Alpha）
- 截圖、文字圖片 → WebP（無損）或 PNG
- 動畫/動圖 → WebP 動畫 或影片格式
- 印刷用途 → TIFF 或高品質 JPG/PNG
想要快速將你的圖片轉換為 WebP？試試我們的免費工具：
立即使用圖片轉 WebP 工具 →