Squooshで画像を一括圧縮してブログ作成を快適に

Squoosh とは？

https://squoosh.app/

googleが提供している、ブラウザ上で画像を簡単に圧縮等できるツールです。

Squooshでは、リサイズや圧縮前後の画像をリアルタイムに確認できますし、加えて、どのくらいのサイズに圧縮されたかも確認できます。

満足のいく画像ができたら後はダウンロードするだけ。

googleが提供している、そして、アプリをインストールしなくてもブラウザ上で簡単にできるということで、初心者の自分にとっては気軽に使い始められました。

コマンドラインからの画像圧縮

Squooshはコマンドラインからの利用も提供しています。

ブラウザで実際に見ながら圧縮できるのはとても良いのですが、毎回一枚ずつ圧縮していくのは非常に面倒だったりします。

自分の場合、写真はスマホで撮るもので画像の縦横サイズや画質は同じのため、圧縮後の縦横サイズや画質のパラメータは毎回同じで良かったりします。

そんな時、このコマンドラインからの圧縮は非常に助かります。

Node.js のインストール

Squoosh CLIはnpxかnpmで実行可能なのでNode.jsが必要です。

すでに環境に入っている場合は、スキップできます。

自分の環境はMacです。

始めにNode.jsのバージョン管理ツールを入れます。

brew install nodebrew

以下でnodebrewのバージョンを確認可能です。

nodebrew -v

エラーが出る場合は、setupしてあげると良さそうです。

nodebrew setup

次は、Node.jsのインストールです。

バージョンを指定してインストールも可能ですが、特にこだわりがなければ安定版で良いと思います。

nodebrew install-binary stable

インストールされたバージョンを以下で確認できます。

nodebrew ls

上記のコマンドの結果にあったように、今のままでは “current: none” となっており有効のバージョンが設定されていません。

以下のようにインストールしたバージョンで設定することができます。

nodebrew use {バージョン}

最後に環境パスを通します。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

ターミナルを再起動するなどして、以下で使えることが確認できれば完了です。

node -v

一括で画像圧縮

Squooshでは圧縮のためのコマンドをまるっとコピーさせてくれるようになっています。

この状態でコピーできたコマンドが以下になります。

npx @squoosh/cli --resize '{"enabled":true,"width":421,"height":316,"method":"lanczos3","fitMethod":"stretch","premultiply":true,"linearRGB":true}' --mozjpeg '{"quality":75,"baseline":false,"arithmetic":false,"progressive":true,"optimize_coding":true,"smoothing":0,"color_space":3,"quant_table":3,"trellis_multipass":false,"trellis_opt_zero":false,"trellis_opt_table":false,"trellis_loops":1,"auto_subsample":true,"chroma_subsample":2,"separate_chroma_quality":false,"chroma_quality":75}'

このパラメータで良ければ、後はアウトプット先のディレクトリと圧縮したいファイルを指定してあげると無事圧縮完了です。

例えば、jpg拡張子の画像全てを圧縮して”compressed” というディレクトリ先に出力したい場合は以下のようなコマンドになります。

npx @squoosh/cli --resize '{"enabled":true,"width":421,"height":316,"method":"lanczos3","fitMethod":"stretch","premultiply":true,"linearRGB":true}' --mozjpeg '{"quality":75,"baseline":false,"arithmetic":false,"progressive":true,"optimize_coding":true,"smoothing":0,"color_space":3,"quant_table":3,"trellis_multipass":false,"trellis_opt_zero":false,"trellis_opt_table":false,"trellis_loops":1,"auto_subsample":true,"chroma_subsample":2,"separate_chroma_quality":false,"chroma_quality":75}' -d compressed *.jpg 

コマンドの結果で、それぞれどの画像をどれだけ圧縮したか表示してくれるので分かりやすいです。

 ## 上記コマンドで表示される結果例

 20210807_1.jpg: 59.59KB
  └ compressed/20210807_1.jpg → 12.18KB (20.4%)
 20210812_1.jpg: 179.75KB
  └ compressed/20210812_1.jpg → 22.94KB (12.8%)

今回は圧縮画像の出力先のディレクトリを指定するのみでしたが、画像名のsuffixに追加して出力することも可能みたいです。

スマホで撮った縦の写真だとうまく処理できない

こんな感じで画像を一括圧縮できるのでとても便利なツールなのですが、残念ながらスマホ等で撮った縦の写真だとうまくいきません。。

ブラウザのSquooshの方で圧縮すれば問題ないのですが、Squoosh CLIで圧縮すると縦横反転してしまうのです。

Squoosh（ブラウザ） で圧縮した画像

Squoosh CLIで圧縮した画像

スマホで撮った写真等では基本的には横向きで保存されていて、Exifという撮影した位置情報などのメタデータに写真の向きも一緒に保存されています。

Squoosh CLIではExifをまるっと削除して圧縮しているらしく、「縦」で撮影した、という情報も削除されているため、意図どおりに圧縮しないみたいです。。

開発者もこれは仕様通りと言っているので、特に修正される予定もなさそうですね。。

https://github.com/GoogleChromeLabs/squoosh/issues/928

うーん、、横向きの写真しかSquoosh CLIでできないというのは残念です。。

なんとか解決策はないか、気が向いた時に考えてみようかな。

でも、横向き画像だけではありますが、このように一括圧縮できるので、ブログ用の画像も簡単に用意できてとても楽になりました。

一括でなくてもSquooshは便利だと思うので、興味のある方はぜひぜひ使ってみてください(*^^*)