Small.imSmall.im
返回部落格

如何在不損失畫質的情況下縮小圖片大小

Small.im Team
2026年3月26日
5 分鐘閱讀
blog.tags.tutorial壓縮blog.tags.optimization

一份實用指南，教你如何聰明地壓縮圖片 —— 選擇正確的格式、調整最佳畫質參數，以及批量處理數百個檔案。

在 Web 世界裡，每一個 KB 都至關重要。載入緩慢的圖片會讓訪客抓狂，拖累搜尋排名，還會增加頻寬開支。好消息是：你完全可以在保持畫面清晰的前提下大幅縮減檔案大小。這篇指南手把手教你怎麼做。

有損 vs. 無損：先搞清區別

在碰任何滑桿之前，你需要理解壓縮的兩大基本思路。

無損壓縮 去除冗餘資料，但不改變可見像素。就像給資料夾打 zip —— 解壓後內容完全一致。PNG 預設使用無損壓縮，非常適合截圖、示意圖以及含有清晰文字的圖片。

有損壓縮 會丟棄人眼不太能察覺的資訊。JPEG、WebP 和 AVIF 都支援有損模式。本質上就是一個滑桿：畫質調低，檔案變小；但調過頭就會出現瑕疵 —— 模糊的邊緣、色彩斷層和方塊狀漸層。

核心洞察：大多數圖片可以丟棄 15-30% 的資料而不被任何人察覺。這就是壓縮的最佳區間。

各格式的最佳畫質設定

經過對數千張圖片的壓縮實踐，以下是我反覆驗證過的最佳參數：

JPEG —— 畫質設在 80-85%

JPEG 仍然是 Web 上使用最廣泛的圖片格式。在畫質 85% 時，一張典型照片相比未壓縮原圖可以縮小 60-70%，視覺差異幾乎看不出來。低於 75% 後，高對比度邊緣處就會開始出現偽影。

小技巧： 開啟漸進式 JPEG 編碼。它會分多次載入 —— 讓使用者幾乎立刻看到一個模糊預覽，而不是等待完整圖片下載時看到空白。現代壓縮工具基本預設開啟了這個功能。

用 Small.im 的 JPEG 壓縮器 親自試試 —— 完全在瀏覽器中執行，圖片不會離開你的裝置。

PNG —— 減少調色盤顏色數

PNG 天生是無損格式，所以沒有「畫質滑桿」。最大的優化空間在於減少顏色數量。一個包含 1600 萬色的 24 位元 PNG 通常可以轉換為 256 色的 8 位元 PNG，對於圖示、Logo 和 UI 元素來說，檔案大小減少 60-80% 而視覺上毫無差別。

如果照片被存成了 PNG（這種情況比你想像的更常見），最聰明的做法是轉換為 JPEG 或 WebP。去 Small.im 的 PNG 壓縮器 看看能省多少空間。

WebP —— 畫質 75-80%

WebP 是 Google 推出的現代格式，壓縮表現遠超預期。在畫質 80% 時，WebP 檔案通常比同等視覺品質的 JPEG 小 25-35%。它同時支援有損和無損模式，還支援透明度 —— 是真正的全能選手。

瀏覽器支援現在已經覆蓋 Chrome、Firefox、Safari 和 Edge。如果你還沒在提供 WebP 格式，那你正在白白浪費效能。在這裡把圖片壓縮為 WebP。

AVIF —— 畫質 65-75%

AVIF 是最新的競爭者，壓縮效率令人驚嘆。在畫質 70% 時，AVIF 檔案通常比同等 JPEG 小 40-50%。缺點？編碼速度較慢，舊版瀏覽器不支援。

我的建議：將 AVIF 作為主格式，搭配 WebP 或 JPEG 作為備用方案。<picture> 元素讓這一切變得很簡單：

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="描述" loading="lazy">
</picture>

用 Small.im 的 AVIF 壓縮器 產生你的 AVIF 檔案 —— 無需安裝軟體，檔案不會上傳到外部伺服器。

選擇正確的格式

以下是一個快速決策樹：

  • 照片和複雜影像 —— JPEG（相容性）或 WebP/AVIF（效能）
  • 截圖和文字密集型圖片 —— PNG（無損）或 WebP 無損模式
  • 圖示、Logo、簡單圖形 —— 優先用 SVG，其次用減色後的 PNG-8
  • 需要透明度 —— WebP 或 PNG（避免 JPEG —— 它不支援透明度）
  • 追求最大壓縮率、面向現代瀏覽器 —— AVIF

拿不準的時候，就用兩三種格式分別壓縮同一張圖片，比較檔案大小。你往往會對哪種格式在特定圖片類型上勝出感到意外。

批量處理工作流程

最佳化一張圖片很容易。批量最佳化幾百張，流程就變得關鍵了。以下是我常用的方法：

  1. 按格式分類。 把 JPEG、PNG 和其他格式分開 —— 它們需要不同的處理方式。
  2. 設定對應格式的畫質。 使用上面提到的最佳參數：JPEG 85%、WebP 80%、AVIF 70%。
  3. 批量處理。 把整個資料夾拖曳到 Small.im。它完全在瀏覽器本機處理 —— 沒有上傳限制，不用等待伺服器回應。
  4. 抽檢結果。 以全尺寸開啟幾張壓縮後的圖片。如果畫質可接受，就完成了。如果不行，把畫質調高 5% 重新處理。
  5. 衡量差異。 對比壓縮前後的資料夾總大小。對於未最佳化過的圖片，60-70% 的縮減是常見的。

給 Web 開發者的建議

除了壓縮本身，以下幾個實踐能讓你的圖片在正式環境中保持精簡：

使用響應式圖片。 透過 srcset 為不同螢幕寬度提供不同尺寸。在 375px 的手機螢幕上載入一張 2000px 寬的 Hero 圖純粹是浪費。

延遲載入首屏以下的圖片。 給初始頁面不可見的圖片加上 loading="lazy"。所有現代瀏覽器都原生支援。

設定明確的尺寸。 始終包含 width 和 height 屬性。這可以防止版面偏移，提升你的 CLS 分數。

在建置流程中自動化。 如果使用靜態網站產生器或 CI/CD 流程，加入圖片最佳化步驟。在建置時一次性處理，這樣就永遠不會意外發佈未最佳化的圖片。

持續監控。 使用 Lighthouse 或 PageSpeed Insights 來捕捉圖片退化問題。一次未最佳化的上傳就可能讓數週的最佳化工作付諸東流。

總結

在不損失畫質的前提下縮小圖片大小，並不是要找到一個萬能設定。關鍵在於為每種圖片類型匹配正確的格式和畫質等級，然後在整個工作流程中保持一致。

從本指南中的格式特定畫質設定開始，使用 Small.im 這樣的批量處理工具來完成繁重的工作，並且一定要抽檢結果。你的使用者 —— 以及你的伺服器帳單 —— 都會感謝你的。