LoginSignup
4

More than 1 year has passed since last update.

cwebpでWebPへフォルダ内のJPG・PNG画像を一括変換するシェルスクリプト

Last updated at Posted at 2021-05-02

プロローグ

EdgeのレンダリングエンジンもChromeと同等になり対応、またSafariも対応してきたWebP。

ひと手間増えて面倒だけど、いよいよWebPを通常採用する時期にきたのかもしれませんね...

参考サイト

Big Sur搭載のSafariはWebP画像を標準サポート、AVIFもサポートしてくれるかも
Can I use WebP ?

本稿の内容

  • cwebpとシェルスクリプトを使って、任意のディレクトリ内のJPG画像およびPNG画像を、一括変換する方法の共有
  • ※本稿はmacで動作確認をしています。他のOSは適宜調整ください。

タスク

(準備)cwebpのインストール

(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

(2)画像のあるディレクトリへ、シェルスクリプトを配置

  • 任意のディレクトリへconvert2webp.shと、変換したい画像を配置します
  • 画像はディレクトリ毎に分けていてもOKです
  • 例えば、こんな感じ↓です

スクリーンショット 2021-05-02 13.58.58.png

(3)シェルスクリプトの実行

terminal
$ sh convert2webp.sh
  • 変換が始まります

スクリーンショット 2021-05-02 14.00.36.png

ビフォア・アフター

  • ↓左が変換前、右が変換後
  • {$ファイル名}.webp という変換後のファイルが生まれていることが確認できます

スクリーンショット 2021-05-02 14.23.24.png

シェルスクリプトを少し解説

#!/bin/sh

convert2webp.sh
#!/bin/sh

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"すると、こんな感じ↓

スクリーンショット 2021-05-02 14.05.27.png

(余談)変数への代入の"="の前後にスペースを入れるとエラーになる

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 $Fileprintf "\n---\n\n"はターミナル上の進行状況を見やすくするために入れたので、処理自体には入れなくてもよい(不要な)部分です
  • cwebp ~オプション~ $FileでWebP変換
  • -preset photo -metadata icc -sharp_yuv -o $File".webp" -progress -shortがオプションです
  • 特に-o $File".webp"で出力先および変換後のファイル名を指定していることに注目。この設定では、変換前のファイルと同じディレクトリへ、{$ファイル名}.webpという名称で保存されることになります
  • その他のオプションについては、下記の参考サイトをご参照ください

参考サイト:cwebpのオプション

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4