教學文章

JPG、PNG、WebP、AVIF 差在哪?網站、社群與印刷該用哪一種

約 4 分鐘艾迪爾工作室

「這張圖太大傳不上去」「網站載入好慢」「去背的圖存完背景變黑色」——這些問題多半不是圖片本身的錯,而是存錯了格式。

常見的點陣圖格式有四種:JPG、PNG、WebP、AVIF。它們的差別在於怎麼壓縮、能不能透明、以及哪些軟體讀得懂。搞清楚這三件事,就知道每種情況該選哪一個。

四種格式一覽

格式壓縮方式透明背景相容性最適合
JPG破壞性不支援幾乎所有地方照片、要給長輩或舊系統的圖
PNG無損支援幾乎所有地方去背圖、截圖、圖示、線稿
WebP破壞性或無損支援現代瀏覽器與多數 App網站上的照片與插圖
AVIF破壞性或無損支援較新的瀏覽器想把檔案壓到最小的網站

「破壞性壓縮」的意思是存檔時會丟掉一些肉眼不容易察覺的細節來換取更小的檔案;「無損」則是一個像素都不改,所以檔案通常大得多。

JPG:最通用的照片格式

JPG 從九〇年代用到現在,任何電腦、手機、印表機、政府網站的上傳欄位都讀得懂。它擅長處理照片這種顏色連續漸變的畫面,品質設在 80 左右,檔案就能比原始大小小很多,肉眼看不太出差別。

它的兩個弱點:不支援透明,以及不適合文字和銳利的線條——截圖存成 JPG,字的邊緣會出現一圈髒髒的雜點。另外,同一張圖反覆打開、存檔,每次都會再損失一點,越存越糊。

PNG:無損,但照片別用它

PNG 不會損失任何細節,而且支援透明背景,所以去背圖、Logo、螢幕截圖、表格與圖表都適合用它。這類圖顏色數量少、有大片同色區塊,PNG 壓起來效率很好。

WebP 與 AVIF:網站的新選擇

WebP 由 Google 推出,同樣的畫質下通常比 JPG 小 25–35%,還能透明。主流瀏覽器都支援了,是目前網站圖片最實際的預設選擇。

AVIF 更新、壓得更小,在同等畫質下常比 WebP 再省一截。代價是編碼慢(存一張大圖可能要好幾秒),而且較舊的瀏覽器、部分修圖軟體與上傳欄位還不認得它。適合放在自己的網站上,不適合寄給別人。

要注意的是:上傳到社群平台或拍賣網站時,平台會自己再壓一次,你傳 WebP 或 AVIF 不一定有好處,有時反而因為不支援而上傳失敗。這種情況傳 JPG 最穩。

依用途選:一張速查表

用途建議格式補充
自己網站或部落格的照片WebP(品質 75–85)長邊縮到 1600–2000 像素就夠
去背的商品圖PNG 或 WebP要保留透明就不能用 JPG
上傳社群、拍賣、表單JPG(品質 85)相容性最好,平台會再壓一次
螢幕截圖、教學圖PNG文字邊緣才會清楚
要給印刷廠原始檔或高品質 JPG(95 以上)印刷看解析度與色彩,不要先壓
還要再編輯的檔案PNG 或原始格式避免反覆破壞性壓縮

品質要拉多少?尺寸要不要縮?

  • 品質 80 左右:一般網頁與分享,肉眼很難分辨,檔案小很多。
  • 品質 90–95:要給別人再加工、印刷,或很在意細節。
  • 品質低於 60:開始看得到色塊與邊緣雜訊,除非檔案大小有硬性限制,不建議。

比起品質,縮小尺寸往往更有效。手機拍的照片長邊常常是 4000 像素以上,但網頁上的顯示寬度很少超過 2000 像素。先把長邊縮到 1920,再用品質 80 存成 WebP,一張 4 MB 的照片通常可以壓到幾百 KB。

站上的圖片壓縮工具可以一次放很多張、設定長邊上限與品質,轉換在瀏覽器裡完成、不會上傳,改完設定會整批重新計算,方便比較不同格式的大小。

常見問題

iPhone 的 HEIC 是什麼?
HEIC 是 iPhone 預設的照片格式,壓縮效率跟 AVIF 同一代,檔案小。缺點是很多 Windows 軟體與網站不支援,要分享時轉成 JPG 最保險。
JPG 和 JPEG 有差嗎?
沒有差別,是同一種格式。早期 Windows 副檔名限制三個字母,所以常寫成 .jpg。
GIF 呢?
GIF 最多只有 256 色,現在主要用在簡單動畫。靜態圖片用 PNG 或 WebP 都比 GIF 好;動畫用 WebP 或影片格式通常更小。
把 JPG 轉成 PNG 畫質會變好嗎?
不會。JPG 已經丟掉的細節回不來,轉成 PNG 只是用無損方式保存「已經壓過的樣子」,檔案還會變大。

參考資料

法規與平台規定可能調整,實際以官方最新公告為準。內容有錯誤歡迎寫信告訴我們。