WebP vs PNG vs JPEG — 哪種圖片格式最好？
WebP vs PNG vs JPEG
每個網頁開發者都面臨同樣的問題：我應該使用哪種圖片格式？JPEG 具有通用支援但缺乏透明度。PNG 保留每個像素但產生大型檔案。WebP 提供現代效率但需要檢查瀏覽器支援。而 AVIF 以編碼速度為代價，進一步推進了壓縮效果。
本指南將這些格式進行直接比較，讓你充滿信心地做出選擇。
檔案大小比較
檔案大小通常是決定性因素。以下是一張典型的 1 MB 攝影圖片在四種格式下的比較：
JPEG： 品質 80 時為 100 到 200 KB。對攝影內容具有出色的壓縮效果，在此設定下瑕疵幾乎不可見。
WebP（有損）： 在相同視覺品質下為 65 到 140 KB。比 JPEG 小 25% 到 35%，且可見瑕疵更少。這是採用 WebP 最有力的論據。
AVIF： 在相同視覺品質下為 50 到 100 KB。比 JPEG 最多小 50%。AVIF 透過計算成本更高的編碼來實現這一點，但節省效果無與倫比。
PNG： 同一張照片為 500 KB 到 3 MB。PNG 並非為攝影內容而設計——無損演算法試圖保留每個像素，包括感測器雜訊，導致檔案顯著更大。
對於圖形、螢幕截圖和純色圖片，情況則有所不同：
PNG： 典型的圖示或標誌在 8 位元色彩深度下為 10 到 100 KB。是顏色較少的簡單圖形的最佳選擇。
WebP（無損）： 相同的圖形為 8 到 80 KB。約比 PNG 小 20% 到 25%。
AVIF（無損）： 與 WebP 無損相當或略小，但工具支援有限。
JPEG： 由於會產生瑕疵且缺乏透明度，不適合圖形使用。
品質與視覺保真度
JPEG 在高品質設定下產生平滑、自然的照片外觀。在品質 80 到 90 時，壓縮瑕疵對大多數觀看者來說無法察覺。在品質 50 時，區塊效應和色彩條帶變得可見，特別是在天空和漸層區域。在品質 20 時，圖片嚴重劣化，瑕疵明顯。
WebP 有損 在相同檔案大小下產生的瑕疵比 JPEG 更少。該格式使用更先進的壓縮技術，能更好地保留邊緣和漸層。在品質 75 時，WebP 通常看起來與 JPEG 品質 85 一樣好，且檔案更小。
AVIF 繼承了 AV1 視訊編解碼器的先進技術，在每單位位元組的視覺品質上表現最佳。它在處理漸層、邊緣和精細紋理上優於 JPEG 和 WebP。壓縮瑕疵更平滑且更不明顯。
PNG 始終在視覺上完美。每個像素都精確保留。取捨在於檔案大小，而非品質。
透明度支援
| 格式 | Alpha 透明度 | 表現 | |--------|-------------------|-------------| | JPEG | 不支援 | 不適用 | | PNG | 完整的 Alpha 通道 | 通用支援 | | WebP | 有損和無損模式中的完整 Alpha 通道 | 非常好的瀏覽器支援 | | AVIF | 完整的 Alpha 通道和 HDR | 支援持續增長 |
透明度是標誌、圖示和任何需要疊加在不同背景上的圖片的硬性需求。在這些情況下，JPEG 不是選項。PNG 是安全的選擇。WebP 是現代瀏覽器的高效選擇。
動畫支援
GIF 數十年來一直是網頁動畫的標準，但存在更好的替代方案：
- WebP 支援帶有完整 Alpha 透明度的動畫。動畫 WebP 檔案通常比等效的 GIF 小 40% 到 60%。
- AVIF 也支援動畫，且壓縮比率更佳。
- JPEG 和 PNG 不支援動畫。
瀏覽器相容性
| 瀏覽器 | JPEG | PNG | WebP | AVIF | |---------|------|-----|------|------| | Chrome | 完整 | 完整 | 完整 | 完整 | | Firefox | 完整 | 完整 | 完整 | 完整 | | Safari | 完整 | 完整 | 14 及以上 | 16 及以上 | | Edge | 完整 | 完整 | 完整 | 完整 | | Internet Explorer | 完整 | 完整 | 不支援 | 不支援 |
WebP 覆蓋了全球超過 95% 的網頁使用者。AVIF 覆蓋超過 85% 並且在持續增長。對於大多數現代網站，兩種格式都可以安全使用並附帶備用方案。
編碼與解碼速度
| 格式 | 編碼速度 | 解碼速度 | 最適合 | |--------|-------------|-------------|----------| | JPEG | 非常快 | 非常快 | 高產量、即時應用 | | PNG | 快（因色彩深度而異） | 快 | 靜態圖形、螢幕截圖 | | WebP | 中等 | 快 | 生產環境網頁圖片 | | AVIF | 慢 | 中等 | 存檔或 CDN 傳輸的圖片 |
如果你在請求時動態編碼圖片，JPEG 或 WebP 是實際的選擇。AVIF 編碼對於即時使用來說太慢，除非有專用硬體。
快速決策指南
| 需求 | 最佳選擇 | 備選 | |-------------|-------------|-----------| | 照片，通用支援 | JPEG | WebP（附帶 JPEG 備用方案） | | 照片，最小檔案大小 | AVIF | WebP | | 帶透明度的標誌 | PNG | WebP（無損） | | 螢幕截圖或 UI 元素 | PNG | WebP（無損） | | 動態圖形 | WebP | AVIF | | 最大化品質保留 | PNG | WebP（無損） | | 單一格式用於所有圖片 | WebP | AVIF |
實際效能影響
考慮一個擁有 50 張產品圖片的電子商務網站。從 JPEG（品質 80，每張 150 KB）切換到 WebP（品質 80，每張 100 KB），將圖片總重量從 7.5 MB 降低到 5 MB。在有效速度為 3 Mbps 的行動連線上，總載入時間減少了 6 秒。
從 JPEG 切換到 AVIF，將同樣的圖片集縮減到大約 4 MB——圖片重量減少 45%，且沒有可見的品質變化。
這些節省效果會疊加到你網站的每個頁面以及每位使用者的每次訪問中。
立即壓縮你的圖片
一旦你為你的專案選擇了正確的格式，請確保你的圖片被妥善壓縮。我們的免費線上圖片壓縮工具支援 JPEG、PNG、WebP 和 AVIF——以原始格式壓縮你的圖片，無需不必要的轉換。上傳、調整品質，然後下載準備好用於網頁的最佳化檔案。