影像壓縮如何運作：JPEG、PNG、WebP 和 AVIF 詳解

實用結論

影像壓縮不是一場「誰次次都贏」的比賽，而是一組取捨：可以丟掉哪些細節、哪些細節必須一模一樣、你能花多少 CPU 時間、匯出之後這份檔案還要在哪些環境下運作。

把下面這一段當作實務起點：

• 當照片需要最大程度的相容性時，使用 JPEG——尤其是電子郵件、下載、老應用程式、印刷入口與嚴格的上傳表單。
• 當像素必須保持精確時，使用 PNG——截圖、介面截取、示意圖、Logo、透明圖形。
• 當你希望在廣泛瀏覽器支援下拿到比 JPEG 或 PNG 更小的檔案時，把 WebP 當成日常的現代網頁預設。
• 當影像很大、流量很高，而站點又能提供 WebP 或 JPEG 回退並能接受較慢編碼時，使用 AVIF。

聽起來很單純，但細節很關鍵。一張產品照、一張護照照片、一張軟體截圖和一張透明浮水印都叫「影像」，可它們不會按同一套方式被壓縮。

按用途選，而不是按副檔名選

在討論編解碼器之前，先想清楚這張圖要做什麼：

這也解釋了為什麼關於格式的建議看起來常常互相矛盾。「用 AVIF，它更小」對靜態網站建置裡的主視覺可能是好建議；同一句話放在必須被政府表單、電子郵件用戶端或老 CMS 接收的使用者上傳影像上，就可能是壞建議。

兩大壓縮家族

本指南裡的每一種影像格式，要不是使用無損壓縮、要不是使用失真壓縮，要不就是兩者都能。

無損壓縮 只移除數學上的冗餘，解碼時能重建出完全相同的像素。如果一張截圖有白色背景、大量重複的介面顏色和重複的直線邊緣，無損格式就能非常緊湊地描述這些圖樣。PNG 是經典的無損網頁格式，WebP 也有無損模式。

失真壓縮 為了讓檔案更小，會永久丟掉影像資訊。訣竅在於：丟掉的是在最終顯示尺寸下人不太容易察覺的資訊。JPEG 是失真格式。WebP 與 AVIF 既能失真也能無損，但網頁交付對照片大多使用它們的失真模式。

要避免的誤區是把「失真」自動看作「不專業」，把「無損」自動看作「更專業」。對一張 1600 px 的部落格照片，經過認真調整的失真 WebP 在頁面上幾乎看不出差別，卻能省下大量頻寬。而對包含小號選單文字的軟體截圖來說，即便檔案大小看起來很漂亮，失真匯出也可能讓文字發糊。

四種格式速覽

規律不是「越新越贏」。新一代格式能做更多分析、把資料打得更緊，但代價是編碼時間、QA 時間與回退方案的複雜度。

為什麼同一個「品質值」不代表同樣的畫質

同一張圖，以品質 80 儲存的 JPEG 和以品質 80 儲存的 WebP 走的並不是同一把尺。這個數字會被送進每個編碼器自己的模型，影響不同的內部決策，不同工具還可能各自對應得不一樣。

因此實用的壓縮需要兩次確認：

1. 在影像真正會出現的尺寸下看它。 商品卡縮圖就該按商品卡縮圖的樣子判斷，而不是放到 400% 去挑毛病。
2. 等影像已經是正確尺寸再比對位元組。 把 5000 px 的相機原始檔縮到 1600 px 的網頁圖，通常比一味把品質滑桿往下拉更能省下檔案。

如果要批次處理一個資料夾，先挑幾個難搞的案例試一遍再全部匯出：一張人臉、一片天空、一處深陰影、一張滿是文字的截圖、一道透明邊緣，以及一張多雜訊的室內照。

JPEG：為什麼照片能變小，而文字會變醜

JPEG 是老牌的照片格式，因為它是圍繞「照片是怎麼樣」設計出來的。Library of Congress 提到，JPEG 家族常用於連續色調的全彩與灰階影像，經典處理流程使用 8×8 的分塊變換。說白話就是：JPEG 把影像切成小塊、把每個小塊變成頻率資訊、再對觀眾比較不會察覺到的細節進行量化。

對下列情況效果好：

• 人臉、衣物、建築、風景與美食照
• 天空、陰影、膚色等自然漸層
• 不需要透明像素的圖
• 需要幾乎在任何環境都能開啟的檔案

對下列情況效果差：

• 截圖裡的小號文字
• 硬邊緣的圖示與 Logo
• 純色示意圖
• 需要反覆編輯再匯出的檔案
• 透明影像，因為 JPEG 沒有 alpha 通道

最好辨認的 JPEG 偽影是：區塊邊緣、文字周圍的振鈴、高對比細節旁的蚊狀雜訊，以及柔和漸層裡的色帶。它們不是隨機現象，而是分塊失真壓縮肉眼可見的副作用。

優點

• 瀏覽器、系統、應用、電子郵件用戶端、表單、供應商上的支援極廣
• 對相機照片等連續色調影像很有效率
• 在常見流程裡編碼與解碼都很快
• 便於預覽、附件、上傳與分享

