1. 首頁
2. 圖片格式

圖片格式比較：JPEG、PNG、WebP、AVIF

現代網頁上超過 99% 的點陣圖可歸入這四種格式。它們在壓縮、透明度、動畫與瀏覽器支援的取捨大不相同。以下提供實務選型指南。

並排比較

先看重點表格，各格式的詳細說明請見下方章節。

JPEG——最通用的基準

原理

JPEG（Joint Photographic Experts Group）於 1992 年標準化，是四者中最資深。它以 8×8 區塊做離散餘弦轉換等有損步驟，再以量化與熵編碼壓縮；品質常用 1–100 的單一數值控制。像 MozJPEG 等現代編碼器可在不改變位元流相容性的前提下，再擠出約 10–20% 體積，任何 JPEG 解碼器都能讀取。

適合

色調平順、細節豐富的攝影內容——人像、風景、商品照、全寬主視覺等。

優點

• 幾乎所有圖片檢視器與裝置都支援。
• 多數平台具硬體加速解碼。
• 最佳化工具生態成熟（MozJPEG、jpegli 等）。

缺點

• 無 alpha——透明背景須先平面化。
• 文字、線稿與銳利邊緣易出現區塊瑕疵。
• 每通道僅 8 位元。

PNG——無損且支援透明

原理

PNG（Portable Network Graphics）於 1990 年代中期為取代 GIF、避開專利而設計。它嚴格 無損：在逐列像素濾波後再以 DEFLATE 壓縮。像 oxipng（optipng 的 Rust 實作）會嘗試多種濾波與壓縮組合，在不改變任何像素的前提下尋找最小檔案。

適合

介面圖、圖示、螢幕擷圖、圖表、線稿、色塊單純的標誌，以及需要完整 alpha 的內容。

優點

• 無損——往返編碼像素完全一致。
• 完整 8 位元 alpha，每通道最高 16 位元。
• 瀏覽器與工具鏈普遍支援。

缺點

• 用在照片上往往比 JPEG／WebP／AVIF 大很多。
• 原始規格不含動畫（APNG 為後來延伸）。

WebP——以網頁為優先的格式

原理

WebP 由 Google 於 2010 年推出，源自 VP8，後來加入獨立的無損模式。單一容器可同時包含有損與無損，並可選 alpha 與動畫。有損模式在相近畫質下通常比 JPEG 小 25–35%；無損模式常比 PNG 小 20–30%。

適合

當 AVIF 相容性尚未足夠時的通用網頁出圖——照片、含透明的介面雪碧圖、GIF 動畫替代，以及作為 AVIF 之下的後援層。

優點

• 單一格式涵蓋照片、圖形、透明與動畫。
• 在相近畫質下明顯小於 JPEG 與 PNG。
• 2020 年起主流瀏覽器皆已支援。

缺點

• 每通道 8 位元——不適合 HDR 主流程。
• 部分低階裝置解碼比 JPEG 慢。

AVIF——目前壓縮率的領先者

原理

AVIF（AV1 Image File Format）是 AV1 視訊編碼的靜態圖檔，2019 年由開放媒體聯盟（AOMedia）相關陣營推進。支援最高 12 位元色彩、完整 alpha、HDR、廣色域與顆粒合成等。參考編碼器（aom-av1，由 libavif 使用）編碼較慢，但在真實照片上常能拿到現今主流格式中最佳的體積。

適合

主視覺、相簿，以及頻寬比 CPU 時間更珍貴的情境。很適合放在 <picture> 的最上層來源。

優點

• 壓縮率頂尖——照片常比 JPEG 小 40–60%。
• 支援 alpha、動畫、HDR、廣色域與 10／12 位元深度。
• 免權利金且開放規格。

缺點

• 編碼慢——大量出圖宜在建置時或非同步處理。
• Safari 至第 16 版（2022）才支援。
• 對合成圖、銳利線條不如 WebP 無損或 PNG 討喜。

我該用哪一種？

• 照片、滿版主視覺：以 AVIF 為主，並用 <picture> 提供 WebP、JPEG 後援。
• 需透明的介面圖（圖示、標誌）：相容性用 PNG；要更小體積可試 WebP 無損。
• 線稿、擷圖、圖表：PNG（或 WebP 無損）—— JPEG／AVIF 在銳利邊緣上較吃虧。
• 取代動態 GIF：WebP 或 AVIF——體積通常小很多且支援真透明。
• 今日要單一格式打天下：照片用 JPEG、圖形用 PNG——不一定最小，但相容成本最低。

實務上不必只選一種。在 <picture> 裡依序提供 AVIF、WebP，最後再放 JPEG 或 PNG——瀏覽器會挑自己能解且通常最小的那一份。