你在網路上放的每一張圖片，都是在品質與大小之間做取捨。手機相機直接拍出來的照片大小約 3–8 MB；同一張照片若經過妥善壓縮，落在 150 KB 到 1 MB 之間，在正常瀏覽尺寸下肉眼看不出差異。把這件事做對，是讓網頁載入變快最快速的一招，而且你不需要 Photoshop——一個瀏覽器型的圖片壓縮工具就能在幾秒鐘內搞定，還不用把檔案上傳到任何地方。
圖片壓縮到底是怎麼運作的
有損壓縮（JPEG、WebP）會重新編碼圖片，並丟掉你眼睛不太會注意到的細節——例如天空中的細微漸層、陰影裡的雜訊、髮絲中的微小紋路。品質滑桿控制的就是這個丟棄的積極程度。像 PNG 這種無損格式則保留了每一個像素，這就是為什麼一張 PNG 照片往往比同一張 JPEG 照片大 5–10 倍。
你應該使用哪個品質設定？
老實說：比你想像的還要低。以下是一張典型的 3456×2234 螢幕截圖，在不同設定下壓縮後的大小：
| 品質 | 輸出大小 | 視覺結果 |
|---|---|---|
| 100% | 2.4 MB | 比原檔還大——絕對不要用 100% |
| 80% | 520 KB | 與原檔難以分辨 |
| 70% | 380 KB | 在正常縮放倍率下難以分辨 |
| 50% | 240 KB | 細節處略為變模糊 |
| 15% | 170 KB | 明顯的壓縮失真——壓過頭了 |
對於要放到網站的照片，從 70% 開始，再用壓縮前後對比來檢查文字與髮絲這類細節。如果是有小字的螢幕截圖，則維持在 80%，或改用 WebP，它處理銳利邊緣的效果更好。
JPEG 還是 WebP？
純粹論效率，WebP 勝出：在相同視覺品質下，檔案大小預期比 JPEG 小 20–30%，而且還支援透明度。每一個現代瀏覽器都支援它。只有在檔案需要用舊版軟體開啟，或要寄給你不確定對方用什麼工具的人時，才選 JPEG。
如何一步步壓縮圖片
使用圖片壓縮工具的方式：把檔案拖放到頁面上任何位置，一邊拖動品質滑桿一邊觀察分割畫面的壓縮前後對比，再下載結果。整個過程都在你的瀏覽器本機執行——照片從未離開你的裝置，這也代表不用等上傳，也沒有伺服器排隊的問題。
這對 SEO 為什麼重要
網頁速度是已確認的排名訊號，而最大內容繪製（LCP）——通常就是你的主視覺圖片——是多數網站表現最差的指標。把一張 2 MB 的主視覺圖片縮減到 300 KB，行動裝置上的 LCP 經常能從 4 秒以上降到 2.5 秒以下。如果你先把圖片縮放成實際顯示尺寸（請參考我們的圖片縮放工具），節省的量還會再疊上去。
如果你正在權衡各種選擇，JPEG vs PNG vs WebP：你應該使用哪種圖片格式？這篇文章有詳細說明。
如果你正在權衡各種選擇，如何在瀏覽器中壓縮圖片檔案大小這篇文章有詳細說明。
如果你正在權衡各種選擇，壓縮網頁圖片：實用指南這篇文章有詳細說明。
如果你正在權衡各種選擇，將圖片壓縮到 100KB 且不損失清晰度這篇文章有詳細說明。