↑この記事の中ほどで少し出てきた話になりますが、今回は
「Squooshを使って、複数の画像を一括で変換する方法」についての内容になります。

「Squoosh CLI」を使うことで、複数の画像を一括変換することが可能です

GoogleChromeLabs制作の、画像圧縮appの決定版と言っても過言ではない優れもの、
「squoosh」。

公式サイト経由で画像を圧縮、変換する場合、
ブラウザやPWA上からは、1点ずつ画像のBefore/Afterを見比べながら、しっかりと画像の圧縮/書き出しが行えます。

しかし実際のWeb制作の現場では、
「複数画像を一括変換したい」という要望の方が強いかと思います。

そんな時に活躍してくれるのが、
Squoosh CLI です。

Squoosh CLI というのは、文字通り(macであればターミナルから)
コマンド入力で Squoosh を操作することができるCLI(コマンドラインインターフェース)のことです。

Squoosh CLI の使い方

それでは、Squoosh CLI の使い方です。

Squoosh CLI を使用するにはまず、ご自身の環境に Squoosh CLI をインストールします。

npm i -g @squoosh/cli

↑ Squoosh CLI 公式の解説の通り、上記コマンドをターミナル上で実行すると Squoosh CLI がインストールできます。
ちなみに、この記事を書いた際の環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v14.16.0

Squoosh CLIのインストールが済んだら、準備としては完了です。
早速画像を圧縮/変換してみます。
ここでは、sample-name という名を持つフォルダ内にjpeg画像が複数格納されているという前提で、
話を進めます。

サンプルとしては、おそらくWeb制作の現場において
需要が高いと思われる、「Webp形式」での書き出しを例にします。

次のコードで、sample-name という名を持つフォルダ内の画像を一括でWebp形式に変換することができます。

squoosh-cli --webp auto (ディレクトリまでのパス)/sample-name

↑(ディレクトリまでのパス)となっている部分は、適宜ご自身の環境に置き換えて読んでください。
なお、macの場合は対象のフォルダをターミナル上にドラッグ&ドロップすると、いちいちパスを入力しなくて良いので便利かもしれません。

たったこれだけのコードで、対象フォルダ内に格納されている複数のjpeg画像たちが、
Webp形式の画像として変換されます。

一気に画像が変換されていくさまは、なかなか見ていて気持ちが良いものです。なんかすっきりしますね。

なお、Squoosh CLI 公式にも記載がある通り、
※上記記載は現在、公式から削除されている模様です。

「インストールをしなくとも、実行することは可能」とのことです。
インストールなしで Squoosh CLI を動かしたい場合は、次のコードで実行可能とのことです。

npx @squoosh/cli --webp auto (ディレクトリまでのパス)/sample-name

↑…なのですが、私の手元の環境ではこの方法だとうまく動作しなかったので、上で書いた様に、インストールして動かした方が確実かもしれません。

WebP書き出しの他にも色々できる

上のセクションでは、
・Squoosh CLI をインストールする
・sample-name という名を持つフォルダ内の画像を一括でWebp形式に変換する

ということについて書きました。
こちらの Squoosh CLI 、WebP形式以外にも、もちろんいろいろな画像変換/圧縮が可能です。
具体的には、Squoosh CLI 公式ページの「Usage」セクション に記載があります。
※上記記載は現在、公式から削除されている模様です。

↑ここに掲載されている Options: を、上のセクションで書いたコードの様に

squoosh-cli --webp auto (ディレクトリまでのパス)/sample-name

↑この --webp となっている部分を変えて指定するだけです。
例えば、png変換なら --oxipng
jpg変換なら --mozjpeg
と言った具合です。

出力されるディレクトリ

ここまでのセクションで、Squoosh CLI を使って画像を圧縮/変換する方法について書いてきました。

さて、変換結果の画像が出力される場所についてですが、
特に場所を指定しない場合は「現在のディレクトリ」に書き出されます。

もし特定のディレクトリに書き出したい場合は、
–output-dir を使用します。

具体的には次の様に書きます。(output というディレクトリに書き出したい場合)

squoosh-cli --webp auto (ディレクトリまでのパス)/sample-name --output-dir (書き出したいディレクトリまでのパス)/output

↑例えば、大量の画像を書き出したいが、
画像の量が多すぎて、同じディレクトリに書き出すと混乱しそうな場合などに便利そうですね。

注意点： .ds_store がいるとエラーになる

macの場合、Squoosh CLI を実行しようとしているディレクトリ(フォルダ)内に
.ds_store がいるとエラーが出て変換できません。
.ds_store というのは、OSが自動で作る設定ファイルのようなものです。隠しファイルなのですが、これが同一ディレクトリ内にいるとエラーになります。

そんな場合は、
・ .ds_store を削除する(方法については既に複数のやり方が出回っているので、ここでは割愛します)
・ それがめんどくさければ、変換対象の画像をすべて選択してターミナルの中にドラッグ&ドロップする(そうすると、各画像までのパスが入力される)

上記の方法で対応することが可能です。

この記事のまとめ

今回は、「Squoosh CLI」を使い、複数の画像を一括変換する方法について記事を書いて見ました。

前回のSquoosh関連の記事を書いた際も繰り返し言っていましたが、
このSquoosh、私自身も、実際の制作時にすっかり愛用する様になってきています。

今回ご紹介した「Squoosh CLI」を使うことで、
Web制作時における画像圧縮に関して、効率が良くなるのではないでしょうか。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。