縮小、裁切、轉檔、修圖都難不倒我！
此教學適合 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.pngImageMagick 參考更多圖片變數設置
轉檔
# 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 *.jpgImageMagick 參考更多檔案類型
實際運用
最常遇到的攝影照片大小都是超過寬 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 
網頁用圖片最佳化建議
圖片大小
最大不超過 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 參考
- ImageMagick 所有 command line
- ImageMagick Tutorial
- Use ImageMagick to quickly and easily process images for your blog
還有更多好玩實用的等你來發掘