簡短答案: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 | 銳邊保持銳利,檔案還更小 |
| 標誌、圖示、一切透明元素 | PNG | JPG 沒有 alpha 色版 |
| 編輯和中間儲存 | PNG | 沒有代際損失 |
| 郵件附件、送印 | JPG | 到處能讀,體積夠小 |
| 純色網頁圖形 | PNG | 這種內容 PNG 壓得比 JPG 更好 |
如果你是在替網站選格式,兩個可能都不是正確答案:WebP 通常在各自的主場同時擊敗它們。正面對決見 WebP 與 JPG 比較 和 WebP 與 PNG 比較。
當你需要轉換時
轉換只能往一個方向修復問題。PNG 轉 JPG 把照片縮到原來幾分之一的體積,並把透明度壓到白色背景上——往舊表單傳圖或批次寄郵件前的正確一步。JPG 轉 PNG 把目前像素凍結在無損容器裡,讓後續編輯不再繼續劣化;但 JPG 已經丟掉的細節救不回來。如果你要的是透明度,JPG 轉 PNG 與透明度 說明了到底能做到什麼。
兩個轉換器都在你的瀏覽器本機運作——拖入檔案,下載結果,沒有任何上傳。上面那張表會告訴你,你的檔案該往哪個方向走。