圖片格式會影響檔案大小、透明背景與顯示品質。使用圖片格式轉換器可在 JPG、PNG、WebP 之間轉換,再比較結果。這篇文章先說明三種格式在技術上到底差在哪裡,再依實際用途整理選擇方式,最後提醒幾個轉檔時常見的誤會。
先懂兩個觀念:有損與無損、透明度
有損壓縮會捨棄一部分人眼比較不容易察覺的細節來換取更小的檔案。壓得越多,檔案越小,但畫質也越差,而且捨棄的資料無法復原。
無損壓縮則完整保留每一個像素的顏色,解開之後和原圖完全相同,代價是檔案通常比較大。
透明度是指圖片能不能有「沒有顏色」的區域,讓後面的背景透出來。去背的商品圖、Logo、貼圖都需要透明度。
三種格式的特性
| 項目 | JPG | PNG | WebP |
|---|---|---|---|
| 壓縮方式 | 有損 | 無損 | 有損與無損都支援 |
| 透明背景 | 不支援 | 支援 | 支援 |
| 動畫 | 不支援 | 一般不用於動畫 | 支援 |
| 擅長的內容 | 照片、漸層豐富的影像 | 線條、文字、色塊、截圖 | 兩類都可以 |
JPG
JPG(也寫作 JPEG)採用有損壓縮,特別擅長處理顏色變化細膩的照片:風景、人像、食物照,在適當的品質設定下檔案可以縮得很小,肉眼仍然看不太出差別。
它的弱點有三個。第一,不支援透明背景。第二,遇到銳利的邊緣,例如文字或線條,周圍容易出現雜點與模糊。第三,每次重新編輯再存成 JPG 都會再壓縮一次,反覆存檔之後畫質會逐漸變差。
PNG
PNG 是無損格式,並且支援透明背景。文字、圖示、介面截圖這類邊緣銳利、顏色區塊分明的圖片,用 PNG 存可以保持清楚,檔案也不會太大。
但 PNG 不適合存照片。照片的顏色變化太複雜,無損壓縮的效果有限,同一張照片存成 PNG,檔案通常會比 JPG 大上許多。
WebP
WebP 是比較新的格式,同時支援有損與無損壓縮,也支援透明背景和動畫。在相近的畫質下,WebP 的檔案通常比 JPG 或 PNG 小,所以很適合用在網頁上。
需要注意的是相容性。目前主流瀏覽器都能顯示 WebP,但部分較舊的軟體、列印服務或上傳系統可能只接受 JPG 和 PNG。如果圖片要交給別人或上傳到指定系統,先確認對方接受的格式。
三種格式的用途
| 格式 | 適合情況 |
|---|---|
| JPG | 手機照片、風景、人像。 |
| PNG | Logo、截圖、文字、透明背景。 |
| WebP | 網站圖片,兼顧容量與品質。 |
怎麼選?
照片優先試 JPG 或 WebP;有透明背景或小字的設計圖優先試 PNG 或 WebP。不要把 JPG 轉 PNG 期待畫質變好,格式轉換無法補回已失去的細節。
如果還是不確定,可以依序問自己三個問題:
- 需要透明背景嗎? 需要的話,JPG 直接排除,選 PNG 或 WebP。
- 內容是照片,還是文字與圖形? 照片選 JPG 或有損的 WebP;文字、圖示與截圖選 PNG 或無損的 WebP。
- 圖片要用在哪裡? 放在自己的網站,優先考慮 WebP;要寄給別人、放進文件或上傳到不確定支援度的系統,選 JPG 或 PNG 最保險。
常見情境對照
- 手機拍的照片要寄給家長或同事:JPG。幾乎所有裝置都能開。
- 教學簡報裡的螢幕截圖:PNG。文字邊緣清楚,放大也不容易糊。
- 學校或班級網站的活動照片:WebP 或 JPG。先縮到適當尺寸再上傳。
- 去背的校徽或 Logo:PNG 或 WebP,保留透明背景。
- 要送印的海報或相片:依印刷廠商或沖印店的要求,通常是 JPG 或 PNG。
轉檔時常見的誤會
誤會一:轉成 PNG 畫質會變好
JPG 存檔時捨棄的細節已經不在檔案裡,轉成 PNG 只是把「已經壓縮過的畫面」原封不動地保存下來,不會變清楚,檔案反而通常變大。想要好畫質,要回頭找原始檔。
誤會二:透明背景轉成 JPG 還會是透明的
JPG 沒有透明度,透明的區域一定會被填上顏色。使用本站的轉換工具把透明的 PNG 或 WebP 轉成 JPG 時,透明區域會填成白色。如果圖片之後要放在深色背景上,就不適合轉成 JPG。需要這類轉換時,可以直接使用PNG 轉 JPG。
誤會三:WebP 一定比較小
多數情況下是,但不是絕對。檔案大小取決於圖片內容與品質設定,把一張已經壓得很小的 JPG 用高品質轉成 WebP,檔案有可能不減反增。最可靠的方法是實際轉一次,比較兩個檔案的大小與畫質。可以用JPG 轉 WebP試試看。
誤會四:反覆轉檔沒有影響
在有損格式之間來回轉換,例如 JPG 轉 WebP 再轉回 JPG,每一次都會再損失一些細節。原則是保留一份原始檔,每次都從原始檔輸出需要的格式,而不是拿轉過的檔案再轉。
轉換後檔案仍太大
先調整到實際使用尺寸,再用圖片壓縮器壓縮。網頁圖片通常可優先測試 WebP。
影響檔案大小最大的因素往往是像素尺寸,而不是格式。寬和高各縮成一半,像素數量就只剩四分之一。所以比較有效率的順序是:
- 用圖片尺寸調整工具把圖片縮到實際需要的寬高。做法可以參考圖片尺寸調整教學。
- 選擇適合內容的格式。
- 最後再調整品質或壓縮。例如品質從最高往下調一些,檔案通常會明顯變小,而畫面差異不容易察覺;實際效果依圖片內容而不同,建議下載後放大檢查文字與邊緣。
更完整的壓縮做法可以看圖片壓縮教學。
小結
- JPG:有損、不支援透明,適合照片,相容性最好。
- PNG:無損、支援透明,適合文字、圖示與截圖,存照片檔案會很大。
- WebP:有損與無損都支援,也支援透明與動畫,檔案通常較小,適合網頁。
- 格式轉換無法找回已經失去的細節,請保留原始檔。
不確定哪一種格式適合手上的圖片時,用圖片格式轉換器各轉一份,實際比較檔案大小與畫質,是最直接的判斷方式。