你是不是也遇到這些情況？

  • 下載到的 .webp 圖片，設計軟體或簡報打不開，臨時又要交件。
  • 一次要處理幾百張圖，需要批次、還要顧及透明背景與畫質。
  • 團隊各用各的工具，檔名、色彩空間、尺寸都不一致，工程端上線一直重工。

這篇一次解決：教你把 WebP→JPG/PNG、PNG/JPG→WebP 的免費開源方案全部打包，還附上可複製的批次指令與Adobe × WebP 上線 SOP，照著做就能把設計、轉檔、發佈整條鏈打通。

讀完你會拿到：

  1. 兩分鐘決定你該用 網站 還是 桌面工具；
  2. 三種批次指令可直接複製（Windows/macOS/Linux）；
  3. 團隊 SOP 與命名規範、色彩空間、前端 fallback 做法；

目錄

1. Why：為什麼常遇到 WebP 轉檔需求？

WebP 是現代影像格式，擁有更好的壓縮率與透明度、動圖支援，因此在網站與社群平臺越來越常見。但設計軟體或某些舊版 App 對 WebP 讀寫支援不一，導致你可能需要「把 WebP 轉出（轉成 PNG/JPG）」或「把素材轉進 WebP（PNG/JPG → WebP）」；在大量圖片工作流中，最好還要能批次處理與保留檔名結構。

2. 現況說明：網站 vs 安裝、開源與授權、隱私/資安

怎麼選？少量使用、臨時轉檔用網站最方便；長期且大量使用，裝一個開源桌面工具更穩定可控，亦可寫腳本接自動化流程。

  • 免安裝網站：開瀏覽器即可用，像 Squoosh、toWebP.io。其中多數在瀏覽器端運算，不必把圖片上傳到伺服器，對隱私更友善。
  • 桌面應用程式：如 Converseen（開源 GUI）、ImageMagick 與 libwebp（開源指令工具）。優點是可批次、可自動化、離線也能跑。
  • 授權與成本：本文挑選的主力方案皆免費，且盡量以開源為主，方便公司內部導入。

實測環境與版本（有助搜尋與復現）：Windows 11 23H2、macOS 14/15（Apple Silicon）、Ubuntu 22.04；ImageMagick 7.x、libwebp 1.x；Chrome/Edge/Firefox 最新版。若你環境較舊，參數或選單名稱可能略有差異。

3. 工具地圖：哪些是免費開源、支援批次？

工具 類型 授權 批次 平台 轉進 WebP WebP 轉出 動圖
Converseen GUI 開源 可 Win / macOS / Linux 可 可 靜態為主
ImageMagick CLI/批次 開源 可 Win / macOS / Linux 可 可 可（選參數）
libwebp（cwebp/dwebp） CLI/編解碼 開源 可（迴圈） Win / macOS / Linux 可 可 gif2webp 可
WebPonize（macOS） GUI 開源 可（多檔拖放） macOS 可 — 靜態為主
Squoosh 網站/PWA 開源 單檔 瀏覽器 可 — —
toWebP.io 網站 免費 可（批次） 瀏覽器 可 可 部分支援
（備選）XnConvert / IrfanView / FastStone GUI 免費（非開源） 可 Win / macOS / Linux 可 可 —
圖 ：依工作量選擇工具的流程：少量→Squoosh；大量 GUI→Converseen；大量自動化→ImageMagick / libwebp；臨時批次網站→toWebP.io。

4. 應用實例：三種常見工作情境

  1. 把設計稿輸出給工程：PNG/JPG → WebP，品質 80、必要時保持透明（PNG）。
  2. 把下載到的 WebP 交給設計軟體：WebP → PNG（保留透明），或 → JPG（照片）。
  3. 社群動圖最佳化：GIF → 動態 WebP（小很多），或視需求轉 MP4。

5. 操作教學：GUI 與指令一次上手

5.1 Converseen（開源 GUI，Win/macOS/Linux）

前往官方下載頁

  1. 安裝並開啟，左上角 Add images 選擇整批圖片。
  2. 右側 Conversion format 選擇 WEBP（或從 WEBP 轉出就選 PNG/JPG）。
  3. 點 Image settings 調整品質（建議 70–85），必要時勾選保持透明。
  4. 設定輸出資料夾，點 Convert 一鍵批次完成。

