Squooshで複数の画像を一気に圧縮したい!

ブログ

どうもトミです。

ゲーム開発のノウハウや日常生活での面白い出来事など、人に共有し共感を得られたら嬉しいなと思い、最近ブログをはじめました。
ブログはどうしても沢山の文章を書かないといけないですが、文字だけだと少々殺風景で分かりづらいこともあり、画像を備えてあげることでイメージが湧きやすくていいと思います。
特にブログにおける画像のサイズが重要で大きすぎるとサイトの読み込みに時間が掛かって読者の離脱に繋がりかねないです。

そこで出来ることなら同じサイズ、同じ品質の画像を扱いたいので素の画像をそのまま使うのではなく、圧縮ツールを使って使いやすいサイズに整えてあげる必要があります。
今回は数多いツールの中で、Squooshについて解説しますのでぜひ最後まで読んでいただけると嬉しいです。

Squooshとは?

SquooshとはGoogleが生み出した画像圧縮ツールで沢山の画像形式に対応でき、且つシンプルなUIで初心者にとってもとても使いやすいツールです。

このように画像を取り込むと画面が左右に分割されて圧縮前後の変化を目で確認しながら、好きなように設定できるようになっているのが特徴です。
上記の例だと、取り込み元の画像より50%のサイズにResizeした時の設定です。それをやっただけで54%もサイズダウンしているのが分かりますね。

ブログ用でSquooshの主な使い方

ブログ用の画像加工で主に以下の設定をすればいいです。

  • Resize
    • 画像のWidth、Heightを直接指定する
    • パーセンテージで指定する
    • ちなみにSquooshでは自動で縦横比が保ってくれるのでどちらかの数値を変更すればいいみたいです
  • Quality
    • デフォルトが75%
    • 100%なら元画像と変わらないですがこの数値を小さくするほど圧縮率が高くなり、品質が荒くなるのでお好きなように調整できる

他にもいろいろな設定ができるので興味があれば遊んでみてください!

Squooshを使って複数の画像を一気に圧縮する方法(Mac用)

これまではSquooshの簡単な使い方を解説しました。
しかしそれだけだと、扱う画像が少なければいいが、大量の画像を扱う場合は非常に面倒くさいので、そこでSquooshを使って一気に圧縮する方法をご紹介します。
この方法はシェルスクリプトを使うので少々難しいかもしれないですが一度作ってしまえば後々楽なのでオススメです。

尚こちらの方法はMac向けです。Windowsの方は多分同じようなことができると思いますが何かのヒントになれば幸いです。

では行きます!

前準備

シェルスクリプトで画像のサイズを知るためにidentifyコマンドを使いますので事前にインストールしておいてください。

brew install imagemagick

inputフォルダとoutputフォルダを作成

まずは元画像と加工後画像を格納するためのフォルダinputとoutputをDesktopで作成してください。

シェルスクリプトを作成

ターミナルで先程作ったinputとoutputのディレクトリ(Desktop)へ移動します。

cd ~/Desktop

移動したら以下のコマンドでシェルスクリプトを作成します。

vi squoosh_jpeg.sh

エディタが開いたら以下のコマンドをコピペして保存してください。
※コピペはいつものcommand + c とcommand + v
※保存は:wq + Enter!

export PATH=$PATH:/usr/local/bin

files="/Users/ユーザー名/Desktop/input/*"
for filepath in $files; do
  width=$(identify -format "%w" $filepath)
  height=$(identify -format "%h" $filepath)
  resizePrefix="height:"
  if [ $width -ge $height ]; then
    resizePrefix="width:"
  fi
  squoosh-cli --mozjpeg '{"quality":30}' --resize "{"$resizePrefix"850}" -d "/Users/ユーザー名/Desktop/output/" $filepath
done

少し解説します。
まずはinputフォルダにある画像ファイルをforで回し、順に処理します。
identifyで各々の画像の幅と高さを取得します。
取得した幅と高さを比較して横長の画像であれば、幅を基準に、縦長なら高さを基準にサイズを決める
squoosh-cliを使って画像の圧縮処理を行います。
–mozjpegは圧縮後のフォーマット、ここではjpegになります。
{“quality”:30}は30%まで圧縮しますよという設定です。
–resize “{“$resizePrefix”850}”は画像の横と高さを指定しています。
-d “/Users/ユーザー名/Desktop/output/”は圧縮した画像の出力先フォルダの指定です。
$filepathは圧縮元の画像ファイルのパスになります。

この例では横幅または高さが850でフォーマットがjpegの画像が出力されるようになっています。
フォーマットを変更したい場合は–mozjpegを任意のフォーマットに変えればいいです。
例えばpngにしたい場合は–oxipngにすればいいです。
同様にqualityもsizeも好きな数値に変えてみればいいです。

シェルスクリプトの実行

元画像群をinputフォルダに放り込んだら以下のコマンドで実行するとoutputフォルダに圧縮した画像ができるはずです!

sh squoosh_jpeg.sh

終わり

如何でしょうか?
私もSquooshを触り始めたばかりなので、まだまだ知らないことだらけですがブログで使う画像の圧縮だけなら、これでひとまず事足りるはず(そう信じたい)

コメント

タイトルとURLをコピーしました