ImageMagick 批次處理圖片 • Yuli Yang • Web Developer Blog

縮小、裁切、轉檔、修圖都難不倒我！

此教學適合 Max OS X。

管理網站最常遇到也最麻煩的就是批次處理圖片，用 Photoshop 或是 Lightroom 也很耗時耗 CPU，電腦不夠強發燒當機更是常有的事。如果懂得用 command-line tools 可以省下不少功夫。

安裝 Homebrew & ImageMagick

開啟終端機（Terminal），安裝 Homebrew。

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# 更新 Homebrew
$ brew update

安裝 ImageMagick。

$ brew install imagemagick

如何使用 ImageMagick 處理圖片尺寸大小

基本用法

基本上今天會介紹到的有 convert 跟 mogrify，它們本質上是一樣的，差別在於 convert 必須指定檔案名稱，而 mogrify 則是如果沒有設定路徑會直接修改原始檔案。讓我們先看看縮放圖片基本用法：

# convert -resize "縮圖大小" 原圖路徑 新圖檔案路徑
$ convert -resize "600>" image.png new-image-folder/new-image.png

# mogrify -resize "縮圖大小" 原圖名稱
$ mogrify -resize "600>" new-image.png

# mogrify -path 設定新圖路徑 -resize "縮圖大小" 新圖名稱
$ mogrify -path new-image-folder/ -resize "600>" new-image.png
# 以上皆為處理單一檔案

# 批次處理圖片範例
# mogrify -path 設定新圖路徑 -resize "縮圖大小" 全部檔案.全部檔案類型
# 不更動檔名及檔案類型，圖片會處理並新增到 new-image-folder
$ mogrify -path new-image-folder/ -resize "600>" *.*
# convert 全部檔案.全部檔案類型 -resize "縮圖大小" 設定新圖路徑/設定新圖名稱.檔案類型
# 檔名會更改依次更改為 new-image-0.jpg、new-image-1.jpg
$ convert *.* -resize "600>" new-image-folder/new-image.jpg

縮圖 -resize & 裁切 -crop

# 縮圖 -resize 寬x高
# 大於 600px 寬的圖片會縮小至 600px，">" 代表小於 600px 寬的圖片則不放大，保持圖片比例。
$ mogrify -resize "600>" new-image.png
# 縮小 50%，保持圖片比例。
$ mogrify -resize 50% new-image.png
# 寬高調整至 64px，保持圖片比例，如只設定高度數字前直接加 "x"，例如 "x64"。
$ mogrify -resize 64x64 new-image.png
# 也可以自由設定 px 和 %，寬度 64px、高度縮小至 20%。
$ mogrify -resize 64x20% new-image.png
# "!" 寬高硬性調整至 64px，不保持圖片比例。
$ mogrify -resize 64x64! new-image.png

# 裁切 -crop 寬x高+x軸+y軸，+0+0 = (0,0) 為最左上
$ convert -crop 600x300+0+50 image.png new-image.png
# 置中裁切 -gravity center
$ convert -gravity center -crop 600x300+0+0 image.png new-image.png

ImageMagick 參考更多圖片變數設置

轉檔

# convert 基本用法 image.jpg => new-image-folder/new-image.png
$ convert image.jpg new-image-folder/new-image.png
# mogrify 基本用法 image.jpg => new-image-folder/image.png
$ mogrify -path new-image-folder/ -format png image.jpg

# 大量轉檔
# -path 設定新圖路徑
# -resize 高度調整至 600px 並保持比例
# -format 檔案類型 png、jpg、gif、tif、pdf
# *.jpg 指定資料夾內全部的 jpg 檔案
$ mogrify -path new-image-folder/ -resize x600 -format png *.jpg

ImageMagick 參考更多檔案類型

實際運用

最常遇到的攝影照片大小都是超過寬 5000px、3:2比例照片，網站通常需要的縮圖大小可能為 1:1 正方形。

# -path new-image-folder/ 調整圖片大小
# -resize "x1024" 調整圖片為 1024px 高、保持比例
# -gravity center -crop 1024x1024+0+0 置中裁切
# -quality 70 設定圖片品質為70（完整最高100）
# -strip 刪除所有EXIF資料
# *.* 批次處理全部檔案 
$ mogrify -path new-image-folder/ -resize "x1024" -gravity center -crop 1024x1024+0+0 -quality 70 -strip  *.*

16:9 比例照片常用在滿版背景或是輪播照片。

$ mogrify -path new-image-folder/ -resize "1024" -gravity center -crop 1024x576+0+0 -quality 70 -strip  *.*
$ mogrify -path new-image-folder/ -resize "1920" -gravity center -crop 1920x1080+0+0 -quality 70 -strip  *.*

有時候會遇到直立式照片想要改成 16:9 比例，多餘空間背景加白。

# -background white 背景設為白色（也可設定 #hexcolor）
# -gravity center 置中
# -extent 1920 加寬至 1920px 寬
$ convert image.jpg -resize x1080 -background white -gravity center -extent 1920 new-image-folder/new-image.jpg

ImageMagick 批次處理圖片 2 — 處理之後 After（範例使用黑色背景）

網頁用圖片最佳化建議

圖片大小

最大不超過 2048×2048：依據 StateCounter 台灣過去 12 個月比占最重的螢幕大小為 1920×1080（27.21%），所以其實滿版的需求 1920px 寬就已足夠、普通照片 1280px 寬即可。
背景圖、輪播照片 16:9（2048×1152、1920×1080、1600×900、1280×720、1024×576）
精選照片、文章照片 3:2（2048×1365、1920×1280、1600×1067、1280×853、1024×683）

圖片品質（Quality）

壓縮品質建議 65～80，Photoshop 預設品質高為 65，個人認為用 ImageMagick 直接壓縮品質圖片失真的很多，我會建議用 tinyjpg（tinypng）。

圖片命名

因 SEO 考量，用中線分開關鍵字 “-” 而非底線 “_”。

✓ fast-website.png

✗ fastwebsite.png ✗ fast_website.png

Resources 參考

還有更多好玩實用的等你來發掘