JPG、PNG、WebP 差在哪？一次搞懂常見圖片格式
同一張圖片存成 JPG 是 300 KB，存成 PNG 卻變成 2 MB；網站工程師說要改用 WebP，設計師又堅持 Logo 一定要給 SVG。圖片格式這麼多，到底差在哪裡？這篇文章從「壓縮方式」這個核心概念出發，帶你搞懂每種格式的特性，以後就知道該選哪一種。
先搞懂兩個關鍵概念：有損與無損
數位圖片本質上是一格一格的像素，每個像素記錄顏色。一張 1200 萬畫素的照片，如果每個像素原封不動地存下來，大約需要 36 MB。為了讓檔案變小，各種格式會用不同方式「壓縮」。
- 無損壓縮：像把衣服摺整齊放進行李箱，拿出來時跟原本一模一樣。PNG 就是無損格式。
- 有損壓縮：像把衣服真空壓縮，再挑掉一些不太會注意到的細節。檔案能變得非常小，但資料無法完全還原。JPG 是最典型的有損格式。
有損壓縮會利用人眼的特性：我們對亮度變化很敏感，對細微的色彩差異比較不敏感，因此 JPG 會優先捨棄色彩細節。這也是為什麼照片存成 JPG 看起來沒差，但文字截圖存成 JPG 時，字的周圍會出現髒髒的雜點。
JPG：照片的萬用格式
JPG（也寫作 JPEG）從 1992 年使用至今，幾乎所有裝置、軟體、網站都支援。它很適合色彩變化豐富、沒有銳利邊緣的照片。
- 優點：相容性最好、照片檔案小、可以用品質參數控制大小。
- 缺點：不支援透明背景；每重新儲存一次就再損失一次畫質；文字和線條邊緣容易出現雜訊。
- 適合：數位相機照片、要寄給長輩或上傳到各種系統的圖片。
PNG：截圖與 Logo 的首選
PNG 使用無損壓縮，並支援完整的透明度（Alpha 通道），所以去背的圖片幾乎都用 PNG。它特別擅長大面積單色、邊緣銳利的圖像，例如螢幕截圖、圖表、介面設計稿。
- 優點：畫質完全不損失、支援半透明、文字清晰。
- 缺點：存照片時檔案非常大，往往是 JPG 的 5～10 倍。
- 適合：截圖、去背素材、Logo、需要反覆編輯的中間檔。
WebP：為網路而生的新格式
WebP 由 Google 在 2010 年推出，目標是讓網頁圖片更小。它同時支援有損與無損兩種模式，也支援透明背景和動畫，等於把 JPG、PNG、GIF 的功能合而為一。根據 Google 公布的測試，有損 WebP 比同畫質的 JPG 小約 25%～34%，無損 WebP 比 PNG 小約 26%。
現在主流瀏覽器都已支援 WebP，所以經營網站或部落格時，把圖片轉成 WebP 是加快載入速度最簡單的方法之一，對搜尋排名也有幫助。不過部分舊版軟體（例如較舊的 Office 或看圖程式）可能打不開，要寄給別人時還是用 JPG 比較保險。
其他常見格式
| 格式 | 特性 | 適合用途 |
|---|---|---|
| GIF | 最多 256 色、支援簡單動畫與透明（不支援半透明） | 簡單動圖、表情符號；照片不適合 |
| HEIC | iPhone 預設格式，檔案約為 JPG 的一半 | 手機拍照儲存；分享前常需轉 JPG |
| AVIF | 比 WebP 更新、壓縮率更高的格式 | 新式網站；相容性仍在提升中 |
| SVG | 向量格式，記錄的是線條與形狀而不是像素 | Logo、圖示、插畫；放大不失真 |
| BMP | 幾乎不壓縮 | 舊系統相容需求，一般不建議 |
| ICO | 可以在一個檔案裡放多種尺寸 | 網站 favicon、Windows 程式圖示 |
情境選擇建議
- 手機照片要傳給別人：JPG，品質 85% 左右。
- 網站或部落格的圖片：WebP；照片用有損、圖表用無損。
- 螢幕截圖、教學圖：PNG，文字最清楚；要放網站可再轉 WebP。
- 去背商品圖：PNG 或 WebP，千萬不要存成 JPG，否則背景會變成白色。
- 公司 Logo：保留 SVG 原檔，需要時再輸出成指定尺寸的 PNG。
- 網站 favicon：ICO（同時包含 16、32、48 等尺寸），或 SVG。
一個常見的錯誤：反覆存 JPG
每次用修圖軟體打開 JPG、修改、再存成 JPG，都會重新壓縮一次，細節就會再少一點。經過好幾輪轉存、在通訊軟體之間轉傳的圖片，常常會出現明顯的色塊。建議的做法是：原始檔用 PNG 或相機原檔保存，編輯過程也用無損格式，只在最後要發布時輸出一次 JPG 或 WebP。
結論
記住一個簡單原則就好：照片用 JPG 或 WebP，線條與文字用 PNG，放大不能糊的用 SVG。需要轉換格式時，可以使用本站的圖片格式轉換工具，在瀏覽器裡就能完成，不需要安裝軟體，也不用擔心照片被上傳。