# 前端必備！圖像格式完全指南：JPG、PNG、WEBP、SVG 怎麼選？ - WEBP 為什麼比 JPG 小 30%？理解點陣圖與向量圖，並掌握 Lazy Loading 關鍵策略

作為前端工程師，我們每天都在處理圖片：Banner、logo、icon、插畫、商品照......
但你有沒有遇過這種情況：

> 「這張圖到底要存成 JPG 還是 PNG？」
> 「聽說 WebP 比 JPG 還省空間？但這又是為什麼呢？」
> 「SVG 是圖片還是程式碼呢？」

當設計師丟給你一堆 `.jpg`、`.png`、`.svg`、`.webp` 時，
你有沒有想過這些格式到底有什麼差別？🤔

這篇文章會用淺顯易懂的方式，一次搞懂最常用的四種圖片格式：JPG、PNG、WEBP、SVG，並分享我在專案中實際怎麼選。

## 圖片有兩大類：點陣圖 vs 向量圖
在理解各種格式前，我們要先搞懂圖片其實分成兩種型態：

| 類型 | 說明 | 放大效果 | 常見格式 |
| ----------- | -------- | -------- | -------- |
| 點陣圖（Raster Image） | 用像素組成，每個像素都有顏色資訊 | 放大會失真（出現馬賽克）| JPG/JPEG、PNG、WEBP、GIF |
| 向量圖（Vector Image） | 用數學公式描述線條與形狀 | 無論多大都清晰 | SVG、PDF |

> 點陣圖就像拼圖，每一個小方格（pixel）代表一個顏色；
> 向量圖則像是「畫圖指令」，告訴電腦：「從這裡畫一條線到那裡，用藍色」。

## 點陣圖家族：JPG/JPEG、PNG、WEBP
點陣圖適合真實影像，例如照片或漸層豐富的背景。
但不同格式，針對「**壓縮方式**」與「**透明度支援**」的處理不太一樣。
### 1. JPG/JPEG
類型：點陣圖
壓縮：有損壓縮（犧牲一點畫質換更小的檔案）
透明背景：不支援
特色：顏色豐富、體積小

JPG 最適合照片類影像，它的演算法會捨棄人眼不易察覺的的細節，因此在畫質差不多的情況下，能把檔案縮得很小。

✅ 適合用在：
* 攝影照片、商品照
* Banner 背景圖

❌ 不建議用在：
* icon、logo、文字（容易糊掉）
* 需要透明背景的圖

**💡 小知識**
**JPG 跟 JPEG 的差別是什麼？**
JPG 跟 JPEG 其實是一樣的格式，只是名字不同。

**為什麼會有兩種名字？**
早期 Windows 檔案系統只能接受 3 個字的副檔名：`.doc`、`.exe`、`.jpg`...，所以 JPEG 被縮短成 `.jpg`。
macOS / Linux 沒有限制，所以 `.jpeg` 一直都能用。

本質上沒有任何品質、壓縮、用途上的差別，就只是歷史命名習慣不同而已。

### 2. PNG
類型： 點陣圖
壓縮： 無損壓縮（保留所有像素資訊）
透明背景：支援
特色：保真度高，但檔案較大

PNG 支援透明背景，因此常見於 logo、按鈕或 UI 元件。

✅ 適合用在：
* 需要透明背景圖
* 有多種色彩 & 形狀的 logo、icon

❌ 不建議用在：
* 大尺寸照片（載入慢）

### 3. WEBP
類型： 點陣圖
壓縮： 有損或無損皆可
透明背景：支援
特色：檔案最小、畫質好、支援動畫

Google 推出的 WebP 幾乎是「集合 JPG + PNG + GIF 於一身」的現代格式。它能在相同畫質下，比 JPG 小約 30%，還能支援透明度與動圖。

✅ 適合用在：
* 網頁的所有靜態圖片 👑
* 想要擁有較佳的 SEO

**💡 注意事項：**
老舊瀏覽器（Safari 13 以下）不支援

