JPEG、PNG、WebP、AVIF:選擇正確的圖片格式

你匯出一張圖片。選項有 JPEG、PNG、WebP、GIF、AVIF、SVG 等等。

它們都產生圖片。它們不能互換。

JPEG:照片標準

最適合: 照片、具有漸層的複雜圖片、任何有很多顏色的東西。

避免用於: 文字、Logo、螢幕截圖、任何有銳利邊緣的東西。

JPEG 使用有損壓縮。它丟棄你在照片中可能不會注意到的資料。但它在銳利邊緣上掙扎——文字看起來模糊,Logo 有偽影。

品質設定很重要。80-85% 通常是最佳點。低於 60%,壓縮偽影變得明顯。

PNG:銳利邊緣和透明度

最適合: 螢幕截圖、Logo、帶有文字的圖形、需要透明度的圖片。

避免用於: 大型照片(檔案變得巨大)。

PNG 使用無損壓縮。每個像素都被精確保留。適合銳利邊緣,對複雜圖片的檔案大小來說很糟糕。

PNG-8 (256 色) vs PNG-24 (數百萬色)。盡可能使用 8。

WebP:現代折衷方案

最適合: 網頁上的幾乎所有東西。

避免用於: 當你需要與舊瀏覽器的最大相容性時。

WebP 同時進行有損和無損壓縮,通常比相同品質的 JPEG 或 PNG 小 25-35%。

瀏覽器支援現在非常好。使用 WebP 並為古老的瀏覽器提供 JPEG/PNG 回退。

AVIF:最新且最小

最適合: 以良好品質實現最大壓縮。

避免用於: 瀏覽器支援要求、編碼速度問題。

AVIF 實現了比 WebP 更好的壓縮。但編碼較慢,瀏覽器支援仍在增長。

如果你可以提前生成格式(靜態網站),使用 AVIF 並提供回退。

GIF:移動圖片、有限顏色

最適合: 簡單動畫、非常簡單的圖形。

避免用於: 照片(256 色限制)、大型動畫(巨大的檔案)。

GIF 的動畫支援讓它保持活力。但最多 256 色意味著照片看起來很糟糕。

對於動畫,MP4 或 WebM 影片通常更小且品質更好。

SVG:向量圖形

最適合: 圖示、Logo、插圖、任何需要縮放的東西。

避免用於: 照片、複雜圖片。

SVG 不是點陣圖格式。它是描述形狀的 XML。縮放到任何大小而不會失去品質。

對於圖示和 Logo,SVG 幾乎總是正確的選擇。

快速決策指南

| 內容類型 | 格式 | |-------------|--------| | 網頁照片 | WebP (JPEG 回退) | | 螢幕截圖 | PNG | | Logo/圖示 | SVG | | 簡單動畫 | GIF 或動畫 WebP | | 複雜動畫 | MP4/WebM 影片 | | 最大品質存檔 | PNG |

常見錯誤

所有照片都用 PNG。 一個 10MB 的 PNG 可能是一個 500KB 的 JPEG,沒有可見的差異。

螢幕截圖用 JPEG。 文字變得模糊。使用 PNG。

2026 年不使用 WebP。 瀏覽器支援非常好。使用它。

重複儲存 JPEG。 每次儲存都會增加壓縮偽影。保留原始檔案並匯出一次。

---

格式選擇是特定於圖片的。照片是 JPEG/WebP。圖形是 PNG/SVG。理解權衡並相應地選擇。