PNG、JPEG 還是 WebP：該用哪種圖片格式？

大多數圖片格式的選擇，歸結為兩個問題：圖片需要透明區域嗎？一點畫質損失會被看出來嗎？回答了這兩個問題，格式幾乎就自動選好了。第三個問題是檔案要發到哪裡，它決定了新格式能不能用，因為電商平臺和很多應用仍然只接受 JPEG 和 PNG。

本指南對比網頁上照片和圖形最常見的四種格式：JPEG、PNG、WebP 和 AVIF。最後針對大家常見的需求給出快速選擇：logo、產品照片、普通照片，以及透明背景的去背。

對比表

格式細節來自 MDN 的圖片檔案型別指南。對瀏覽器來說，支援情況這一行已經沒那麼重要了：當前所有主流瀏覽器都能顯示 WebP，AVIF 也已在它們的最新版本中得到支援。真正還要在意的是其他地方，比如上傳表單、電商平臺、郵件客戶端和老舊的桌面軟體。

有損與無損，通俗地說

無損壓縮在縮小檔案的同時，一個畫素都不改。解碼一張 PNG，得到的和儲存時完全一樣。所以它非常適合硬邊和純色內容，例如文字、logo、線稿、介面和截圖，這些內容上任何模糊或色邊都很容易被看出來。

有損壓縮會丟掉眼睛不太會注意到的細節。照片對此的容忍度很高，因為它們充滿了噪點和漸變色調。JPEG 就是這樣工作的，在合理的品質設定下，照片可以縮小到 PNG 體積的一小部分，而肉眼看不出變化。

由此得出兩條實用規則：

• 每儲存一次有損格式，就多損失一點。保留一份無損母版（相機原圖、PNG 或編輯器自己的檔案），從母版匯出有損副本，而不是反覆編輯、反覆儲存同一個 JPEG。
• 有失真壓縮在銳利邊緣上效果最差。存成 JPEG 的 logo，字母周圍會出現模糊的“蚊式噪點”，截圖裡的文字會變糊。

透明：去背的決定性因素

JPEG 沒有 alpha 通道。JPEG 裡沒有辦法儲存“這個畫素是透明的”，所以去除背景後存成 JPEG，空白區域會被填上純色，通常是白色或黑色。如果你想讓去背疊在其他內容上，就需要 PNG、WebP 或 AVIF。

PNG 儲存完整的 alpha 通道：每個畫素都可以是從完全不透明到完全透明之間的任意值，正是這一點讓頭髮、毛髮和陰影這類柔和邊緣看起來自然。它還有一種更簡單的模式，把調色盤中的某一種顏色標記為透明，適合純色圖形，但用在照片上邊緣會有鋸齒。想了解細節，請閱讀什麼是 alpha 通道。

WebP 的無損和有損模式都支援透明。Google 的 WebP 文件指出，無損 WebP 加入透明只多佔約 22% 的位元組，而帶透明的有損 WebP 通常比同等的 PNG 小約 3 倍。因此，在你自己的網站上展示透明產品圖，有損 WebP 是最高效的方式。

檔案大小

同一張圖片，從大到小的大致順序是 PNG、JPEG、WebP、AVIF，但有一個重要前提：PNG 只有在存照片時才“大”。對於顏色很少的純色圖形，PNG 往往比 JPEG 更小，而且一定更清晰。

Google 公佈的 WebP 資料是一個有用的參考：

• 無損 WebP 檔案比 PNG 小 26%。
• 在相同 SSIM 品質分數下，有損 WebP 檔案比同類 JPEG 小 25% 到 34%。

MDN 對網頁點陣圖的建議是優先使用 WebP 或 AVIF，它們的壓縮效果通常好於 PNG、JPEG 和 GIF。AVIF 還支援 10 位和 12 位色彩，有助於呈現平滑的漸變。它的弱點在瀏覽器之外的支援：很多應用和上傳表單仍然不接受它。

當你要向大量訪客提供大量圖片時，檔案大小最重要。如果只是向一個反正會重新壓縮所有圖片的電商平臺上傳一張圖，平臺接受什麼格式，比你省下多少位元組更重要。

各格式在哪裡被接受

瀏覽器是容易的部分。電商平臺和應用才是格式被拒絕的地方。以下是根據各平臺自己的文件整理的可接受格式，核對時間為 2026 年 10 月：

有兩點很突出。第一，Amazon、Walmart 和 Meta 商品目錄都不接受 WebP 和 AVIF，所以上傳到電商平臺請保留 JPEG 或 PNG。第二，Etsy 表示不支援透明 PNG，透明區域可能顯示為黑色，所以上傳到那裡之前，先把去背合併到某種顏色上。各平臺的準確畫素尺寸，請參閱產品圖尺寸參考。

常見用途該用哪種格式

Logo

有向量原稿時用 SVG；MDN 推薦 logo 和圖示使用 SVG。需要點陣圖檔案時，用透明背景的 PNG，或者在你自己的網站上用無損 WebP。永遠不要用 JPEG：它會讓邊緣發毛，而且不能透明。

產品照片

電商平臺主圖請用純白背景的 JPEG。Amazon 的賣家部落格稱 JPEG 是首選格式，上表中的每個電商平臺都接受它。從無損母版以較高的品質設定匯出（大多數工具中約 85 到 92）。

在你自己的店鋪裡，上傳高品質的 JPEG 或 PNG，讓平臺去轉換。例如 Shopify 表示，它的圖片服務會自動為每位訪客提供其瀏覽器支援的最佳格式。

普通照片

分享和上傳時，JPEG 是穩妥的預設選擇。在你能控制的網站上，WebP 或 AVIF 配合 JPEG 備用，可以用更少的位元組呈現同樣的效果。如果你的手機儲存的是 HEIC 檔案，上傳到沒有列出 HEIC 的地方之前，先轉換成 JPEG。

去背和透明圖片

檔案需要在各處都能用時，用 PNG：幻燈片、文件、設計工具和大多數上傳表單。要把圖片放到你自己的網頁上並希望它體積小，用 WebP。只有當你特意給背景填上純色時才用 JPEG，例如為電商平臺填白色。

截圖和圖表

PNG，或無損 WebP。有損格式會讓文字變糊。

提供現代格式並保留備用格式

如果你運營自己的網站，不必只選一種格式。HTML 的 picture 元素可以讓瀏覽器選擇它能識別的第一種格式：

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

支援 AVIF 的瀏覽器使用第一個來源，其他瀏覽器退回 WebP，更老的瀏覽器使用 PNG。很多託管平臺和圖片 CDN 會根據瀏覽器的 Accept 請求頭自動完成這種轉換，這通常比你自己生成每種格式更簡單。

格式轉換時避免意外

• PNG 或 WebP 轉 JPEG： 透明區域會被合併。自己選擇填充顏色（通常是白色），不要讓工具替你選，因為有些工具預設用黑色。
• JPEG 轉 PNG： 檔案會變大，但不會變好。JPEG 中損失的畫質回不來。
• 任何格式轉 WebP 或 AVIF： 檢查透明是否保留、顏色是否正確；如果圖片要在網頁上顯示，先轉換為 sRGB 色彩配置檔案。
• 重複儲存 JPEG： 每次以更低品質儲存，損失都會疊加。從母版只匯出一次。

去背的更快選擇

如果你要批次去除背景，removebackground.dev 可以把去背匯出為透明 PNG 或 WebP，或任意純色背景的 JPG，這樣一次上傳就能同時得到用於電商平臺的白底 JPEG 和用於你網站的透明 PNG。