Squooshをコマンドラインで使って複数画像を一括で圧縮する

Googleが画像圧縮ツールを公開しているらしい。

その名も「Squoosh」。

Squooshとは？

詳しく説明は省きますが、ザックリ箇条書きすると以下のような特徴を持ちます。

 

一言でいうと「神みたいな画像圧縮ツール」です。

正直、ほかの画像圧縮ツールの存在価値がなくなってしまうのでは･･･？と心配するレベル。

 

個人的に「良いな」と思うポイントはPNGの圧縮（色数を減らす、ディザ）もできる点です。これができる圧縮ツールは中々ないんですよねー。

今までは

• TynyPNG
• Screenpresso

のPNG圧縮機能を使っていたのですが、今はSquooshに一本化しました。

あとWebPやAVIF（！）に対応してる点も素晴らしい！😍

コマンドラインからの利用方法

そんなSquooshですが、実はコマンドラインからも使用できます。

つまり、複数の画像を一括で圧縮することもできます！😍

 

以下の公式ページに使い方が書いているのですが

squoosh/cli at dev · GoogleChromeLabs/squoosh

 

実はもっと簡単に使う方法があります。

それは、以下のボタンを押すことです。

このボタンを押すと、現在の圧縮の設定をCLIのコマンドとしてクリップボードにコピーしてくれます！超簡単！😆

 

これでペーストすると、以下のようなコマンドが取得できます。

npx @squoosh/cli --resize '{"enabled":true,"width":300,"height":200,"method":"lanczos3","fitMethod":"stretch","premultiply":true,"linearRGB":true}' --oxipng '{"level":2,"interlace":false}'

 

ん？

npxとはなんぞや？？？

Node.jsが必要

web開発者にはおなじみのnpxコマンドですが、一般の人は知らないと思います。

ちょっと説明がムズしいのですが、かんたんに言うとnpxコマンドは

• Node.jsというソフトに含まれるコマンドで、
• 指定されたNode.jsプログラムがローカルに存在すればそれを実行し、ローカルに存在しなければnpmという場所からプログラムをダウンロード→実行までを行ってくれる･･･というコマンド。

です。

なのでnpxコマンドを使うにはNode.jsを事前にインストールしておく必要があります。

（基本的に、ウィザードの指示に従って「次へ」と押していくだけなので、専門外の方でもわかると思います）

使い方

コマンドが取得できたら、あとはターミナルを立ち上げて上のコマンドに圧縮したいファイル名を付け足すだけでOKです。

例えば、以下のように書くと「先ほどの設定でカレントディレクトリにあるa.jpgを圧縮する」という意味になります。

npx @squoosh/cli --resize '{"enabled":true,"width":300,"height":200,"method":"lanczos3","fitMethod":"stretch","premultiply":true,"linearRGB":true}' --oxipng '{"level":2,"interlace":false}' a.jpg

 

私が使っているのは以下の書き方です。

npx @squoosh/cli --resize '{"enabled":true,"width":300,"height":200,"method":"lanczos3","fitMethod":"stretch","premultiply":true,"linearRGB":true}' --oxipng '{"level":2,"interlace":false}' *.png

このように書くと「カレントディレクトリにあるすべてのpngファイルを圧縮する」という意味になります。

これを使って以下のように運用するのが良いんじゃないかなーと思います。

1. 自分の目的を達成できる、上のようなスクリプトファイルを複数作る
2. 「圧縮する画像ファイルを入れるためのフォルダ」をつくる
3. 1.で作ったファイル群を2．のフォルダに入れる

 

これであとは

1. 「圧縮する画像ファイルを入れるためのフォルダ」に圧縮したい画像を放り込む
2. 好きなスクリプトファイルを実行する

とやるだけで画像を一括で圧縮できます。

 

あとデフォルトのままだと、圧縮前の画像を上書きしてしまうので、必要に応じて以下のどちらのオプションをつけましょう。

• –suffix
• –output-dir

Usage: squoosh-cli [options] <files…>

Options:
-d, –output-dir <dir> Output directory (default: “.”)
-s, –suffix <suffix> Append suffix to output files (default: “”)

npxコマンドを使わない方が高速

ここからは少し技術的な話になってしまうのですが

ここでコピーされるnpxというコマンドは「コマンドラインバージョンのsquooshを毎回わざわざダウンロードしてきてから実行する」という動作をするので、圧縮を開始するまでに多少時間がかかってしまいます。

（厳密にいうと一度実行したあとは「キャッシュしたsquoosh」を使っているみたいですがそれでも多少待たされます）

 

なので、以下のコマンドで

npm i -g @squoosh/cli

squooshをパソコンにインストールしておいて、npxコマンドを使わずに、以下のようにsquoosh-cliコマンドを直接叩いた方が高速です。

 squoosh-cli <options...>

他のライブラリ

画像処理ライブラリでいうと

などが有名ですよね。

これらの3つと比較すると、Squooshの処理速度はどれほどのものなんでしょうねー。

上の3つはどれもCもしくはC++で書かれているので、高速だと思うのですが、

Squooshも画像処理の部分もWebAssembly（これもC,C++,Rustなどの低水準言語で書かれたプログラムをコンパイルするものらしい）という技術で作られているらしいので、もしかしたら速度は同じくらいなのかもしれません😑

 

 

おわり