品質與大小的平衡：找到最佳壓縮比
「壓縮品質要設多少？」這是每個處理圖片的人都會遇到的問題。設太高，檔案還是很大；設太低，畫質慘不忍睹。那麼，最佳的壓縮品質到底是多少？答案並不是一個固定數字，而是取決於你的具體需求和圖片內容。
理解壓縮品質與檔案大小的關係
壓縮品質與檔案大小的關係並不是線性的。這是許多人忽略的重要觀念：
| JPEG 品質 | 典型檔案大小（相對） | SSIM 品質指標 |
|---|---|---|
| 100% | 100%（基準） | 1.000 |
| 95% | ~60% | 0.998 |
| 85% | ~30% | 0.995 |
| 75% | ~20% | 0.990 |
| 50% | ~10% | 0.970 |
| 25% | ~5% | 0.920 |
可以看到，從 100% 降到 85%，檔案大小減少了 70%，但 SSIM 只從 1.000 降到 0.995 — 這個差異人眼幾乎無法察覺。但從 50% 再降到 25%，檔案只減少了一半，品質卻明顯下降。
重點摘要：壓縮品質在 75-85% 區間是「甜蜜點」— 檔案大小大幅減少，但視覺品質幾乎不受影響。低於 50% 後，每一點壓縮換來的檔案大小減少越來越少，但品質損失越來越明顯。
什麼是 SSIM？
SSIM（Structural Similarity Index Measure，結構相似性指標）是一種衡量兩張圖片相似度的科學方法。它模擬人類視覺系統的感知方式，考量亮度、對比度和結構三個面向：
- SSIM = 1.000 — 兩張圖片完全相同
- SSIM ≥ 0.995 — 差異極微小，需要放大仔細對比才看得出
- SSIM ≥ 0.980 — 有些微差異，但正常瀏覽時不明顯
- SSIM ≥ 0.950 — 可以察覺差異，但仍可接受
- SSIM < 0.900 — 明顯品質下降
SSIM 比傳統的 PSNR（峰值信噪比）更能反映人眼的實際感受，因此被廣泛用於評估圖片壓縮品質。
不同類型圖片的最佳壓縮設定
不同內容的圖片對壓縮的敏感度不同：
照片類圖片
照片包含大量的色彩漸變和細節，是有損壓縮的理想對象。建議品質設定在 75-85%，SSIM 通常可以維持在 0.990 以上。
文字截圖
包含文字的圖片對壓縮非常敏感。有損壓縮會導致文字邊緣出現模糊和偽影。建議使用 PNG 無損壓縮，或 JPEG 品質不低於 90%。
圖表和資訊圖
圖表通常有大面積的純色和清晰的線條。建議使用 PNG 或 SVG 格式，如果用 JPEG 則品質不低於 85%。
電商產品圖
產品圖需要展示細節但也需要快速載入。建議品質設定在 80-85%，並確保圖片尺寸不超過實際顯示需要。
Mozilla 的 JPEG 研究
Mozilla 在開發 mozjpeg 編碼器時進行了大量的品質測試研究。他們的研究發現：
- 使用改良的量化表可以在相同品質下進一步縮小 5-10% 的檔案大小
- 漸進式 JPEG（Progressive JPEG）在網路傳輸中提供更好的體驗
- 色度子採樣（Chroma Subsampling）4:2:0 可以在幾乎不影響感知品質的情況下減少約 33% 的資料量
WebP 的壓縮效率
Google 的 WebP 格式在相同視覺品質下通常比 JPEG 小 25-35%。這意味著如果你目前使用 JPEG 品質 80%，轉換為 WebP 後可以在維持相同品質的情況下進一步減少檔案大小。
| 格式 | 品質 80% 的平均大小 | SSIM |
|---|---|---|
| JPEG（標準） | 100 KB（基準） | 0.992 |
| JPEG（mozjpeg） | 85 KB | 0.992 |
| WebP | 70 KB | 0.993 |
| AVIF | 55 KB | 0.993 |
實用建議
- 從 80% 開始 — 大多數網頁場景下，80% 是安全的起點
- 使用 A/B 比較 — 在原圖和壓縮圖之間切換比較，確認品質可接受
- 考慮使用 WebP — 在相同品質下獲得更小的檔案
- 依內容調整 — 照片可以壓得更多，文字圖片要保守
- 測試行動裝置 — 在手機螢幕上檢查壓縮效果，小螢幕通常更寬容
結語
找到最佳壓縮比不是猜測，而是一個可以科學量化的過程。理解 SSIM 指標、了解不同品質設定的效果、並針對你的內容類型做出相應調整，你就能在品質與大小之間取得最佳平衡。
參考文獻
- Wang, Z., Bovik, A. C., Sheikh, H. R., & Simoncelli, E. P. "Image Quality Assessment: From Error Visibility to Structural Similarity." IEEE Transactions on Image Processing, vol. 13, no. 4, 2004. https://ieeexplore.ieee.org/document/1284395
- Mozilla. "Mozilla JPEG Encoder Project (mozjpeg)." GitHub, 2024. https://github.com/mozilla/mozjpeg
- Google. "WebP Compression Study." Google Developers, 2023. https://developers.google.com/speed/webp/docs/webp_study
- Google. "A New Image Format for the Web." Google Developers, 2023. https://developers.google.com/speed/webp