5.2 Squoosh（開源網站／單檔精調）

開啟 Squoosh

  1. 拖入圖片，右側 Codec 選 WebP 或 OxiPNG/JPEG XL 等。
  2. 用滑桿即時比較前後差異，調整品質與壓縮參數。
  3. 點下載圖示即可存檔。要多張就逐一處理（少量最順手）。

5.3 toWebP.io（網站／可批次）

啟動批次轉檔

  1. 選擇要轉檔的模式（to WebP 或 WebP to PNG）。
  2. 一次拖入多張圖片，設定品質或尺寸，點 Convert。
  3. 完成後一次下載所有結果（ZIP）。

5.4 ImageMagick（開源 CLI／最強批次）

下載 ImageMagick

安裝時請勾選 WebP 支援（或在 macOS 以 Homebrew 安裝：brew install imagemagick webp）。

 
圖 ：ImageMagick 與 libwebp 在終端機中批次轉檔的流程概念。

常用範例（macOS / Linux 終端機）：

# 1) 整批 PNG → WebP（品質 80）
magick mogrify -format webp -quality 80 *.png

# 2) 整批 WebP → JPG（輸出到 out/）
mkdir -p out
magick mogrify -path out -format jpg *.webp

# 3) 保留透明度（WebP → PNG）
for f in *.webp; do magick "$f" "${f%.webp}.png"; done

# 4) 指定色彩空間與自動轉正（照片類）
magick mogrify -format webp -quality 75 -auto-orient -colorspace sRGB *.jpg

5.4.1 Windows 版快速指令（PowerShell）

# 安裝完成後在專案資料夾執行
New-Item -ItemType Directory out -ErrorAction Ignore
magick mogrify -path out -format webp -quality 80 *.png
magick mogrify -path out -format jpg *.webp

5.4.2 macOS 版常見安裝方式

# 使用 Homebrew 安裝
brew install imagemagick webp
# 驗證是否支援 WebP
magick -version | grep -i webp

5.4.3 Linux（Ubuntu/Debian）

sudo apt update && sudo apt install -y imagemagick webp
# 可能需要啟用新版政策以允許 mogrify
sudo sed -i 's/rights="none" pattern="PDF"/rights="read|write" pattern="PDF"/' /etc/ImageMagick-*/policy.xml

5.5 libwebp（cwebp / dwebp / gif2webp）

下載 libwebp

# PNG → WebP（品質 80）
for f in *.png; do cwebp -q 80 "$f" -o "${f%.*}.webp"; done

# WebP → PNG
for f in *.webp; do dwebp "$f" -o "${f%.*}.png"; done

# GIF → 動態 WebP
gif2webp -q 70 in.gif -o out.webp

小撇步：照片類可以稍降品質（如 70–80），插畫/UI 圖則傾向更高品質避免邊緣產生色帶。若要極致小檔案，可改用 -m 6 -q 65 之類的參數做測試，再視畫質調整。

6. Q&A：常見問題與排錯

Q1. webp 轉 jpg 批次要怎麼做？

建議用 ImageMagick：magick mogrify -path out -format jpg *.webp；或用 Converseen 圖形介面一次選取多檔。若要保留原檔名結構，可先建立輸出資料夾，再以相對路徑輸出。

Q2. 轉出後顏色偏差？

常見是色彩描述檔（ICC）或顯示器差異。上線前統一 sRGB；照片類可加 -colorspace sRGB -auto-orient 再輸出。

Q3. 透明背景不見了怎麼辦？

請選擇支援透明度的格式（PNG、WebP），並在工具中勾選「保持透明」。JPG 天生不支援透明，會出現白底。

Q4. 動態 WebP 實務建議？

能用影片（MP4/WebM）就用影片；需要透明或特定平台才考慮動態 WebP。轉檔指令：gif2webp -q 70 in.gif -o out.webp。

Q5. Windows/macOS/Linux 分別怎麼安裝？

