圖片格式怎麼選？JPG、PNG、WebP、GIF、SVG 完整比較
選對圖片格式，往往比反覆調整壓縮參數更有效。同一張圖用錯格式，檔案可能大上三五倍，或是失去透明背景。
五種格式速覽
| 格式 | 壓縮 | 透明 | 動畫 | 最適合 |
|---|---|---|---|---|
| JPG | 失真 | ❌ | ❌ | 照片 |
| PNG | 無失真 | ✅ | ❌ | 截圖、去背圖 |
| WebP | 兩者皆可 | ✅ | ✅ | 網頁（幾乎全面最佳） |
| GIF | 無失真(256色) | ✅(單色) | ✅ | 簡單動圖 |
| SVG | 向量 | ✅ | ✅ | 圖示、Logo、圖表 |
決策流程
- 是圖示、Logo 或簡單圖形嗎？→ 用 SVG（可無限縮放不失真，檔案通常只有幾 KB）
- 需要動畫嗎？→ 用 動態 WebP；相容性優先才用 GIF
- 需要透明背景嗎？→ 用 WebP；對方不支援才退回 PNG
- 是照片嗎？→ 用 WebP；需廣泛相容才用 JPG
- 是文字或線條為主的截圖？→ 用 PNG 或無失真 WebP
你會發現答案幾乎都是 WebP——因為它確實是目前網頁用途的最佳選擇。
為什麼截圖不該用 JPG
JPG 的壓縮演算法是針對「自然照片」設計的，它假設相鄰像素的變化是平緩的。但截圖裡有大量銳利的文字邊緣與純色區塊，正好違反這個假設，結果就是：
- 文字周圍出現淡淡的雜訊光暈
- 純色背景出現不該有的色斑
- 檔案還不見得比 PNG 小
截圖請用 PNG 或 WebP。
為什麼照片不該用 PNG
反過來，PNG 是無失真格式，必須完整保留每個像素的資訊。照片有數百萬個各不相同的像素，PNG 沒有任何簡化空間，結果檔案會是 JPG 的三到五倍，但肉眼看起來沒有差別。
實際檔案大小比較
同一張 1200 × 800 的風景照片：
| 格式 | 檔案大小 | 備註 |
|---|---|---|
| PNG | 2.1 MB | 無失真，浪費 |
| JPG 90% | 420 KB | 肉眼幾乎無損 |
| JPG 80% | 240 KB | 網頁常用 |
| WebP 80% | 165 KB | 同畫質更小 |
GIF 的處境
GIF 只有 256 色，照片轉成 GIF 會出現嚴重色階斷層。它今天唯一的優勢是相容性——幾乎所有平台都支援。若你的用途允許，動態 WebP 或短影片（MP4）在畫質與檔案大小上都遠勝 GIF。
SVG 的特別之處
SVG 不是點陣圖，而是用數學描述形狀的向量格式。因此它：
- 可以無限放大而不失真
- 檔案通常極小（幾 KB）
- 可以用 CSS 改變顏色
- 但不適合照片
網站的圖示與 Logo 應該優先使用 SVG。
相關工具
PNG／JPG 轉 WebP、轉換至 JPG、JPG 轉 PNG。想更深入了解 WebP，可以看WebP 是什麼？