影像壓縮是指重新編寫圖片的像素資料,讓同一張圖佔用少得多的磁碟空間,方法包括用更短的編碼重新封裝相同資訊(無損),或捨棄人眼幾乎察覺不到的細節(有損)。一般手機拍出的照片,原始大小通常落在 3 MB 到 8 MB 之間;以約 70% 的品質壓縮後,同一張圖通常會縮到 1 MB 到 200 KB 之間,在正常觀看尺寸下通常沒有明顯差異。那種十倍或更大的縮減,正是為什麼壓縮會成為網頁、Email、聊天應用程式、表單上傳等幾乎所有涉及圖片的工作流程核心。了解背後幾條規則,能讓你不再憑感覺猜,而是精準地挑選品質設定,也能消除「壓縮過就一定很醜」的恐懼。

compress image explained
影像壓縮解析:檔案如何變小

壓縮的實際運作方式

每張數位影像都是由像素組成的網格,每個像素帶著幾個描述顏色的數字。一張 4,000 乘 3,000 像素的照片,大約包含 1200 萬像素,在每像素 24 位元的情況下,原始資料約為 36 MB,還沒經過任何壓縮。壓縮就是一套技巧,能把那 36 MB 變成十分之一甚至百分之一的大小,卻不會改變人眼看到的畫面。

無損壓縮會完整保留每一個像素的原始狀態。它的原理是找出重複的樣式,並為常見的樣式指派較短的編碼——例如一段 4,000 像素的白色區域,可以只儲存成類似「白色,4,000 次」這種簡短指令,而不是分別記錄 4,000 個獨立的白點。PNG 是最常見的無損影像格式。節省幅度確實存在但有限,通常是兩到三倍,因為演算法拒絕捨棄任何資訊。

有損壓縮則接受少量視覺變化,以換取更小的檔案。JPEG 是網路上幾乎所有照片採用的格式,屬於有損壓縮。整體流程可分為兩個階段:先把影像切成小區塊,將每個區塊表示成不同頻率的波形組合,接著保留最重要的頻率、將較不重要的頻率四捨五入。人眼對細部細節與細微色彩偏移的敏感度遠低於對明顯輪廓的敏感度,因此四捨五入後的數值幾乎看不出差異。WebP 和 JPEG XL 是現代的有損格式,採用更聰明的演算法,在相同的視覺品質下達成更小的檔案。有損壓縮的壓縮比越高,被捨棄的頻率越多,偽影(塊狀色塊、邊緣周圍的振鈴、糊掉的紋理)就會開始出現。

JPEG vs PNG vs WebP 一覽

格式的選擇和品質滑桿一樣重要。正確的格式取決於圖片內容與使用情境。下表整理了各自的取捨;若想深入了解何時該用哪一種,JPEG vs PNG vs WebP 指南提供了實用的範例。

格式 類型 最適合 與原始檔案的典型大小比較 瀏覽器支援
JPEG / JPG 有損 照片、主視覺圖、產品照 重新編碼後通常小 80–95% 全面支援
PNG 無損 截圖、標誌、UI 元素、透明背景 通常比未壓縮小 30–60% 全面支援
WebP 有損或無損 現代網站、應用程式素材 在相同視覺品質下,通常比 JPEG 小 20–30% 所有現代瀏覽器

一個簡單的經驗法則:照片類的影像選 JPEG 或 WebP;截圖和需要透明背景或銳利邊緣的影像選 PNG;如果檔案要放在網站上、且希望盡可能最小的檔案大小,就選 WebP。

如何一步步壓縮影像

在瀏覽器中壓縮圖片最快的方式,就是開啟影像壓縮工具,把檔案拖到頁面中,看著預覽隨著滑桿拖動而更新。整個流程只需幾秒鐘,過程中檔案完全不會上傳到任何地方。

  1. 開啟影像壓縮工具頁面,可以點擊從裝置中選擇 JPG、PNG 或 WebP 檔案,也可以把檔案拖曳到頁面任何位置。檔案載入後壓縮會自動啟動。
  2. 等待工具解碼影像並產生壓縮後的版本。由於運算在本機瀏覽器中完成,因此不需要上傳,也不必排隊等待。
  3. 上下拖動品質滑桿。預覽會即時更新,讓你在拖動過程中比較壓縮版本與原圖。
  4. 使用分割檢視並排比較原圖與壓縮後的影像。把分隔線拉到頭髮、文字、天空漸層等細節處,確認沒有遺失重要內容。
  5. 如需指定輸出格式可自行選擇。照片類的預設安全選擇是 JPEG;若要讓網頁用更小的檔案就選 WebP;需要無損品質或透明背景時則保留 PNG。
  6. 點擊下載按鈕儲存壓縮後的檔案。原圖在裝置上保持不變,只有新的、較小的版本會被儲存。

