• 首頁
• 指南
• 在 Mac 上把透明 PNG 轉成 WebP，背景不變黑的方法

在 Mac 上把透明 PNG 轉成 WebP，背景不變黑的方法

@SoNiceInfo 發布於 2026年9月22日

網頁設計師和開發者最頭痛的意外之一，就是發現透明 PNG 轉換成 WebP 後，背景整個變成黑色或白色。 WebP 本身完全能呈現清晰的透明效果與柔和的陰影。 以下說明如何在 macOS 上把數百個透明 PNG 檔案批次轉換成 WebP，同時完美保留透明度。

為什麼透明背景在 WebP 中會變黑

PNG 圖片除了紅、綠、藍三個色版之外，還有第四個色版：Alpha 通道（A），以 0（完全透明）到 255（完全不透明）定義像素的不透明度。

轉換後的 WebP 出現黑色或白色背景，幾乎都是以下兩個原因之一：

1. 轉換工具捨棄了 Alpha 通道：簡易的網頁轉換工具或老舊的影像函式庫（例如舊版的 PHP GD 腳本），會在編碼前強制把圖片轉成 24 位元 RGB。少了 Alpha 通道，透明的部分就會變回預設的黑色（RGB：0,0,0）或白色（RGB：255,255,255）。
2. 色彩混合不當（暗色邊緣）：如果邊緣的半透明像素與錯誤的底色混合，主體周圍就會出現明顯的暗色光暈或色邊。

依照 Google 官方的 WebP 規格編碼，透明度就能以數學上的精確度保留下來。

推薦方法 1：WebP Converter.（看得見又快速）

如果你偏好直覺的 Mac 介面，想在輸出前親眼檢查透明素材，WebP Converter. 是最好的工具。

內建的分割滑桿可以讓你在發布前，確認細微的陰影與反鋸齒邊緣看起來完美無瑕。

方法 2：使用 cwebp 指令與 -exact 參數

對終端機使用者和建置腳本來說，可以透過 Homebrew 安裝 Google 官方的 cwebp 工具：

brew install webp

以下是能可靠地批次轉換透明 PNG 的 shell 腳本。關鍵在於把 -lossless 與 -exact 參數搭配使用，避免看不見的 RGB 資料被改變：

mkdir -p webp_transparent
for f in *.png; do
  [ -f "$f" ] || continue
  # 保留透明度與 Alpha 通道，避免 RGB 滲色
  cwebp -lossless -exact "$f" -o "webp_transparent/${f%.*}.webp"
done

這樣就能確保透明像素不會造成邊緣滲色或壓縮瑕疵。

無損還是有損：透明圖片該用哪一種？

常見問題