深度解析

JPG 與 PNG 的本質差異,一次講透

koboshiCo-founder
·2 分鐘閱讀
概述

JPG 和 PNG 與其說是對手,不如說是為不同資料而生的工具:一個丟掉眼睛察覺不到的細節,另一個不惜代價保住每個像素。本文講清兩者的真實壓縮原理、對體積和畫質的影響,以及如何明確做選擇。

本教學使用免費的批次 JPG 轉 PNG——它完全在你的瀏覽器中執行。開啟工具

簡短答案:JPG 是為照片設計的有損格式,PNG 是為圖形設計的無損格式。照片存成 PNG 是白白浪費幾 MB,畫質毫無可見提升;截圖存成 JPG,文字糊邊、邊緣發毛。這場爭論裡的其他一切——檔案體積、透明度、編輯行為——都源自兩種格式的壓縮方式。那就從這裡講起。

JPG 怎麼壓縮:丟掉你不會注意到的東西

JPEG 誕生於 1992 年(JPG 的歷史 講了它的來歷),手法至今沒變。編碼器把影像切成 8×8 像素的區塊,每塊做一次離散餘弦轉換,把像素值轉換成頻率。平滑漸層變成少數幾個強低頻係數;精細細節變成弱高頻係數——而量化器丟掉的恰恰就是這些。

還有兩個決定來自人眼的運作方式。彩度解析度被減半(彩度次取樣),因為人對亮度細節的敏感度遠高於色彩細節。而畫質滑桿本質上就是量化器的激進程度:90 幾乎保住一切可見內容,60 開始丟掉你會察覺的東西。

兩條硬限制要記住:JPG 每通道 8 位元,且沒有 alpha 色版。透明度活不過一次 JPG 儲存。

另一個後果:每次儲存都會重新量化。開啟一個 JPG、編輯、儲存,就又有一片細節沒了。重複十次,影像肉眼可見地腐爛:天空出現方塊,邊緣泛出光暈。這就是代際損失,也是 JPG 只是遞送格式、不是工作格式的原因。

PNG 怎麼壓縮:不惜代價保住每個像素

PNG 在九十年代中期作為 GIF 的免專利替代品出現(PNG 的誕生 講了這段故事),它的哲學與 JPEG 完全相反:一個像素都不許變。

流程分兩級。首先,每一行像素經過一個預測濾鏡——Sub、Up、Average 或 Paeth——逐行選擇,讓資料盡可能重複。然後過濾後的位元組進入 DEFLATE,也就是 ZIP 檔案用的同一套 LZ77 加霍夫曼編碼家族。沒有任何近似。解壓後逐位元組還原原始資料。

這換來三樣東西:完整的 alpha 透明度(8 位元,而 GIF 只有開或關的單色透明)、可選的 16 位元色深、以及對代際損失的免疫——一個 PNG 儲存一百次,像素逐位元一致。代價在你餵給它一張照片的那一刻顯現。照片像素是帶噪的:每個像素都和鄰居略有不同,而雜訊恰恰是 DEFLATE 唯一壓不動的東西。

體積的現實

同一張原圖,兩種格式:

影像JPG (q90)PNG
1200 萬像素照片約 3.4 MB約 20 MB
1920×1080 介面截圖約 600 KB約 250 KB
帶透明背景的標誌不可能約 40 KB

這張表值得讀兩遍,因為兩個方向都重要。照片轉成 PNG 大約大六倍,卻沒有可見的提升。截圖轉成 PNG 反而更小而且更銳利,因為純色和硬邊正是 DEFLATE 預測濾鏡最擅長處理的東西——也恰恰是 JPEG 量化器最擅長毀掉的東西。兩種格式沒有好壞之分,它們是為相反類型的資料最佳化的。

人們反覆犯的三個錯誤

把截圖和介面圖存成 JPG。 文字和硬邊是高頻內容,是量化器最先丟的東西。結果就是「蚊式噪聲」——每個字母周圍一圈髒兮兮的光暈。來自螢幕的圖,就該進 PNG。

為了「畫質更好」把照片存成 PNG。 PNG 確實保留得更多,但照片在正常觀看尺寸下差別不可見,你卻要為此多付六倍的位元組。照片要上網或寄郵件,PNG 就是通往同一張圖的昂貴路線。

在 JPG 裡做編輯。 每次中間儲存都在損失細節。解法是:工作檔案用 PNG,最後一次性輸出 JPG。事後再把成品 JPG 轉成 PNG 什麼都救不回來——只是把損傷凍結在原地。背後的原理參見我們的 有損與無損壓縮詳解

什麼場景用哪個格式

場景用哪個原因
網頁上的照片JPG照片的最小誠實體積
截圖、UI 稿、文字圖PNG銳邊保持銳利,檔案還更小
標誌、圖示、一切透明元素PNGJPG 沒有 alpha 色版
編輯和中間儲存PNG沒有代際損失
郵件附件、送印JPG到處能讀,體積夠小
純色網頁圖形PNG這種內容 PNG 壓得比 JPG 更好

如果你是在替網站選格式,兩個可能都不是正確答案:WebP 通常在各自的主場同時擊敗它們。正面對決見 WebP 與 JPG 比較WebP 與 PNG 比較

當你需要轉換時

轉換只能往一個方向修復問題。PNG 轉 JPG 把照片縮到原來幾分之一的體積,並把透明度壓到白色背景上——往舊表單傳圖或批次寄郵件前的正確一步。JPG 轉 PNG 把目前像素凍結在無損容器裡,讓後續編輯不再繼續劣化;但 JPG 已經丟掉的細節救不回來。如果你要的是透明度,JPG 轉 PNG 與透明度 說明了到底能做到什麼。

兩個轉換器都在你的瀏覽器本機運作——拖入檔案,下載結果,沒有任何上傳。上面那張表會告訴你,你的檔案該往哪個方向走。

準備好試試看了嗎?

免費且不限次數。無需上傳、無需註冊——你的檔案永遠不會離開你的裝置。

開啟批次 JPG 轉 PNG

更多推薦閱讀