挑選合適的品質設定

品質滑桿是這個工具的核心,幾個常用的範圍就能涵蓋幾乎所有實際情境。一般的人物、風景、產品照,在正常螢幕尺寸下,60% 到 80% 之間的設定在視覺上與原圖難以分辨。壓到 50% 以下時,JPEG 偽影會在高對比邊緣與天空等平滑漸層處開始顯現。設定超過 85%,檔案大小會迅速增加,但視覺上的提升非常有限,這也是為什麼多數專業影像處理流程預設落在 75–82% 左右。

含有小字的截圖和其他影像,表現會略有不同。重度壓縮的 JPEG 會把細文字糊成一團,因為演算法正好捨棄了字型依賴的高頻細節。WebP 在低檔案大小下對這類內容的處理明顯較好;如果需要像素級完美的文字,就應該保留 PNG 格式。拿不定主意時,分割檢視就是最誠實的裁判:把分隔線拖到最在意的區域,選擇你看不出兩邊差異的最低品質設定。

為什麼較小的影像對網頁、郵件和表單很重要

在多數網頁、Email 行銷活動和聊天對話中,圖片往往是單一最重的部分。網頁速度是已確認的搜尋引擎排名訊號,而圖片大小通常是拖慢網站的第一個因素。壓縮主視覺圖、產品圖和背景圖,能直接改善最大內容繪製(LCP),這是實際使用者感受得到的 Core Web Vitals 指標之一。較小的影像也能為網站經營者和每位訪客節省頻寬費用,在行動網路下尤其明顯。

在網路之外,壓縮能解決一大堆日常困擾。Email 服務供應商將附件大小限制在 10 MB 或 25 MB;求職網站、政府表單、市集刊登和論壇註冊常把圖片上傳限制在幾百 KB。原本 5 MB 的手機照片若上傳失敗,經過一次壓縮就能順利通過。對任何看到它的人而言,壓縮後的版本仍是同一張照片,卻能塞進原本放不下的地方。

隱私與本機處理為何是真正的差異

多數線上影像工具會把你的檔案上傳到遠端伺服器,在那裡執行壓縮,再把結果回傳,並在他們的紀錄檔中保留副本一段不明時間。基於瀏覽器的壓縮工具則完全跳過上傳:檔案在同一台開啟頁面的機器上解碼、重新繪製到 HTML5 canvas 上、再重新編碼。整個過程完全沒有透過網路傳輸,因此檔案不會經過任何第三方的儲存或處理流程。

當圖片內容敏感時,這項差異就格外重要。身分證件掃描、合約、醫療影像、未公開的產品照片、內部報告和私人照片,都應比照其他私人文件處理。本機壓縮工具預設就以這種方式對待它們。由於沒有伺服器,因此也沒有人為的檔案大小上限、不必排隊等待,輸出檔案也不會被加上浮水印。唯一的實際限制,就是裝置上瀏覽器能為該影像挪出多少記憶體。

壓縮完成後的下一步

拿到較小的檔案後,通常還需要幾個後續步驟才算完成。如果影像在螢幕上的實際顯示大小下仍然感覺偏大,把像素尺寸縮到實際顯示尺寸,能再省下一大塊位元組——把一張寬 4,000 像素的圖嵌入寬 800 像素的欄位,絕大多數的資料其實都被浪費掉。如果要把影像發布到網站上,WebP 通常是能給出最小檔案大小的輸出格式。若需要透明背景或像素級完美的文字,就保留 PNG 並使用較高的品質設定。如果影像需要經過一連串工具處理——縮放、裁切、加浮水印、轉檔——把壓縮留到最後再做,能讓最終檔案盡可能緊實,避免中間步驟重新引入有損偽影。

延伸閱讀:影像壓縮入門:白話英文指南。