JPG、PNG、WebP 怎麼選？透明背景、畫質、檔案大小與網站用途完整比較

同一張圖片可以是 .jpg、.png 或 .webp，但三個格式不是只有副檔名不同。

速答：JPG、PNG、WebP 怎麼選？
JPG 適合照片與漸層，檔案通常小、相容性高，但不支援透明；PNG 使用無損壓縮，適合透明背景、文字、介面截圖與線條圖；WebP 支援有損、無損、透明與動畫，網站使用通常能取得良好壓縮效率，但轉成 WebP 不保證每一張一定比已最佳化 JPG 小。應比較實際 bytes 和畫質，而不是只看副檔名。

一、JPG 是什麼？

JPEG 是最常見的有損照片格式之一。

特色：

擅長照片；
漸層效果好；
檔案通常小；
平台相容性高；
不支援 alpha transparency。

二、PNG 是什麼？

PNG 使用無損壓縮。

特色：

可精確保留像素；
支援透明；
適合線稿；
適合截圖；
適合 UI；
照片容量常比 JPG 大。

三、WebP 是什麼？

WebP 支援：

Lossy；
Lossless；
Transparency；
Animation。

現代主要瀏覽器支援已很廣泛。

四、一張表比較

特性	JPG	PNG	WebP
有損壓縮	是	否	可
無損	否	是	可
透明	否	是	是
照片	很適合	通常較大	很適合
截圖文字	普通	很適合	適合
網站	適合	特定內容	很適合
動畫	否	APNG另論	支援

五、照片為什麼常用 JPG？

照片有大量自然色彩與漸層。

JPEG 可以犧牲部分人眼較不敏感的細節，換取更小檔案。

典型：

人像；
商品照；
旅遊照；
場景照片。

六、文字／圖表為什麼 PNG 常更漂亮？

黑字白底、細線、高對比邊緣在 JPEG 有損壓縮下可能出現：

halo；
ringing；
block artifact；
模糊。

PNG 會更忠實保留像素。

七、透明背景需要什麼格式？

JPG：

不支援 alpha channel。

因此透明 Logo 更適合：

PNG；
WebP；
SVG（若有向量來源）。

如果轉 JPG，就必須把透明區域填成某個實際顏色。

八、WebP 一定比 JPG 小嗎？

不一定。

雖然 WebP 在許多照片情境有優秀壓縮效率，但單張圖片仍取決於：

原 JPG 品質；
編碼器；
圖片內容；
WebP 品質設定。

FunnyTools JPG to WebP 會顯示原始與輸出 bytes。若 WebP 更大：

不需要硬轉。

九、PNG 轉 JPG 可以大幅變小嗎？

如果 PNG 是照片：

常常可以。

如果 PNG 是：

Logo；
UI；
透明圖；
文字圖；

則要先看畫質與透明度需求。

十、JPG 轉 PNG 會變清楚嗎？

不會。

JPG 已經失去的資訊，不會因改成 PNG 自動恢復。

它只是把「目前解碼後的像素」以無損 PNG 再儲存。

十一、WebP 轉 JPG 會失去什麼？

可能失去：

透明度；
動畫；
部分壓縮效率。

FunnyTools WebP to JPG 目前產生的是：

靜態 JPG。

透明區域需要指定背景色。

十二、JPG 轉 WebP 會自動透明嗎？

不會。

JPG 沒有 alpha。

轉成 WebP 不會自動辨識：

「白色背景 = 應該透明」。

去背是另一種影像處理，不是格式轉換。

十三、網站是不是全部 WebP 就最好？

不是。

網站圖片最佳化還需要：

適當像素；
srcset；
sizes；
lazy loading；
LCP priority；
cache；
CDN；
width / height attributes。

一張 6000px WebP 仍可能很慢。

十四、Logo 最好用 PNG 嗎？

如果有向量來源：

SVG 通常更理想。

Logo、icon、diagram 很適合 vector。

因此不應把所有 Logo 都強迫轉 PNG。

十五、圖片格式會影響 SEO 嗎？

主要是間接。

更小、更合適的圖片可能改善：

載入速度；
Core Web Vitals；
使用者體驗。

但副檔名不是排名魔法。

十六、什麼時候應保留原格式？

如果轉檔後：

沒有變小；
畫質下降；
透明度消失；
目標平台原本就支援；

保留原格式完全合理。

十七、改副檔名算轉檔嗎？

不算。

把：

image.webp

改成：

image.jpg

內部 bytes 仍然是 WebP。

系統檢查 MIME 或 file signature 仍會發現。

必須真正 decode + encode。

十八、metadata 會不會保留？

瀏覽器重新繪製並輸出圖片時，不保證保留：

EXIF；
GPS；
ICC；
Camera metadata；
comments。

所以轉檔副本不要取代 master archive。

十九、常見錯誤

錯誤 1：照片全部 PNG

檔案可能很大。

錯誤 2：透明 Logo 轉 JPG

透明會消失。

錯誤 3：以為 JPG→PNG 會變清楚

不會。

錯誤 4：以為 JPG→WebP 一定更小

不一定。

錯誤 5：WebP 就等於完成網站最佳化

錯。

錯誤 6：只改副檔名

不是真轉檔。

二十、快速選擇表

情境	優先考慮
一般照片	JPG / WebP
商品照網站	WebP +合理 fallback
透明 Logo	PNG / WebP / SVG
UI 截圖	PNG / WebP
圖表文字	PNG / WebP
舊系統只收 JPG	JPG
動態 WebP	保留 WebP，轉 JPG 會失動畫

二十一、FAQ

JPG 和 JPEG 一樣嗎？

一般使用上是同一類 JPEG 圖片。

PNG 一定比 JPG 清楚嗎？

不一定；PNG 不會增加來源不存在的細節。

WebP 一定最小嗎？

不一定，要比較實際輸出。

JPG 支援透明嗎？

不支援。

JPG 轉 PNG 能去背嗎？

不能。

WebP 可以透明嗎？

可以，但來源 JPG 不會因此自動去背。

二十二、延伸閱讀

下一步

先不要問哪個格式「最好」，先問圖片是照片、透明圖、文字圖還是網站素材。

重點速記

JPG = Photos PNG = Transparency / Sharp graphics WebP = Modern web compression