プロローグ
EdgeのレンダリングエンジンもChromeと同等になり対応、またSafariも対応してきたWebP。
ひと手間増えて面倒だけど、いよいよWebPを通常採用する時期にきたのかもしれませんね...
参考サイト
Big Sur搭載のSafariはWebP画像を標準サポート、AVIFもサポートしてくれるかも
Can I use WebP ?
本稿の内容
-
cwebpとシェルスクリプトを使って、任意のディレクトリ内のJPG画像およびPNG画像を、一括変換する方法の共有 - ※本稿はmacで動作確認をしています。他のOSは適宜調整ください。
タスク
（準備）cwebpのインストール
- cwebpのインストール方法はググるとたくさん出てくるので、詳細は省略
- Google公開しているインストール方法→Getting cwebp, dwebp, and the WebP Libraries
(1)シェルスクリプトの用意
- メモ帳（テキストエディタ）を開き、下記のスクリプトをコピペ
- ファイル名
convert2webp.shで保存（ファイル名は何でもいいけど）
convert2webp.sh
# !/bin/sh
Files=$(find . -type f -iname '*'.jpg -o -iname '*'.png)
# printf "$Files\n"
for File in $Files
do
echo $File
cwebp -preset photo -metadata icc -sharp_yuv -o $File".webp" -progress -short $File
printf "\n----------------\n\n"
done
(２)画像のあるディレクトリへ、シェルスクリプトを配置
- 任意のディレクトリへ
convert2webp.shと、変換したい画像を配置します - 画像はディレクトリ毎に分けていてもOKです
- 例えば、こんな感じ↓です
（3）シェルスクリプトの実行
terminal
$ sh convert2webp.sh
- 変換が始まります
ビフォア・アフター
- ↓左が変換前、右が変換後
-
｛$ファイル名｝.webpという変換後のファイルが生まれていることが確認できます
シェルスクリプトを少し解説
#!/bin/sh
convert2webp.sh
# !/bin/sh
- シェルスクリプトを記述する際の、おまじない
- ちゃんと知りたいなら→#!/bin/sh は ただのコメントじゃないよ！ Shebangだよ！
find . -type f -iname *.jpg -o -iname *.png
convert2webp.sh
Files=$(find . -type f -iname *.jpg -o -iname *.png)
printf "$Files\n"
-
find .でカレントディレクトリ内を検索します - オプション
-type fで検索対象を「ファイル」に指定（なお-type dなら対象をディレクトリに指定） -
-iname *.jpg -o -iname *.pngで検索対象の拡張子をフィルタリング。-inameは大文字、小文字を区別しないで検索（*.jpgも*.JPGも拾う）。-oは「OR」の意味 -
find 〜のコマンドをFilesへ代入 - この時点で
printf "$Files\n"すると、こんな感じ↓
(余談）変数への代入の"＝"の前後にスペースを入れるとエラーになる
convert2webp.sh
Files=$(find . -type f -iname *.jpg -o -iname *.png) # OK
Files = $(find . -type f -iname *.jpg -o -iname *.png) # NG
- ちょっとはまった...
- 参考サイト：シェルで変数への代入方法(ありがちなエラー)
for ~ in ~;do ~ done
convert2webp.sh
for File in $Files
do
echo $File
cwebp -preset photo -metadata icc -sharp_yuv -o $File".webp" -progress -short $File
printf "\n----------------\n\n"
done
-
for ~ in ~;do ~ doneで$Filesをループ処理。$Fileとして取り出して、一つひとつ変換。 -
echo $Fileとprintf "\n---\n\n"はターミナル上の進行状況を見やすくするために入れたので、処理自体には入れなくてもよい（不要な）部分です -
cwebp ~オプション~ $FileでWebP変換 -
-preset photo -metadata icc -sharp_yuv -o $File".webp" -progress -shortがオプションです - 特に
-o $File".webp"で出力先および変換後のファイル名を指定していることに注目。この設定では、変換前のファイルと同じディレクトリへ、｛$ファイル名｝.webpという名称で保存されることになります - その他のオプションについては、下記の参考サイトをご参照ください