如何將圖片快速轉為 webp (Mac 篇)

什麼是 WebP?

在數位時代,網頁效能對於用戶體驗至關重要。哪怕網頁慢個 1 秒,都有可以流失大量潛在用戶。

加載速度慢的網頁不僅影響用戶滿意度,還可能導致「較高的跳出率」和「較低的轉換率」。

其中,圖片檔案佔用的數據量往往是網頁加載緩慢的主要原因之一。

WebP ,就是針對這個問題誕生的圖片格式,比起 JPEG 和 PNG 都能大量減小容量。

這裡,我們將探討WebP格式的重要性及如何將常見圖片格式轉換為WebP,以優化您的網頁性能和 SEO。

我們來比較一下常見的圖片格式:

功能/格式JPEGPNGWebP
壓縮類型有損壓縮無損壓縮支援有損和無損壓縮
檔案大小中等較大極小(通常可達 JPEG 5-10%)
圖像質量非常高
透明度支援不支援支援支援
動畫支援不支援不支援支援
顏色深度通常為8位高達16位8位或10位
廣泛支援
適用場景攝影圖像、網頁圖像圖標、透明圖像網頁圖像、透明圖像、動畫

這個表格說明了為什麼WebP在網頁設計中非常重要。

相比於JPEG和PNG,WebP提供了更小的檔案大小和高圖像質量的平衡,同時支援透明度和動畫。

這使得WebP成為一種非常適合網頁使用的圖片格式,有助於加快網頁加載速度,改善用戶體驗,並有利於 SEO 優化。

Mac 用戶如何快速將圖片轉為 WebP?

第一步:用 brew 安裝 webp 程式

首先按下 command + 空白鍵 開啟「Spotlight 搜尋」

1

輸入 「terminal」 開啟「終端機」

2

接著在「終端機」輸入以下 code,按 Enter,下載 brew(若下載過可省略)

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
3

接著在「終端機」輸入以下 code,並按 Enter,用 brew 下載 webp(若下載過可省略)

brew install webp
4

最後,在「終端機」輸入以下 code,確認安裝成功

which cwebp # 如果輸出 /opt/homebrew/bin/cwebp 就是成功了
5

第二步:到 Automator 設定自動化程序

首先按下 command + 空白鍵 開啟「Spotlight 搜尋」。

輸入「Automator」 開啟「Automator」。

6

接著選取「快速動作」。

7

在「變數」搜尋框打「執行 Shell 工序指令」。

將「執行 Shell 工序指令」拖曳至「工作流程區」。

在框內打以下 code:

for f in "$@"
do
  /opt/homebrew/bin/cwebp "$f" -q 80 -o "${f%.*}.webp"
done
8

在「變數」搜尋框打「顯示通知」。

將「顯示通知」拖曳至「工作流程區」。

在「標題」輸入「通知」。

在「訊息」輸入「已將選取的圖片轉換為 webp 在同一路徑」。

9

剩下的設定

10

第三步:儲存程序

按下 command + S, 並將程序取名為「另存為 80% Webp」。

12

第四步:執行程序

接著對你想轉檔的圖片按右鍵→快速動作→另存為 80% Webp,就成功了!

11
蔡 立忠
蔡 立忠
文章: 12