不喜欢广告？去无广告今天 

PNG 与 JPG 与 WebP —— 在用户愤怒退出前选择正确的格式

更新于 2026年4月26日

仍在将4MB的PNG图片上传到生产环境吗？本指南详细说明了何时使用PNG、JPG、WebP、AVIF和GIF——包含实际的文件大小对比、对核心网页指标的影响，以及一个便捷的对比表格。您的用户会感激您的。

广告移除？

您已經花了很多週時間完善網站。設計精確，代碼乾淨，然後您將一個3.8MB的PNG英雄圖像放到首頁，結果Lighthouse得分急劇下跌。我們所有人都曾經歷過這種情況。

選擇正確的圖像格式雖然不華麗，但卻是對頁面加載時間、核心網頁指標以及整體用戶體驗最具影響力的優化之一。本指南將幫助您明確知道在什麼情況下應選擇PNG、JPG、WebP、AVIF或甚至GIF——並且告訴您選擇錯誤會帶來比您想像中更大的損失。

簡短答案（如果您時間緊迫）

照片和複雜圖像： 使用WebP，無法支持時則回退到JPG。
標誌、圖標、帶文字的截圖： 使用WebP，無法支持時則回退到PNG。
動畫： 使用WebP或視頻，GIF僅作為最後選擇。
針對現代瀏覽器的尖端項目： 嘗試使用AVIF。

仍在閱讀？很好，以下是完整的圖景。

PNG與JPG與WebP：實際上有哪些不同？

JPG（JPEG）——工作馬

JPEG自1992年以來就已存在，至今仍是網絡上最廣泛使用的格式之一——有其充分的理由。它使用 有損壓縮，這意味著它會丟棄圖像數據以縮小文件大小。對於照片而言，在70–85的品質設定下，這種權衡對人類視覺幾乎是不可見的。

JPG的缺陷在於：文字、線稿、標誌以及任何具有清晰邊緣或單色區域的內容。這種有損壓縮會引發明顯的紋理——文字周圍出現方塊狀模糊，圖標邊緣變得混濁。對於這些使用場景，您需要無損壓縮。

一個1200×800照片的典型JPG文件大小： 在良好品質下約為150–250KB。

PNG——無損、透明，但通常過大

PNG使用 無損壓縮 ——每個像素都精確保留。這使得它成為標誌、UI截圖、具有單色區域的圖像以及任何需要 透明背景的圖像的理想選擇。JPG無法實現透明度，而PNG可以。

問題在於：無損壓縮意味著文件更大。一個全色照片以PNG格式保存，可能比等效的JPG大3到5倍。對於一個200×200的標誌來說這沒問題，但對於一個滿頁的英雄圖像來說則是災難。

一個1200×800照片的典型PNG文件大小： 約為2–4MB。（是的，真的如此。這就是為什麼您的Lighthouse得分會暴跌。）

WebP——現代的標準選擇

由Google開發，現已廣泛支持於所有現代瀏覽器，WebP提供 比JPG小25–35% 在視覺品質相當的情況下，並 比PNG小26% 對於無損圖像。它還支持透明度，因此可以在大多數情況下取代JPG和PNG。

WebP提供有損和無損模式，並支持動畫——使其成為GIF的可行替代方案。瀏覽器支持非常出色：Chrome、Firefox、Safari（從14版本開始）、Edge和Opera均原生支持。

一個1200×800照片的典型WebP文件大小： 約為100–180KB。相同品質，顯著更小。

AVIF——前沿技術

AVIF源自AV1視頻編碼器，提供 壓縮效率，甚至超越WebP ——在相同品質水平下通常比JPG小50%。它還在處理HDR和廣色域方面表現優於其他任何網絡格式。

缺點是：瀏覽器支持雖然在增長，但尚未普及（iOS 15及以下版本的Safari不支持），且編碼速度較慢。對於2025年的大多數項目，WebP仍然是更安全的預設選擇。如果您服務的用戶僅使用現代瀏覽器，或您擁有高效生成AVIF的基礎設施，則可考慮使用AVIF。

GIF——亡靈格式

GIF僅支持256種顏色，動畫產生的文件較大，技術上已過時多年。然而，它仍無處不在，持續出現在Slack頻道和產品發布公告中。

如果您必須在網頁上動畫，請使用WebP動畫，或更佳地選擇循環MP4視頻。一個動畫GIF可以被一個小10倍的視頻文件取代，播放效果完全相同。在2025年，僅有在不支持視頻或WebP的平台（如某些電子郵件客戶端、舊版CMS）中，才需要使用GIF。

格式比较表

以下是簡要圖景：

格式	压缩	透明度	动画	最适合	浏览器支持
JPG	有损	不	不	照片、真實圖像	普遍的
巴布亚新几内亚	无损	是（透明度）	不	標誌、UI、帶文字的圖像	普遍的
WebP	有損與無損	是的	是的	幾乎所有內容	所有現代瀏覽器
AVIF	有損與無損	是的	是的	高品質照片、HDR	Chrome、Firefox、Safari 16+
动态图片	無損（256種顏色）	是（1位）	是的	簡單動畫（傳統）	普遍的
SVG	向量（可縮放）	是的	是（CSS）	图标、徽标、插图	普遍的

對核心網頁指標的實際影響

圖像格式會直接影響兩個核心網頁指標：

最大內容渲染時間（LCP）

LCP衡量最大可見元素——通常為英雄圖像——加載所需時間。一個3MB的PNG英雄圖像在移動網絡上可能完全耗盡LCP預算。同樣的圖像以WebP格式為300KB，加載時間僅為原來的一小部分。Google的排名信號非常重視這個數值。

實際規則：大多數情況下，LCP圖像應小於200KB。如果是一個全寬度的英雄圖像，請目標為150KB以下。使用WebP。如果您有一張特別複雜的照片，請搭配 srcset 以根據不同視口提供不同尺寸。

累積布局移動（CLS）

CLS並非直接與格式相關，但這裡值得一提：如果您的圖像在沒有明確 width 且 height 屬性的情況下加載，頁面會隨著圖像到達而重新佈局。無論您選擇哪種格式，請始終為 <img> 標籤設置尺寸。

使用每種格式的決策指南

使用JPG的情況：

您需要廣泛兼容性（舊版瀏覽器、電子郵件、舊版CMS）
您需要向廣泛的觀眾提供照片，且無法提供WebP
您需要在 <picture> 元素內提供可靠的備用方案

使用PNG的情況：

您需要像素精確的無損品質（用於文件說明、UI設計圖）
您需要透明度且無法提供WebP
圖像具有清晰邊緣、單色區域或文字，而JPG的紋理會顯而易見

使用WebP的情況：

您正在開發任何現代網頁項目（2025年應將此作為預設）
您希望文件比JPG或PNG更小，且無視覺品質差異
您需要透明度，而不願承擔PNG的重量
您正在用動畫內容取代GIF

使用AVIF的情況：

您的觀眾僅使用現代瀏覽器，且希望達到最大壓縮效果
您正在提供HDR或廣色域攝影
您擁有可即時編碼AVIF的圖像CDN基礎設施

使用SVG的情況：

圖像為圖標、標誌或需要在任何尺寸下清晰縮放的圖像
您希望動畫或使用CSS樣式化元素
文件大小重要，且圖像由路徑構成而非像素

如何使用元素提供多種格式

您不必只選擇一種格式—— <picture> 元素讓您為每個瀏覽器提供最佳可用格式：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

瀏覽器會選擇它們支持的第一種格式。現代瀏覽器獲得AVIF；稍舊的瀏覽器獲得WebP；其他人則獲得JPG。無需JavaScript。