缺點

• 不支援透明
• 文字、邊緣與純色圖形周圍會有偽影
• 反覆的失真匯出會累積傷害
• 在網頁照片上，同等觀感下常常比 WebP 或 AVIF 大

什麼時候使用 JPEG

當相容性比「最後幾 KB」更重要時使用 JPEG：護照照片上傳、文件入口、電子郵件附件、供應商入口、印刷店、老 CMS，以及作為回退用的 <img> 來源。當檔案主要是一張照片、又不需要透明時也可以用。

PNG：為什麼截圖能保持清晰，而照片會變得巨大

PNG 面向的是可攜帶的無損點陣影像。W3C 的 PNG 規範同時涵蓋靜態 PNG 與動畫 PNG，格式支援索引色、灰階、真彩色以及可選的 alpha 透明。

對日常網頁工作來說，重點很簡單：PNG 會保留像素。它可以先對影像的每一列做濾波使其更可預測，再用 DEFLATE 壓縮結果。如果影像裡有重複顏色和分明的邊界，效果非常好。

適合 PNG 的：

• 含小號文字的軟體截圖
• 被匯出成圖片的 UI 示意圖與比較表
• 用不上 SVG 時的 Logo
• 透明浮層、印章與浮水印
• 之後可能再編輯的圖形

不適合 PNG 的：

• 相機照片
• 大幅網站主視覺
• 具有自然質感的產品照
• 相較精確像素更在意檔案大小的圖庫圖

一張 PNG 照片經常大到嚇人，因為 PNG 正在「做它該做的事」：保留雜訊、細膩紋理、微小的感光元件差異，以及每一處細微的色彩變化——這些恰恰是失真照片編碼會簡化掉的內容。

優點

• 無損像素還原
• 支援 alpha 通道透明
• 文字銳利、硬邊緣乾淨
• 對純色與重複圖形有很強的壓縮表現
• 是編輯母檔與透明工作流的可靠格式

缺點

• 照片檔案體積大
• 常見 PNG 流程裡沒有失真模式
• 在支援 WebP 的場景裡，透明網頁圖形可能比 WebP 更重

什麼時候使用 PNG

當精確像素很重要時使用 PNG：截圖、UI 文件、示意圖、簡單圖形，以及需要「可預期支援」的透明素材。除非確實需要一份無損工作副本，否則不要把 PNG 當作相機照片的預設格式。

WebP：現代網頁裡實用的預設選擇

WebP 的價值在於它用一種格式涵蓋多種用途。Google 的文件指出，WebP 同時支援失真壓縮、無損壓縮、透明、動畫、後設資料與色彩描述檔。這讓它比 JPEG 更靈活，在網頁交付裡也常常比 PNG 更小。

失真 WebP 使用 VP8 系的預測編碼，而不是 JPEG 那套更老、只依賴 DCT 的流程；無損 WebP 使用的是另一套變換與熵編碼。這帶來的實用結論是：WebP 常常是網站圖片庫的良好預設——部落格照片、商品格線、縮圖、輕量插圖與許多透明素材。

不過 WebP 不是魔法，也不是可以往任何地方隨便塞的檔案。瀏覽器支援 WebP 不代表電子郵件用戶端、上傳表單、老設計軟體、社群平台或印刷流程會接受它。所以 JPEG 與 PNG 到今天仍作為交付／相容格式很重要。

優點

• 同等觀感下，對照片而言常常比 JPEG 更小
• 支援 alpha 透明
• 同時支援失真與無損模式
• 現代瀏覽器上廣泛支援
• 編碼速度比 AVIF 快

缺點

• 仍有部分電子郵件用戶端、表單、老應用、CMS 外掛與印刷流程會拒收
• 並不能真正取代 SVG Logo 或可編輯的設計原始檔
• 在某些大幅照片上可能比 AVIF 大

什麼時候使用 WebP

在你能掌控頁面的場景下，把 WebP 當作大多數現代網站影像的交付格式。它是部落格圖、商品卡照片、縮圖與許多透明網頁素材的穩健預設。當影像要離開你的網站進入他人系統時，請同時準備好 JPEG 或 PNG。

AVIF：需要管線支撐的高壓縮選項

AVIF 把 AV1 編碼的影像資料放在以 HEIF 為基礎的影像格式裡。AVIF 規範支援 SDR 和 HDR 影像、廣色域使用情境、alpha 等輔助影像，以及更進階的影像編碼特性。web.dev 也指出，AVIF 的壓縮收益取決於影像內容、編碼器設定與目標品質。

對一般網頁團隊來說，實務上的說法是這樣：AVIF 在大照片上可以非常出色，但它更像是一種「管線格式」，而不是一種「隨手分享的格式」。它編碼較慢，老工具的預覽支援容易落後，回退處理也更關鍵。

適合 AVIF 的：

• 大幅主視覺照片
• 圖片密集型的著陸頁
• 編輯部風格的圖庫
• 一次編碼後大量分發的高流量影像
• 工作流裡涉及 HDR、高位元深度或廣色域的影像

不適合 AVIF 的：

