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

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

その名も「Squoosh」。

Squooshとは?

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

  • 画像の圧縮・縮小ができる
    • 読み込み可能:画像全般
    • 出力可能:JPEG/PNG/WebP/AVIF
  • 設定項目が豊富
    • 分かりやすいUI。
    • 変換する前に、変換前と変換後をチェックできる
  • 高速に動作するWebAssemblyという技術を使用しているため)
  • オフラインでも使用できる(おそらくサービスワーカーという技術を使用しているため)
  • コマンドラインからも使用できる

 

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

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

 

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

今まではTynyPNGとかScreenpressoの機能を使っていたのですが、今はSquooshに一本化しました。

 

あとWebPやAVIF(!)に対応してる点も素晴らしい。

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

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

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

 

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

squoosh/cli at dev · GoogleChromeLabs/squoosh

 

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

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

▲このボタンを押すと「CLI command copied to clipborad」と表示されます。

このボタンを押すと、現在の圧縮の設定を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というソフトに含まれるコマンドです。

なので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}' .

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

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

  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...>

他のライブラリ

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

  • ImageMagick
    • 画像処理の定番。
    • WordPressでも使われているらしい。
  • OpenCV
    • 顔認識とかの定番。
    • よくわからないけど機械学習とかにも対応してるらしい。
  • FFmpeg
    • 動画処理の定番。
    • 画像にも対応してるらしい。神か。

などが有名ですが、処理速度でいうとこれらのほうがおそらく上です(どれもC言語もしくはC++で書かれているため)。

なので、速度を求める場合はSquooshは使わないほうが良いと思われます(もしかしたらSquooshも十分すぎるほど早いのかもしれませんが)。

 

おわり

その他
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

職を探しています😭
よろしくお願いします🙇

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

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