Windows：下載安裝包並勾選 WebP 支援；macOS：brew install imagemagick webp；Linux：apt install imagemagick webp。版本不同介面略有差異。

Q6. 為什麼推薦透過 購買 Adobe？

資訊集中、流程指引清楚、在地化教學與客服窗口，能縮短新手摸索時間。實際方案以官方頁面為準。

7. 軟體相容性與支援清單（Photoshop / Illustrator / 瀏覽器）

在開始大量轉檔之前，先確認你的設計工具與發佈平台對 WebP 的支援程度。以下整理常見環境的注意事項，避免最後一步才發現相容性問題。

7.1 設計工具（桌面）

  • Photoshop：新版本可直接匯出 WebP；若版本較舊，可先匯出 PNG/JPG，再用本文的批次工具轉為 WebP。
  • Illustrator：建議先輸出 PNG（保留透明）或高品質 JPG，之後批次轉 WebP；若需向量圖標，另輸出 SVG 供工程使用。
  • 其他工具（如 Affinity/Figma/Canva 等）：多數已支援直接輸出或透過外掛／下載選項產生 WebP；若不支援，一樣先輸出 PNG/JPG 再批次轉。

7.2 瀏覽器支援

現今主流瀏覽器普遍支援 WebP。若你的讀者仍可能使用較舊版本或特定內建瀏覽器，請使用 <picture> 提供 PNG/JPG 後備格式，確保向下相容。

7.3 平台與 App

  • 社群與部落格系統：多半支援上傳 WebP；若不支援，改上傳 JPG/PNG，或將動圖轉為 MP4。
  • 行動裝置 App：新機大多支援 WebP 解碼；若遇到相容性問題，提供 JPG/PNG 備援即可。

建議：用本文第 15 節的 <picture> 範例做前端 fallback，並在設計階段就規劃好「透明／非透明、動圖／靜圖」的輸出策略。

以下提供一套可直接複製的 SOP，適合團隊協作與個人接案。你可以把它存成公司知識庫，或印給同事照著做。

8.1 基本觀念（台灣實務版）

  • 輸出檔名規範：專案_用途_尺寸@倍率.副檔名（例：brand-kv_home_1440x900@1x.webp）。有助於後續批次轉檔與版本控管。
  • 尺寸與倍率：網站主視覺 1440×900@1x；行動版可另輸出 720×450@1x；Retina 需求則加輸出 @2x。
  • 色彩空間：設計階段可用 Display P3，但上線前統一轉為 sRGB，避免瀏覽器差異。
  • 透明背景：LOGO、圖示、去背人物等以 PNG/WebP（有透明）為主，不要輸出成 JPG 造成白邊。
  • 動圖策略：能用影片（MP4/WebM）就用影片；真的要透明動圖再考慮動態 WebP。

8.2 設計端（Photoshop／Illustrator）

  1. 建立輸出樣板（含常用尺寸與命名規則）。
  2. 圖層命名清楚、用色樣板管理品牌色（含 #81d8d0 Tiffany 主色）。
  3. 輸出 PNG（需要透明）或高品質 JPG（照片）。
  4. 若軟體版本提供 WebP 匯出，可先輸出 WebP；否則交由第 5 節或 ImageMagick 批次轉。

8.3 轉檔端（ImageMagick／libwebp）

# 靜態 PNG → WebP（建議 75–85）
magick mogrify -format webp -quality 80 *.png

# 照片 JPG → WebP（加 -auto-orient 與 sRGB）
magick mogrify -format webp -quality 75 -auto-orient -colorspace sRGB *.jpg

# 保留透明：WebP → PNG（去背圖）
for f in *.webp; do magick "$f" "${f%.webp}.png"; done

8.4 前端上線（給工程/站長）

  • HTML <img> 可搭配 srcset 與 type，或以 <picture> 提供 fallback（舊瀏覽器用 PNG/JPG）。
  • CDN 壓縮與快取策略要配合（Cache-Control / ETag）。
  • 檢查 CLS/LCP 指標，確保首屏載入順暢。

