画像ファイルをwebpに変換する(Mac) • 石山祐己のホームページ

前提

ウェブサイト画像の最適化を図るには、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はいいぞ。

次回予告

同じようなやり方で画像サイズ縮小ツールを作る。