**💡 為什麼對 SEO 有幫助？**
因為 WebP 檔案更小、載入更快，而頁面速度會影響 Google 排名。
雖然使用 WebP 不會直接加 SEO 分數，但 WebP 讓網頁載入速度變快，因此讓 SEO 變好。

**💡 為什麼比 JPG 小約 30%？**
WebP 採用了比 JPG 更先進的預測編碼（Predictive Coding）技術，它能更有效地「預測」相鄰像素的顏色並只記錄差異，因此在有損壓縮下，比 JPG 小約 30%。

此外，WebP 的無損壓縮也比 PNG 具備更高的壓縮率，同樣能支援透明度，因此能完全取代這兩種舊格式。

## 向量圖家族：SVG
向量圖不靠像素，而是由「座標 + 路徑」組成。
例如這段 SVG 代表一個圓形：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>

類型： 向量圖
壓縮： 無損壓縮（永遠清晰，不會模糊）
透明背景：支援
特色：
* 透過 CSS/JS 控制，可以改顏色、做動畫
* 體積超小（icon 通常只有幾 KB）
* 可被壓縮成 inline code，方便直接嵌入 HTML

放大再多倍都不會糊，因為它會重新「用數學」畫出圖形。

✅ 適合用在：
* logo、icon、插畫
* 動畫（例如 hover 效果、loading）

❌ 不建議用在：
* 攝影或漸層過多的圖片（因為會變成幾千條 path，非常重）

## Lazy Loading：圖片格式之外的另一個前端武器
選對圖片格式是第一步，但真正影響網站體驗與 SEO 的，除了格式，也包含載入策略。

Lazy loading 就是其中一個關鍵技巧：
> 不一次把所有資源載入，而是用到時才載，這樣頁面能更快顯示、減少流量、提升用戶體驗。

這對大量圖片的網站尤其重要，例如電商商品牆、Blog 列表、社群貼文等。

### HTML 原生 Lazy Loading
這是現代瀏覽器最簡單的方式：

<img src="photo.jpg" alt="範例圖片" loading="lazy">

**那 loading="lazy" 原理是什麼呢？**
瀏覽器會監控視窗範圍，圖片在接近使用者視窗時才下載。

簡單流程：
* 圖片不在視窗附近 $\rightarrow$ 不下載
* 快滑到圖片 $\rightarrow$ 開始預載
* 進入視窗 $\rightarrow$ 顯示

### Lazy Loading 什麼時候不要用？
* 首圖 / Hero banner / 背景圖
原因：
這些屬於頁面關鍵視覺元素，會直接影響使用者第一眼的觀感。若延遲載入，會造成版面空白、跳動，對 SEO 造成負面影響。
* 小圖 SVG icon
原因：
* 檔案非常小，載入成本低，如果用 lazy loading 瀏覽器反而要做更多事
* 使用者體驗變差
icon 常出現在按鈕、導航列、表單控制上。若延遲載入會造成按鈕顯示空白、版位跳動或無法辨識，破壞互動體驗。
* 關鍵 CTA 圖片
原因：
會直接影響使用者行為、點擊、購買、註冊的圖片或視覺元素。如果這張圖慢載、沒出現、或顯示延遲，很有可能會降低轉換率（conversion）。
* 關鍵 UI 元素（logo / navigation / 主要 UI icon）
原因：
這些元素屬於界面框架的一部分，必須立即呈現。若延遲載入，會造成介面短暫缺圖、空白或跳動現象，影響整體體驗與網站可信度。

## 結語
在前端開發中，圖片格式不只是設計問題，而是效能優化的一環。
> 想要速度快：WebP
> 要透明：PNG
> 要可縮放：SVG
> 要相容性：JPG/JPEG

下次在處理圖片前，可以先問問自己：「這張圖的本質是什麼？」，理解點陣圖與向量圖的差異、好好挑選圖片格式，再配合 lazy loading，使用者體驗將會有大大的不同。