同樣是「壓縮 WebP」,不同的人想做的事完全不一樣:
有人是想把一堆 JPG、PNG 轉成 WebP;有人是手裡已有 WebP,想再壓小一點;還有人要處理的是會動的 WebP。
工具沒有絕對的好壞,只有適不適合。這篇文章按場景來推薦,每個場景只給最順手的一兩個。
開始之前:兩分鐘了解 WebP
WebP 其實有三種形態:
- 有損 WebP:原理類似 JPEG,按品質參數丟棄細節,體積小,適合照片、Banner。
- 無損 WebP:原理類似 PNG,像素完全不變,適合截圖、UI 素材。
- 動態 WebP:多幀動畫,可以有損也可以無損,常見於從 GIF 轉換來的表情包和演示動圖。
不確定手裡是哪種,用 Google 官方的 webpinfo 看一眼:
bash
brew install webp
webpinfo image.webp
輸出裡有 VP8 是有損,VP8L 是無損,有 ANIM / ANMF 就是動圖。
還有一件事值得先知道:有損 WebP 用更高的品質參數重新編碼,體積會變大,畫質卻不會變好——丟掉的細節回不來。所以對已經是 WebP 的圖,好的壓縮工具應該能判斷「壓不動就不壓」。
場景一:把 JPG / PNG 批量轉成 WebP
這是多數人第一次接觸 WebP 時要做的事。
圖形介面選 XnConvert。 免費、跨平台,可以一次拖進一批圖,設定 WebP 的品質或無損模式,順帶改尺寸、改檔名。轉格式這件事,它是最省心的。
寫進建構流程選 cwebp 或 sharp。 網站專案裡,與其手動轉,不如在打包或上傳 CDN 時自動處理:
bash
cwebp:品質 75,最慢最省的編碼方式,保留顏色配置檔案
cwebp -q 75 -m 6 -metadata icc input.jpg -o output.webp
js
// sharp(Node.js)
await sharp('input.jpg').webp({ quality: 75, effort: 6 }).toFile('output.webp')
拿不准參數?先用 Squoosh 試。 Google 的線上工具,一次處理一張,但可以左右分屏、即時拖動品質看效果。摸清楚「這類圖用多少品質合適」,再把參數填進上面的批量工具。
場景二:已經是 WebP,想再壓小一點
網站早就換成了 WebP,Lighthouse 還是提示「圖片可以進一步壓縮」;或者素材目錄裡一堆 WebP,占著空間。這時候需要的不是轉格式,而是在原地把現有檔案變小。
Mac 使用者:ImgZilla
ImgZilla 是我們做的 macOS 圖片壓縮工具,這個場景正是它最擅長的:
- 原地壓縮,路徑不變。
banner.webp壓完還是banner.webp,網頁、程式碼、文件裡的引用一行都不用改。 - 整個資料夾拖進去。遞迴掃描所有子目錄,自動跳過隱藏檔案和
node_modules;WebP 和 JPG、PNG、GIF、AVIF、HEIC、SVG 混在一起也能一次處理完。 - 不用調參數。使用 Google libwebp 編碼,品質 75、編碼努力程度 4,與 Squoosh 預設參數一致;透明通道以最高品質保留,透明背景不會出現毛邊。
- 壓不動的不硬壓。重新編碼後如果沒有變小(壓縮率不足 0.4%),就標為「已最小」並保留原檔案,不會把更大的檔案交給你,也不扣免費額度。
- 可以反悔。原圖預設移入資源回收筒,覺得哪張不滿意,右鍵「放回原處」即可。
- 全程本地執行,素材不上傳任何伺服器。
其他平台:Caesium 或 TinyPNG
- Caesium Image Compressor:開源免費,Windows、macOS、Linux 都能用,支援 WebP 批量壓縮,可以設定品質和是否保留元資料。
- TinyPNG:網頁工具,同樣支援 WebP。拖進去就行,但免費版有張數和大小限制,圖片要上傳到對方伺服器。
場景三:動態 WebP
動圖分兩種需求:
把 GIF 轉成動態 WebP:用 Google 官方的 gif2webp(與 cwebp 同在 libwebp 工具包裡,Mac 上 brew install webp 即可)。同樣的動畫,動態 WebP 通常比 GIF 小很多。
bash
gif2webp -q 75 -m 6 input.gif -o output.webp
已有的動態 WebP 想再壓小:很多工具遇到動圖會直接報錯,或者只保留第一幀。ImgZilla 支援動態 WebP 的再壓縮——逐幀重新編碼,幀數、每幀時長、循環次數、畫布尺寸都保持不變,動畫還是原來的動畫,只是檔案更小。和靜態圖一樣,壓不動的會標為「已最小」並保留原檔案。
場景四:必須像素不變
UI 切圖要和設計稿嚴格一致、截圖要做像素級比對、素材之後還要繼續編輯——這些情況需要無損。
用 cwebp:
bash
純無損
cwebp -lossless -z 9 input.png -o output.webp
近無損:像素有極微小變化,但比純無損小不少,適合截圖和 UI
cwebp -near_lossless 60 input.png -o output.webp
注意:ImgZilla 對 WebP 統一使用有損編碼,包括原本是無損的 WebP。體積通常會明顯變小,但像素不再逐一相同。另外它會去掉 WebP 裡的元資料(包括顏色配置檔案),普通 sRGB 圖片不受影響,帶 Display P3 等廣色域配置的圖在色彩管理軟體裡顏色可能略有差異。對像素和顏色有嚴格要求的圖,請用 cwebp,或者壓縮前先挑出來。
一張表總結
| 你要做的事 | 推薦 | 備選 |
|---|---|---|
| 把 JPG / PNG 批量轉成 WebP | XnConvert | cwebp、sharp(建構流程) |
| 試參數、單張處理 | Squoosh | — |
| 已有 WebP 原地再壓小(Mac) | ImgZilla | Caesium |
| 已有 WebP 再壓小(Windows / Linux) | Caesium | TinyPNG |
| GIF 轉動態 WebP | gif2webp | — |
| 已有動態 WebP 再壓小 | ImgZilla | 自行用 libwebp 寫腳本 |
| 必須像素不變 | cwebp -lossless / -near_lossless |
— |
下載連結
| 工具 | 平台 | 價格 | 下載 |
|---|---|---|---|
| ImgZilla | macOS 12.3+ | 免費版每天 10 張 | Mac App Store |
| XnConvert | Windows / macOS / Linux | 個人免費 | xnview.com |
| Caesium Image Compressor | Windows / macOS / Linux | 免費開源 | saerasoft.com |
| cwebp / gif2webp / webpinfo | 命令列 | 免費開源 | Google 官方下載,Mac:brew install webp |
| sharp | Node.js | 免費開源 | sharp.pixelplumbing.com,npm install sharp |
| Squoosh | 網頁 | 免費 | squoosh.app |
| TinyPNG | 網頁 | 免費版有限額 | tinypng.com |
最後
WebP 本身已經是很高效的格式。如果你的 WebP 是 CDN 或建構工具用合理參數生成的,再壓的空間可能不大,看到「已最小」是正常的;真正省得多的,往往是那些用高品質參數匯出、從 PNG 無損轉換來、或者從 GIF 直接轉出來沒再處理過的檔案。
先用 webpinfo 看清楚手裡是什麼,再按場景挑工具,比在十個工具之間來回試要省時間得多。
ImgZilla 目前僅支援 macOS(12.3 及以上),可在 Mac App Store 下載。免費版每天可壓縮 10 張,只有壓縮成功才計入額度——把裝滿 WebP 的資料夾拖進去,看看能省下多少。
