如何為網頁壓縮圖片而不損失畫質

圖片通常是網頁上最重的東西。一張直接從手機相機出來、未經最佳化的照片就可能有好幾 MB —— 比一個網站上所有文字、程式碼和樣式加起來還大。壓縮圖片是大多數人為頁面速度所能做的最見效的改動，做得好則對訪客完全隱形。本指南講解圖片壓縮如何運作，以及如何在畫質沒有明顯下降的情況下縮小檔案。

為什麼圖片大小重要

每多一個 KB，都是訪客的瀏覽器在顯示你的頁面之前必須下載的資料。在快速的桌面連線上也許不明顯，但在行動網路上它直接拉長載入時間、惹惱使用者、損害搜尋排名 —— Google 把載入速度這類頁面體驗訊號當作排名因素。更小的圖片意味著更快的頁面、更低的頻寬帳單和更滿意的訪客。

有損 vs. 無損壓縮

把圖片檔案變小有兩種根本不同的方法。

無損壓縮

無損方法在不丟棄任何東西的前提下更有效率地打包資料 —— 解壓後你得到與原圖逐像素相同的副本。它安全，但節省有限，通常 10–50%。PNG 使用無損壓縮，所以它非常適合標誌、截圖，以及有銳利邊緣和純色的圖形。

有損壓縮

有損方法丟棄人眼不太會注意到的資訊 —— 細微的顏色變化、繁忙區域的細節 —— 以獲得大得多的節省，常達 70–90%。JPEG 和 WebP 使用有損壓縮。這種取捨由一個 品質（quality） 設定控制：品質越低，檔案越小但瑕疵越明顯。對照片而言，在合理品質水準下的有損壓縮幾乎總是正確選擇。

選擇正確的格式

你挑的格式和壓縮程度同樣重要：

• JPEG —— 照片的主力。到處廣泛支援。壓縮不錯，但沒有透明。
• PNG —— 最適合有銳利線條、文字或透明的圖形（標誌、圖示、截圖）。無損，所以照片會很大。
• WebP —— 一種現代格式，在相同視覺品質下通常比 JPEG 小 25–35%，並像 PNG 一樣支援透明。所有目前的瀏覽器都支援。對如今大多數網頁圖片來說，WebP 是最好的預設選擇。
• SVG —— 根本不是壓縮的照片格式，但對簡單的標誌和圖示，向量 SVG 在任何尺寸下都保持銳利清晰，而且往往只有幾 KB。

你能犧牲多少畫質？

對有損格式，品質通常用 0–100 的刻度表示。與直覺相反，這個範圍的頂端是浪費：品質 100 和品質 80 的差別往往看不出來，而品質 80 可能只有一半的檔案大小。一個實用的起點：

• 品質 75–85 —— 大多數網頁照片的甜蜜點。大幅節省，正常觀看無可見損失。
• 品質 60–75 —— 對不那麼在意絕對銳利度的大背景圖或縮圖足夠。
• 低於 60 —— 節省趨於平緩，而瑕疵（塊狀的天空、邊緣光暈）開始明顯。通常不值得。

最好的辦法是比較，而不是猜。以某個品質壓縮，在它實際顯示的尺寸下看結果，一檔一檔降低品質，直到你剛好開始看到差別 —— 然後往回升一檔。

先縮放，再壓縮

如果圖片遠大於所需，壓縮能做的也有限。一張 4000 像素寬的照片顯示在 800 像素寬的欄裡，攜帶的像素是任何人所能看到的五倍。把圖片縮放到它顯示的大致尺寸 —— 再壓縮 —— 往往是所有節省中最大的一筆。我們的 圖片縮放工具 一次搞定裁切、旋轉和縮放，全程在你的瀏覽器中。

一個簡單的流程

1. 把圖片縮放到它將顯示的最大尺寸。
2. 能用就選 WebP，追求最大相容性用 JPEG，帶透明的圖形用 PNG。
3. 以品質 ~80 壓縮，並在顯示尺寸下檢視結果。
4. 把品質往下調到你注意到差別為止，再往回升一檔。

最後三步用我們的 圖片壓縮工具 幾秒就能完成：放入一張或多張，它們就在你自己的裝置上即時壓縮 —— 什麼都不上傳到伺服器，因此對私密照片很安全。比較前後的大小，滿意了就下載。