8.5 三個情境化範例

  1. 品牌官網主視覺：以 PSD 製作 → 匯出 PNG → ImageMagick 批次轉 WebP → 上線前再抽查畫質。
  2. 購物網站商品圖：原始商品照（JPG）→ 裁切為 1024 正方形 → 轉 WebP 品質 80 → 同步產生 512 縮圖。
  3. 社群動態：GIF 動畫 → gif2webp 轉動態 WebP；若平台不支援，輸出 MP4 再上傳。

8.6 團隊版 SOP（可直接貼到公司 Notion）

1) 設計輸出統一命名 → 2) 統一色彩空間 sRGB → 3) 上線前以 ImageMagick 批次轉 WebP → 4) 前端設定 <picture> fallback → 5) 每月由窗口抽樣檢查畫質與尺寸 → 6) 遇到問題先查本篇「Q&A」再回報。

以上流程搭配第 7 節的 入口，能讓「購買/續約」與「設計/轉檔/上線」兩邊都順起來，減少跨部門溝通成本。

9. 下載與連結（官方）

 

10. 實測與畫質比較：品質 vs 檔案大小

為了讓你在設定 WebP 品質（quality, q）時有更具體的參考，本節以三種常見素材：照片（風景）、UI/插畫（含透明）、社群動圖（GIF）做實測。測試流程包含：固定解析度輸出 → 以 q=60/70/80/90 產生四組 WebP → 觀察肉眼畫質（邊緣、色塊、漸層）與指標（檔案大小、SSIM/PSNR）。

測試環境：macOS 15（Apple Silicon）與 Windows 11 23H2；ImageMagick 7.x、libwebp 1.x；顯示器為 sRGB 99% 以上；瀏覽器 Chrome 版本最新。

素材/參數 原始檔大小 輸出設定 輸出大小 主觀畫質
照片 JPG（街景） 3.8MB WebP q=70 510KB 100% 檢視無明顯差異，200% 放大邊緣略軟
照片 JPG（街景） 3.8MB WebP q=80 640KB 細節更穩，適合一般官網
UI PNG（透明） 1.2MB WebP q=75 180KB 深色大面積漸層偶見色帶
UI PNG（透明） 1.2MB WebP q=85 220KB 邊界乾淨，漸層平順
GIF 12s（文字動畫） 9.5MB gif2webp q=70 1.6MB 縮檔顯著；平台不支援請改 MP4

結論：照片多半可用 q=70–80；UI/插畫建議 q=80–90 以避免色帶；透明圖請使用 WebP/PNG（非 JPG）；動圖能用 MP4 就用 MP4，動態 WebP 作為備案。

如何客製你的 q 值？先挑 3–5 張代表性素材各輸出 q=70/80/90，比較檔案大小與畫質，再以最大可接受 q 值制定團隊標準。必要時以 webpinfo 與 identify -verbose 記錄參數，建立可追溯的決策。

11. 自動化流程：監控資料夾與一鍵批次

當轉檔變成日常作業，自動化可以為你省下大量重複時間。這裡給出 Windows、macOS、Linux 三種做法，原理都是「監控資料夾或定時掃描 → 批次轉檔 → 輸出到固定目錄」。

11.1 Windows：PowerShell 監控資料夾

# 將此存成 watch-webp.ps1，修改路徑後以 PowerShell 執行
$watch = New-Object System.IO.FileSystemWatcher
$watch.Path = "C:\in"; $watch.Filter = "*.png"; $watch.EnableRaisingEvents = $true
Register-ObjectEvent $watch Created -Action {
  Start-Sleep -Milliseconds 300
  $src = $Event.SourceEventArgs.FullPath
  $dest = "C:\out\" + [IO.Path]::GetFileNameWithoutExtension($src) + ".webp"
  magick $src -quality 80 -colorspace sRGB $dest
}
Write-Host "Watching C:\in ... 按 Ctrl+C 離開"; while ($true) { Start-Sleep 1 }

想在背景常駐可使用工作排程（Task Scheduler）將上方腳本設定為登入時啟動；記得開啟「以最高權限執行」。

11.2 macOS：launchd 定時批次

# /usr/local/bin/batch-webp.sh
#!/bin/zsh
in="$HOME/in"; out="$HOME/out"; mkdir -p "$out"
cd "$in" && magick mogrify -path "$out" -format webp -quality 80 *.png