• 嚴格的上傳表單
• 電子郵件附件
• 需要同事在老工具裡開啟的影像
• 收益小到不足以證明管線複雜度的極小縮圖
• 除非你認真測試，否則含小號文字的截圖

優點

• 對照片與複雜影像常常有非常好的壓縮效果
• 支援 alpha 透明、HDR 與廣色域
• 適合作為現代 <picture> 中的首選來源
• 很適合建置時或 CDN 上的影像產生

缺點

• 編碼可能很慢，尤其是大批量時
• 工具生態沒有 JPEG、PNG、WebP 那樣可預期
• 更穩的正式環境交付需要 WebP、JPEG 或 PNG 回退

什麼時候使用 AVIF

當影像夠大、又被反覆分發到能讓「少幾個位元組」值回管線成本時，使用 AVIF。高流量首頁的主視覺是好人選；90 px 的圖示、一次性的電子郵件附件、政府類上傳表單通常不是。

為什麼 PNG 在截圖上可能贏過 JPEG

一個常見的意外：同一張截圖，PNG 版本可能比 JPEG 版本又小又乾淨。

原因是截圖裡經常充滿重複結構：白色文件背景、灰色工具列、筆直的黑色文字、幾種圖示顏色、重複的 UI 間距——這些對無損壓縮來說都很容易緊湊描述。JPEG 並不知道文字應當保持精確，它會嘗試像處理照片那樣把畫面「簡化」，結果可能是檔案沒小多少，反而在字元與邊緣周圍更難看。

如果截圖主要還是照片，WebP 或 JPEG 可能更好；如果主要是介面、文字與純色，那就從 PNG 或無損 WebP 開始。

為什麼照片需要失真壓縮

相機照片是另一回事。它們有感光元件雜訊、細膩紋理、柔和陰影、不規則漸層，以及像素之間數以百萬計的細微變化。無損壓縮可利用的重複更少，往往無法把檔案壓到適合網頁交付的大小。

失真照片格式行得通，是因為觀眾通常關心的是主體、構圖、色彩與整體銳利感，而不是每一個原始像素。經過認真調整的 JPEG、WebP 或 AVIF 可以移除在最終尺寸下難以察覺的資訊。

危險在於把參數拉得過頭。過低的品質設定會讓皮膚變平、布料糊掉、樹葉細節消失、出現區塊邊緣，或讓天空與陰影裡冒出色帶。如果這些區域對影像很重要，請提高品質檔位或換更大的顯示檔。

現代網頁交付要用回退

當你能掌控整個網站時，其實不必只選一種格式。正式環境常見的模式是：先給最小的現代格式，把更穩的回退擺在它後面。

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    alt="自然光下的產品特寫照片"
    width="1200"
    height="800"
  >
</picture>

瀏覽器會使用它支援的第一個來源。支援 AVIF 的瀏覽器可以拿到 AVIF 檔，不支援 AVIF 的可以嘗試 WebP，更老或更嚴格的用戶端仍能落回 JPEG。

當影像需要透明或需要保留精確文字時，把回退換成 PNG，而不是 JPEG。

一套實用的壓縮流程

處理一張影像時：

1. 從手邊品質最高的來源開始。
2. 先把它縮到實際會展示的最大尺寸。
3. 按用途選格式。
4. 匯出一到兩個品質檔位。
5. 在真正的頁面或上傳目標處比對結果。
6. 保留母檔，這樣以後就不必再壓一次已發布的副本。

處理整個網站資料夾時：

1. 全量轉換前，先挑一份有代表性的小樣本。
2. 樣本裡要包含照片、截圖、透明圖形、縮圖，還有一張難處理的暗圖。
3. 用 WebP 當作「現代基線」測一遍。
4. 只在位元組節省真的有意義的地方才測 AVIF。
5. 在需要的位置保留 JPEG 或 PNG 回退。
6. 檔案大小要在「已經縮到目標尺寸之後」才看，而不是之前。

PhotoTools 可以協助中間幾步：來源太大裝不進頁面時使用 調整尺寸；調整檔案大小與畫質使用 壓縮；目標需要特定檔案類型時使用格式轉換器。轉換與壓縮都在你的瀏覽器裡完成，工具流程中影像不會被上傳到伺服器。

如何在格式之間轉換

PhotoTools 可以在你的瀏覽器裡直接在 JPG、PNG、WebP、AVIF、HEIC 之間轉換。放入影像，選擇目標格式，預覽結果，再下載新檔案。

依目標場景選擇轉換方向：

• 需要一份幾乎在任何表單或應用裡都能打開的檔案？轉成 JPEG。
• 需要透明或想保留精確的截圖像素？轉成 PNG 或無損 WebP。
• 站點接受，又想要更小的網頁圖？轉成 WebP。
• 在受控的網站管線裡追求極致壓縮？帶回退地測試 AVIF。

最後一條能省下大量畫質：不要在失真格式之間反覆來回。如果一張照片一開始就是高品質的 JPEG，為了交付把 JPEG 轉成 WebP 通常沒問題；但把這份 WebP 再轉回 JPEG、編輯、再轉出去，就是偽影開始堆積的地方。可以的話，總是從原始檔重新出發。