JPG、PNG、WebP 比較：該用哪種圖片格式？

三種格式並排比較

每種格式原本就是為不同用途設計的，差異主要在於如何壓縮像素，以及附帶哪些額外功能。

失真與無失真：關鍵差異

失真壓縮（JPG、失真 WebP）會捨棄人眼不太會察覺的細節。這對色彩漸變的照片很有效，但會把銳利邊緣抹糊：JPG 裡的文字和細線會出現淡淡的光暈，稱為振鈴效應或蚊式雜訊；品質很低時，還可能出現 8×8 像素的方塊。

無失真壓縮（PNG、無失真 WebP）會精確保存每個像素。它壓縮大面積純色的效果很好，所以截圖存成 PNG 可能比 JPG 還小；但照片存成 PNG，往往比品質良好的 JPG 大 3–5 倍，畫面上卻看不出任何好處。

• JPG 每次編輯後再存檔，都會重新壓縮一次，細節又少一點。若要反覆編輯，請保留一份無失真的母檔。
• 把 JPG 轉成 PNG 並不會找回遺失的細節，只是把已壓縮過的像素原封不動存進更大的檔案。
• JPG 品質設在約 80–90%，是兼顧檔案大小與可見瑕疵的常見平衡點。

WebP 到底小多少？

Google 的 WebP 壓縮研究在結構相似度（SSIM）相同的條件下比較檔案：失真 WebP 比 JPG 小 25–34%，Google 也表示無失真 WebP 比 PNG 小約 26%。實際能省多少，取決於圖片內容、編碼器和品質設定。

舉例來說：一張 400 KB 的 JPG 主視覺照片，存成畫質相近的失真 WebP 通常落在 265–300 KB 左右。一個頁面有二十張圖時，這個差距就能縮短行動網路下的載入時間。

AVIF 的定位

AVIF 是較新的格式，把以 AV1 壓縮的影像存放在 HEIF 式容器中。拍照類圖片的檔案大小通常比 WebP 更小，支援 10 位元與 12 位元色彩及 HDR，也支援透明度。Chrome 從第 85 版、Firefox 從第 93 版、Safari 從第 16 版開始支援。

它的缺點是編碼較慢、舊版桌面軟體支援較差，在品質極低時偶爾會失去細緻紋理。許多網站會用 HTML 的 <picture> 元素，優先提供 AVIF，其次是 WebP，最後以 JPG 作為備援。

快速選擇指南

如果表單不接受 WebP，照片就轉一份 JPG，圖形就轉 PNG。把失真檔案轉成無失真格式，除了相容性之外沒有任何好處。