圖片壓縮終極指南：JPEG/PNG/WebP/AVIF 格式選擇與線上壓縮技巧

一張未壓縮的圖片能拖慢整個頁面

做工具庫這幾年，我們見過的圖片問題太多了：有人上傳5MB的PNG做大頭貼，有人用iPhone「原圖」直接發到網頁上，還有人把300dpi的印刷稿當網頁圖片用。

圖片壓縮看似簡單，其實有很多門道。弄好了，頁面載入快3倍；弄不好，圖片糊成一片。這篇文章把我們從實戰中總結的經驗全部告訴你。

---

四大圖片格式終極對比

特性	JPEG	PNG	WebP	AVIF
有損壓縮	✅ 最好	❌	✅ 更好	✅ 最好
無損壓縮	❌	✅ 最好	✅ 不錯	✅ 不錯
透明背景	❌	✅	✅	✅
動畫	❌	❌(APNG)	✅	✅
瀏覽器支援	100%	100%	97%	93%
同品質檔案大小	基準	大3-10倍	小25-35%	小50%

---

實測資料：同一張圖四種格式

原始 PNG 檔案：4.2 MB

JPEG (品質90)  1.1 MB  肉眼無差
JPEG (品質70)  420 KB  幾乎無差
WebP (品質90)  680 KB  肉眼無差
WebP (品質70)  280 KB  稍遜
AVIF (品質70)  250 KB  肉眼無差

結論：WebP和AVIF在高壓縮率時優勢明顯。但AVIF編碼慢（大圖可能要等幾秒），做線上工具時不建議用AVIF做即時壓縮。

---

快速決策表

需要透明背景？
├── 是 → WebP 或 PNG（看瀏覽器支援）
└── 否 → 是照片嗎？
         ├── 是 → WebP (品質85) 兜底 JPEG
         └── 否 → 是截圖/圖表？
                  ├── 是 → PNG (8位索引色)
                  └── 否 → WebP (品質80)

下次處理圖片時，先過一遍這個決策表，然後直接來工具庫圖片壓縮搞定。省時、省頻寬、還不用擔心隱私問題——所有處理都在你的瀏覽器裡完成。