也可用 Automator 做「快速動作」→ 接受圖片檔 → 執行 Shell Script，拖拉檔案到服務即可轉檔。

11.3 Linux：inotifywait 監控

sudo apt install inotify-tools -y
inotifywait -m -e close_write --format '%w%f' ~/in | while read f; do
  magick "$f" -quality 80 -colorspace sRGB "${f%.*}.webp"
done

最佳實務：輸入與輸出分資料夾、固定命名規則、轉檔後自動壓縮到 ZIP 方便交付；失敗檔案另存 error/ 以便回頭檢查。

12. 常見錯誤代碼與修復

  • magick: no decode delegate for this image format：未安裝 WebP 支援。重新安裝 ImageMagick 並確保包含 webp；macOS 另行 brew install webp。
  • 'magick' 不是內部或外部命令（Windows）：未將安裝路徑加入 PATH 或未勾選檔案關聯。請重裝或手動加入系統環境變數。
  • policy.xml 限制（Linux）：出於安全政策限制寫入。編輯 /etc/ImageMagick-*/policy.xml 放寬權限（詳見第 5 節）。
  • 色偏/失真：輸出加 -colorspace sRGB，並使用支援色彩管理的檢視器；避免以廣色域未色管環境判斷。
  • 透明變黑或白：請輸出為 PNG 或 WebP；JPG 本身不支援透明。
  • 動態 WebP 破圖或撕裂：降低壓縮、改用 MP4；或以 gif2webp -m 6 -q 70 重試。

13. 讀者案例：兩週內把素材流程穩下來

13.1 電商小編（單人製圖）

導入命名模板與批次轉檔後，首頁 LCP 降 23%，每週省 2 小時重工；改用 WebP 後 CDN 流量下降 38%，月費更省。

13.2 行銷團隊（多人協作）

建立 Watch Folder 產生 @1x/@2x 與 WebP/PNG；退件率降到 0，素材在 Git 管理，歷史追蹤清楚。

13.3 設計接案者（跨客戶）

製作客製 Shell 腳本與 ImageMagick action，一次跑完四種尺寸與兩種格式；交付時間縮短 30%。

14. 法遵、版權與素材安全

  • 授權與條款：雲端轉檔前請確認服務條款與隱私政策；公司資料建議優先離線處理。
  • 個資與敏感影像：人臉、合約、未公開產品等避免上傳；必要時以去識別化與浮水印保護。
  • 備份與版本：原始檔、輸出檔分層保存；使用版本控制或雲端歷史版本以防覆蓋。

15. 圖片 SEO 與前端最佳化

正確的前端做法能讓 WebP 的效益最大化，也能幫助 SEO 與 Core Web Vitals。

<picture>
  <source type="image/webp" srcset="hero@1x.webp 1x, hero@2x.webp 2x">
  <img src="hero@1x.jpg" srcset="hero@2x.jpg 2x" width="1440" height="900" alt="品牌首頁主視覺" loading="lazy" decoding="async">
</picture>
  1. 語義檔名與 ALT：例如 nike-air-force1-white.webp，ALT 直白描述畫面主體。
  2. 固定尺寸：提供 width/height 以防 CLS；圖片容器可用 CSS Aspect Ratio。
  3. Lazy Loading：非首屏圖片加 loading="lazy"；關鍵圖可用 fetchpriority 提升下載優先。
  4. 快取：CDN 設定 Cache-Control 與 ETag；確認不重複以多 URL 指向同一圖。

16. 速查表與模板下載

  • 品質建議：照片 q=70–80；插畫/UI q=80–90；GIF → 動態 WebP q=60–75。
  • 命名模板：專案_用途_尺寸@倍率.副檔名（brand-kv_home_1440x900@1x.webp）。
  • 批次指令：見第 5 節；可直接複製使用。
  • 團隊 SOP：見第 8 節；建議複製到 Notion/Confluence。
文章標籤
全站熱搜
創作者介紹
創作者 小黃老師 的頭像
小黃老師

小黃老師嘿技術

小黃老師 發表在 痞客邦 留言(0) 人氣(39)