「壓縮」這個詞常讓人擔心圖片會變模糊、變醜。但事實上,並非所有壓縮都會損失畫質。只要選對方法,你可以讓圖片大幅縮小,視覺上卻毫無差異。本文將帶你深入了解有損與無損壓縮的區別,以及各種保留畫質的壓縮技術。
理解這兩個概念是選對壓縮方式的前提:
有損壓縮(Lossy Compression)會永久刪除部分圖片資料。演算法分析圖片,找出人眼較不敏感的資訊(如高頻細節、顏色漸層邊緣),然後捨棄或近似化這些資訊。JPEG 是最典型的有損格式。壓縮程度越高,失真越明顯,常見表現為「方塊感」(blocking artifacts)或細節模糊。
無損壓縮(Lossless Compression)不丟失任何像素資料,而是透過更聰明的方式重新編排資料。想像把一段重複的序列用「重複 100 次」來表示,而非真的寫 100 次——這是無損壓縮的基本思路。解壓縮後,圖片與原始檔案完全相同。
對於需要保留最高畫質的場景(如印刷、產品展示、醫療影像),無損壓縮是唯一選項。對於網頁一般圖片,合理的有損壓縮往往就足夠了。
PNG 格式本身採用無損壓縮(DEFLATE 演算法),但許多 PNG 檔案並未達到最佳壓縮狀態,仍有進一步縮小的空間。
嚴格來說,pngquant 屬於有損壓縮,它將 PNG 的色彩從數百萬色縮減到 256 色以內。但由於演算法極為精準,視覺上幾乎看不出差異,檔案卻可縮小 40–70%。
pngquant --quality=65-80 input.png這類工具重新壓縮 PNG 的 DEFLATE 資料流,找到更有效率的壓縮方式,不改變任何像素值:
optipng -o7 input.png(-o7 為最高壓縮等級)oxipng -o max input.png(Rust 開發,速度更快)JPEG 格式本身是有損的,但有方法在不重新編碼的情況下縮小 JPEG 檔案:
相機拍攝的 JPEG 通常包含大量 metadata:拍攝地點(GPS 座標)、相機型號、光圈快門、色彩描述檔(ICC profile)等。這些資料對網頁顯示完全無用,但可能佔整個檔案的 10–30%。
jpegtran -copy none -optimize input.jpg > output.jpgexiftool -all= input.jpg(移除所有 metadata)jpegtran 還可以對 JPEG 的 Huffman 編碼進行最佳化(-optimize 參數),以及轉換為漸進式 JPEG(-progressive),前者縮小檔案,後者讓圖片在載入時從模糊逐漸變清晰,改善用戶體驗。
WebP 格式同時支援有損和無損壓縮,且兩種模式的效率均優於 JPEG 和 PNG:
cwebp -lossless input.png -o output.webpcwebp -q 80 input.jpg -o output.webp現代瀏覽器(Chrome、Firefox、Safari 14+、Edge)均支援 WebP。可使用 HTML 的 <picture> 元素提供 WebP 優先、JPEG 備用的方案,兼顧新舊瀏覽器。
AVIF(AV1 Image File Format)是目前壓縮效率最高的圖片格式,基於開放標準 AV1 視訊編解碼器:
根據不同需求,以下是最值得使用的工具:
除了肉眼對比,也可以用客觀指標衡量壓縮品質:
<picture> 元素提供 WebP/AVIF 優先方案「不失真壓縮」並非只有一種方法,而是一系列技術的組合:移除無用的 metadata、使用更高效的格式、讓壓縮演算法發揮最大效能。對於大多數網頁圖片而言,善用現代格式(WebP/AVIF)加上合理的有損壓縮,往往能在視覺無損的前提下,讓圖片小到令人驚訝的程度。
在瀏覽器裡直接完成,檔案不會離開你的電腦:圖片最佳化