プロローグ
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という名称で保存されることになります
その他のオプションについては、下記の参考サイトをご参照ください
参考サイト：cwebpのオプション
cwebp Encoder
【保存版】知らないと画質が落ちるWebP変換おすすめパラメーター設定例 JPEG/PNG編
↧
