Engineering · 1 min read
圖片格式速查表
一張表看懂七種常見圖片格式——JPEG、PNG、GIF、WebP、AVIF、SVG、TIFF——比較壓縮、透明、動畫與色彩，選輸出格式不再重查。
每次要選輸出格式，我都得重查一次「這個格式到底支不支援透明、能不能動」。乾脆把它壓成一張表：
| 格式 | 壓縮 | 透明 | 動畫 | 色彩 | 最適合 |
|---|---|---|---|---|---|
| JPEG（.jpg/.jpeg） | 有損 | ✗ | ✗ | full RGB | 照片，漸層平順、不需要透明 |
| PNG（.png） | 無損 | ✓ | ✗（APNG 少見） | full／調色盤 | 圖形、logo、截圖、透明 |
| GIF（.gif） | 無損、≤256 色 | 只有 1-bit | ✓ | 調色盤 | 簡單短動畫（老格式） |
| WebP（.webp） | 有損或無損 | ✓ | ✓ | full | 網頁全能，一個打 JPEG＋PNG＋GIF |
| AVIF（.avif） | 有損或無損 | ✓ | ✓ | full + HDR | 壓縮最好，但編碼較慢 |
| SVG（.svg） | 向量（純文字） | ✓ | ✓（CSS/JS） | 任意 | icon、logo、線稿，無限縮放 |
| TIFF（.tif） | 無損、多頁 | ✓ | 多頁 | full + 16-bit | 印刷／典藏，檔案很大 |
選格式的直覺：
- 照片 → JPEG（想更小就 WebP／AVIF）。
- 要透明、或是銳利的圖形／文字 → PNG（或無損 WebP）。
- 要會動 → WebP／AVIF；除非有老舊目標逼你，才用 GIF。
- 要能乾淨縮放的 logo／icon → SVG。
副檔名決定的是能力邊界（能不能透明、能不能動），不是檔案大小。
參考來源：
Related： 搭配有損無損才是檔案大小關鍵與廣告投放讓格式優先序翻轉一起看，或回到裁切、縮放、填滿的四堂課總覽。