制作
|
Published
|
4 min read
画像ファイルをwebpに変換する(Mac)
![img of 画像ファイルをwebpに変換する(Mac)](/_astro/digital2.DxIam_hm_1YQQdK.webp)
前提
ウェブサイト画像の最適化を図るには、jpgやpngなどを適切なサイズのWebp形式にしてしまうのが手っ取り早い。
今どきはウェブ検索すればそんな処理をしてくれるツールが見つかるのでそれに頼ってもいいのだが、いちいちそんなのを探したりせずローカルでサクッとスマートに処理しようよ、という前提。
ターミナルより実行する、いわゆるコマンドラインツールを作る。
環境
MacBook Air 15インチ
M3 2024 macOS 14.4.1(23E224)Sonoma
ターミナルソフト: iTerm2
準備
以下すべてターミナルでの話。
ImageMagick導入
ターミナルよりImageMagickをインストール。
brew install imagemagick
とりあえず実行してみる(zsh)
ここではしれっと840pxサイズに縮小もする。
ウェブ制作業者で5400pxくらいの画像をそのまま載せるようなところもあるが、チコちゃんあたりに叱られて欲しい。
setopt nullglob
mkdir -p converted_images
for img in *.{jpg,JPG,jpeg,JPEG,png,PNG}; do
convert "$img" -resize 840x840\> -quality 80 "converted_images/${img%.*}.webp"
done
これで画像変換でき目的は果たせた!
のだが、これを毎回打つのは大変なのでシェルスクリプト化する。
そしてせっかくなのでエラー処理を入れたり、進捗をグラフィカルっぽく表示したりと、いい感じにしてみよう。
シェルスクリプトの作成(bash)
新規にテキストファイルを作成、以下のように記入し、保存。
ここでファイル名は仮に「img2webp.sh」とする。
#!/bin/bash
shopt -s nullglob
mkdir -p converted_images
NC="\033[0m"
GREEN="\033[0;32m"
CYAN="\033[0;36m"
RED="\033[0;31m"
total=$(ls *.{jpg,JPG,jpeg,JPEG,png,PNG} 2> /dev/null | wc -l | xargs)
count=0
# 画像ファイルをWebP形式に変換し、リサイズ
for img in *.{jpg,JPG,jpeg,JPEG,png,PNG}; do
convert "$img" -resize 840x840\> -quality 80 "converted_images/${img%.*}.webp"
let count+=1
percent=$((100*count/total))
printf "\r${GREEN}["
filled=$((percent/2))
for ((i=0; i<filled; i++)); do
printf "#"
done
for ((i=filled; i<50; i++)); do
printf " "
done
printf "] ${percent}%% (${count}/${total})${NC}\n${CYAN}$img${NC}\n"
done
if [ "$count" -eq 0 ]; then
echo -e "${RED}No image files were processed. Please check your files and try again.${NC}"
else
echo -e "\n${GREEN}Image conversion to WebP format and resizing complete. $count files were processed.${NC}"
echo -e "${CYAN}Why don't you check the 'converted_images' folder?${NC}"
fi
実行権限付与
chmod +x img2webp.sh
ファイル移動
sudo mv img2webp.sh /usr/local/bin/
使用方法
変換したい画像ファイルがまとまっているディレクトリに移動し、ターミナルで実行。
img2webp.sh
すると以下のように表示される。
- 画像ファイルがなければその旨を。
- 画像ファイルがあればその進捗状況を。
- 画像ファイルの処理が完了したら「converted_images」フォルダをチェックせよと。
正常に実行完了すれば、「converted_images」フォルダ内に変換後のwebpファイルたちが生成される。
結果
これでわざわざブラウザからテキトーな変換ツールを探したりすることもなくなる。
画像をフォルダにまとめて、そこで「img2webp.sh」を実行するのみ。
ImageMagickはいいぞ。
次回予告
同じようなやり方で画像サイズ縮小ツールを作る。