✏️2022/8/30

【webp】Webサイトを軽くしたい！

webpとはjpegよりも25～34%軽量の画像フォーマットです．

squooshというwebアプリでオンライン上で簡単にwebpに変換できます．

コマンドラインからwebpに変換する

オンラインで処理すると細かいと調整が直感的に行えていいのですが，毎回細かい調整が必要ない場合は逆に面倒です．そこで，ソースコードを自分のパソコンに落としてきてコマンドラインから処理できる Squoosh CLIを使います．

次のように，npmを用いてSquoosh CLIをインストールした後，コマンドラインから画像変換します．

$ npm i -g @squoosh/cli
$ squoosh-cli --webp '{"quality":75}' your_image.jpg

'{"quality":75}'の部分を修正すると画質を調節できます．

複数枚の画像を一気にwebpに変換する

上記のようにして画像を一枚ずつコマンドラインに入力するのが面倒なので，画像があるディレクトリを選択したらその中にある画像をすべて見つけ出して 変換できるようにスクリプトを組みました．

Linux環境で動きます．Windowsの方はWSLを導入することをお勧めします． インストールの方法はWSL を使用して Windows に Linux をインストールするに詳しいです．

#!/bin/sh -e

dir_path=${1:?}             #第一引数は画像を置いてあるディレクトリへのパス(必須)
input_type=${2:-jpg}        #第二引数は変換前の画像形式(デフォルトではjpg)
output_type=${3:-webp}      #第三引数は変換後の画像形式(デフォルトではwebp)
pwd=$(cd $dir_path && pwd)
echo $input_type "=>" $output_type "in" $pwd
echo

dir_path="$pwd/*"
dirs=`find $dir_path -type d`

for dir in $dirs;
do
    if ls $dir/*.$input_type > /dev/null 2>&1
    then
        file_path=$dir
        files=`find $file_path -maxdepth 1 -name "*.$input_type" -type f`
        for file in $files;
        do
            echo $file
            squoosh-cli --$output_type '{"quality":75}' -d $dir $file    #{"quality":75}の部分を修正して画質を調節
            # rm $file      #画像を変換後，元の画像を削除する場合はこの行を有効にする
        done
    fi
done

とりあえず早く使いたい人用

• 上記のコードをコピーして適当なファイル名をつけて保存します（例：squoosh.sh）.
• Squoosh CLIをインストールした後，コマンドラインで

  $ ./squoosh.sh <画像があるディレクトリへのパス 例：./Pictures>

  と入力します．
• デフォルトだと元の画像は削除されず変換後のコピーが生成されます．
• ディレクトリが入れ子構造になっていても内側のディレクトリもすべて探しに行きます．

もう少し詳しい使い方

• ./squoosh.sh の第二引数で変換前の画像フォーマット(jpg, png など)，第三引数で変換後の画像フォーマットを指定できます．

  $ ./squoosh.sh ./Pictures png avif

• '{"quality":75}'の部分を修正して画質を調節できます．私は'{"quality":5}'とかにしているので，処理速度もかなり速いです．

記事一覧に戻る