你有沒有遇過這樣的情況：截圖存成 PNG 之後，發現檔案竟然有 3MB；而同一張照片存成 JPG 只有 200KB，看起來卻幾乎一樣？或者，網站要求上傳「JPG 格式」，但你的圖示存成 PNG 才能保留透明背景？圖片格式的選擇不只是習慣問題，背後有一套清楚的邏輯。本文從壓縮原理出發，帶你一次搞清楚 JPG、PNG、WebP、GIF、SVG 的差異，以及在各種情境下該選哪一種。
1. 圖片格式的核心差異：壓縮方式
所有圖片格式的根本差異，在於它們如何儲存像素資訊，也就是壓縮方式的不同。壓縮分為兩大類：1.1 有損壓縮（Lossy Compression）
有損壓縮會丟棄人眼較難察覺的細節，換取更小的檔案大小。JPG 是最典型的例子。壓縮率可以很高，但一旦儲存就無法完整還原原始資料——每次重新編輯再儲存，畫質都會進一步降低（稱為「世代損耗」）。
1.2 無損壓縮（Lossless Compression）
無損壓縮保留所有像素資訊，解壓後可以完整還原原始影像。PNG 採用這種方式。檔案通常比有損格式大，但畫質完全不受影響，重複編輯不會累積損耗。
壓縮不等於畫質差
選對格式才是關鍵。照片用 JPG 有損壓縮，視覺上幾乎無差異但檔案極小；圖示用 PNG 無損壓縮，邊緣銳利且支援透明。用錯格式才會讓人覺得「圖片畫質很差」或「檔案大得莫名其妙」。
2. 主流格式逐一解析
2.1 JPG / JPEG
全名：Joint Photographic Experts Group（1992 年）
壓縮方式：有損
透明支援：不支援
動畫支援：不支援
JPG 是全球使用最廣的照片格式，針對「連續色調」（顏色漸變豐富的照片）設計，壓縮效果極佳。一張 5MB 的數位相機照片，以 80% 品質存成 JPG 通常只剩 300–600KB，肉眼幾乎看不出差異。
適合：照片、社群媒體貼文圖、背景圖、任何顏色豐富的影像
不適合：需要透明背景的圖示、文字截圖（壓縮後文字邊緣會模糊）、需要多次編輯的工作檔
2.2 PNG
全名：Portable Network Graphics（1996 年）
壓縮方式：無損
透明支援：支援（Alpha 通道，最高 256 層透明度）
動畫支援：不支援（APNG 擴展格式支援）
PNG 設計用來取代早期的 GIF，在需要透明背景或像素精確的場景下是首選。網頁上的 Logo、圖示、按鈕幾乎都是 PNG 格式。
PNG 的缺點是對照片類內容壓縮效率低——同一張照片存成 PNG 可能比 JPG 大 5–10 倍，因為無損壓縮保留了大量顏色細節。
適合：圖示、Logo、截圖、需要透明背景的素材、文字圖層、示意圖
不適合：照片（檔案太大）、需要最小化頻寬的場景
2.3 WebP
開發者：Google（2010 年）
壓縮方式：有損與無損均支援
透明支援：支援
動畫支援：支援
WebP 是 Google 為現代網頁設計的格式，目標是「比 JPG 更小、比 PNG 更有彈性」。有損 WebP 平均比同畫質的 JPG 小 25–35%；無損 WebP 比 PNG 小約 26%。現代主流瀏覽器（Chrome、Firefox、Safari、Edge）全部支援 WebP。
適合：網頁圖片優化、需要同時支援透明與動畫的場景
不適合：需要廣泛相容性的舊系統（iOS 14 以前不支援）、需要以 Photoshop 等傳統軟體編輯的工作流程
2.4 GIF
全名：Graphics Interchange Format（1987 年）
壓縮方式：無損（但限制 256 色）
透明支援：支援（但只有全透明或全不透明，無半透明）
動畫支援：支援（這是 GIF 仍存在的主要原因）
GIF 的 256 色限制讓它在表現照片時嚴重失真，但在社群媒體上做短動畫迴圈時仍然普及——主要是因為各平台的「GIF 貼圖」功能已深入人心。技術上，動態 WebP 或 APNG 比 GIF 效率更高，但生態系統慣性讓 GIF 持續存在。
適合：簡單的動態表情包、社群媒體動態貼圖
不適合：照片、需要超過 256 色的圖片、需要半透明效果的場景
2.5 SVG
全名：Scalable Vector Graphics（1999 年）
格式類型：向量（非點陣圖）
透明支援：支援
動畫支援：支援（CSS 或 SMIL 動畫）
SVG 與其他格式本質不同——它不是記錄像素，而是用數學方程式描述形狀、路徑和顏色。因此 SVG 可以無限放大而不失真，且檔案通常非常小（適合圖示和 Logo）。缺點是它無法表示照片類的複雜影像，且需要瀏覽器渲染支援。
適合：圖示、Logo、插圖、資訊圖表、任何需要在不同尺寸顯示的圖形
不適合：照片、點陣圖藝術作品
3. 格式比較一覽
格式壓縮透明動畫最佳用途JPG有損否否照片、色彩豐富的影像PNG無損是否圖示、截圖、透明背景WebP兩者均可是是網頁圖片優化（現代瀏覽器）GIF無損（256色）部分是簡單動態圖SVG向量是是圖示、Logo、插圖
4. 使用情境選擇指南
4.1 上傳社群媒體貼文圖
用 JPG。社群平台（Instagram、Facebook、Twitter）在上傳時會自行壓縮圖片，用 PNG 上傳反而可能因為檔案過大導致平台二次壓縮效果更差。以 80–90% 品質的 JPG 上傳通常是最佳選擇。
4.2 網站 Logo 或圖示
用 SVG（如果是向量圖）或 PNG（如果是點陣圖）。兩者都能保留透明背景，SVG 還能隨意縮放不失真。
4.3 網頁內嵌圖片（優化載入速度）
用 WebP，搭配 JPG 或 PNG 作為降級備案（使用 HTML 的 <picture> 元素）。現代瀏覽器全部支援 WebP，舊瀏覽器則自動回退到 JPG/PNG。
4.4 截圖或文字圖片
用 PNG。文字邊緣銳利，不會因有損壓縮而出現「毛邊」或模糊。
4.5 動態表情圖
視平台而定。大多數社群平台接受 GIF；如果可以選擇，WebP 動畫比 GIF 效率更高、品質更好。
5. 常見問題
JPG 存檔後畫質降低，能還原嗎？
不行。有損壓縮是不可逆的——資料已被丟棄，無法從 JPG 還原原始影像。這也是為什麼編輯照片時應該保留 RAW 或 PSD 等原始格式，只在最終輸出時才存成 JPG。
為什麼同一張圖，PNG 比 JPG 大很多？
因為照片包含數百萬種顏色漸變，JPG 的有損壓縮演算法對這類內容特別有效率；而 PNG 的無損壓縮必須保留每一個像素的精確顏色值，所以對照片類內容壓縮比非常差。
圖片工具可以轉換格式嗎？
可以。現代線上圖片工具支援在 JPG、PNG、WebP 等格式之間相互轉換，且全程在瀏覽器內完成，不需要安裝軟體、也不需要上傳到伺服器，隱私更有保障。
6. 小結
選擇圖片格式的核心邏輯其實很簡單：
- 照片 → JPG（小檔案，夠用就好）
- 圖示 / 截圖 / 透明背景 → PNG（無損，精準）
- 網頁優化 → WebP（兩者兼顧，現代首選）
- 向量圖形 → SVG（無限縮放，最小的圖示格式）
- 動態迴圈 → GIF 或 WebP 動畫（視平台支援而定）
下次在存圖之前，先想一下這張圖片的主要用途——是照片還是圖示、是否需要透明背景、是否要在網頁上快速載入——然後選擇對應的格式，就能同時兼顧畫質和檔案大小。
