破壞性壓縮 vs 無損壓縮：兩者有何分別？

你電腦上的每個 JPG、WebP、AVIF 或 PNG 檔案,在儲存之前都已被壓縮演算法縮細過一次。執行這個 縮細工作的演算法有兩大門派,而它們對你的像素會發生甚麼事,作出了截然不同的承諾。為錯誤的圖 像選錯了門派,結果要不就是推出一個 4 MB 的橫幅圖,把你的最大內容繪製（Largest Contentful Paint）拖垮;要不就是把照片存成 PNG,然後納悶為何你的攝影網誌突然比預期大 12 倍。

本指南會解釋破壞性與無損壓縮實際上做了甚麼,為何同一個「壓縮」一詞涵蓋兩個相反目標, 以及你應該在甚麼時候關心工具究竟用上了哪一派。想看逐個格式的抉擇矩陣,可以參考我們 的姊妹篇JPG vs PNG vs WebP vs AVIF——本文教你概念,那篇教你買哪個。

破壞性壓縮的原理

破壞性（lossy）壓縮會丟棄它認為你不會察覺的資訊。最經典的例子是JPEG:它先把圖片切成 8×8 的小區塊,在每個區塊上跑一次離散餘弦轉換（DCT）, 再把得到的係數進行量化——用較粗的格子把這些數字四捨五入。四捨五入是有破壞性的: 原值一去不返。救你一命的是,高頻率係數（相鄰像素的微小色差）會比低頻率係數（寬闊形狀） 被四捨五入得更狠,而人類對後者敏感得多。

WebP 和 AVIF 預設也是破壞性的——但它們在更好的預測器之上 套用了同一招數。WebP 採用 VP8 風格的畫面內預測,從相鄰區塊推測每個區塊,只編碼細小 的殘差。AVIF 更進一步,採用 AV1 的畫面內編碼,在明顯較小的檔案下達到 JPG 級的畫質。 兩種格式的量化表也會針對感知模型（通常是 SSIMULACRA2 或 Butteraugli）作出調整,所以 「畫質滑桿」實際上對應的是「人眼感知畫質」,而不只是信噪比。

破壞性最大的警號是 反覆壓縮陷阱:每重新編碼一次 JPEG,就會再量化一次、 再損失一代細節。把一張畫質 90 的 JPG 反覆以畫質 90 儲存十次,得到的並非同一張檔案 ——只會得到一張更柔和的圖。請務必保留一份原圖母帶,所有輸出都由它重新匯出。

無損壓縮的原理

無損壓縮會保留每一個像素完全一致。它沒辦法把檔案壓得比原數據能容納的更小,所以做法是 移除冗餘,而非丟棄資訊。PNG 採用逐行濾波(None、Sub、Up、 Average、Paeth),從相鄰像素預測當前像素,只儲存那細小差值,再在上面跑一層deflate(也就是 ZIP 與 gzip 內裡用的演算法)。一張純色 UI 截圖因此能被壓到 原大小的極小零頭,因為每行對下一行的預測完全命中。

GIF 使用較舊的 LZW 字典編碼,這就是它只能容納 256 色调色板、 在靜態影像上幾近歷史遺跡的原因。WebP 和 AVIF 也都能切換 到無損模式——WebP 無損在 UI 素材上常常比 PNG 小 20–30%,AVIF 無損更進一步。代價是編碼 速度:無損 WebP/AVIF 比破壞性版本慢得多,這就是為何多數流水線只在已策展過的素材上 使用它們。

無損的關鍵特質是 解碼後必得原位元。一張 PNG 儲存一百次,檔案仍會跟 第一次儲存時位元級一致。這項保證,正是標誌、圖示與原始設計素材堅持留在無損格式的 原因——儘管在大小預算表上看起來很「沉悶」。

何時該選哪一派

用「照片規則」:任何由相機拍下的(或任何具連續色調、漸層、雜訊的)影像, 預設應採用 破壞性,除非有明確理由不用。多數顯示器上看不出 JPG 畫質 80–85、WebP 75–85 或 AVIF 50–60 與原圖有別。對追求快速的網頁來說,5–10 倍 的體積節省毫無討價還價餘地。

用「圖像規則」:任何帶平塗色、硬邊、文字或透明的(標誌、圖示、線圖、截圖),預設應 使用 無損。破壞性壓縮的瑕疵——文字旁的振鈴、透明邊緣的色漏、漸層 的帶狀——在這類圖上一目了然。而且 PNG 或無損 WebP 在這類素材上其實比 JPG 壓得更小。

唯一例外是「接近無損」的中間地帶:高畫質的破壞性編碼(畫質 ≥ 90)即使在圖形素材上 也常常與原圖無異,相對 PNG 能再省 40–60%。當母帶是 PNG、但你需要較小的網頁成品時, 這就是該轉的旋鈕。想看各格式在真實圖片上的比較,可參考JPG vs PNG vs WebP vs AVIF。

ImagElite 如何處理兩種模式

ImagElite 的 圖片壓縮工具用同一條滑桿呈現兩種模式。當你拖動 JPG 輸出的畫質滑桿,你其實就在直接驅動破壞性 編碼器——畫質越低,量化網格越粗、檔案越小、極端放大下瑕疵越明顯。當你把目標格式 切到 PNG 或 WebP/AVIF 的無損變體,滑桿會消失,工具會回到純粹的冗餘移除流水線, 每一個像素都跟你上載時一模一樣。

因為一切都在你的瀏覽器本機執行,你可以在同一張圖上 A/B 兩種模式而無須重新上載。 先放一張截圖、再放一張手機照,你就會看到破壞性與無損輸出的體積差怎麼在兩者之間 整個倒轉過來——那個差距就是無損再也壓不下去的冗餘,也是破壞性願意丟掉以換取 載入速度的東西。