はじめに

画像を圧縮する際に様々なサイトで圧縮可能ですが、今回はSquooshでの圧縮を試してみました。
Squooshは、webアプリ版では1枚ずつしか圧縮ができないですが、squoosh-cliであれば一括変換が可能となっております。
手順も想像よりも簡単に設定できるようでので、試して見たいと思います。
画像はWebpに変換してみようと思います。

Squooshについて

Googleが無償提供しているブラウザ上で画像の軽量化ができるWebツールとなっております。
また、公式サイトの利用規約を確認して分かる通り画像はサーバーに送信される事がないので、画像データの漏洩も防ぐことが可能となっております。
非常に素晴らしいツールとなっております。

公式サイト 利用規約 Squoosh does not send your image to a server. All image compression processes locally.
ーSquooshは、画像をサーバーに送信しません。すべての画像圧縮はローカルで処理されます。

• Squoosh
  • webでドラッグアンドドロップで画像変換が簡単にできます
  • 一括変換はできない
• Squoosh CLI
  • npmでインストールする事で一括変換が可能となります
  • optionコマンドで好きなように圧縮ができるようになります

Webpについて

圧縮率の高い画像フォーマットとなっております。
ただ、対応するブラウザが少ないのがデメリットとなっておりましたが、2022年時点ではかなり増えてきておりますので、対象ブラウザ問題は解消しそうです。
対応ブラウザは以下よりご確認ください。
古いブラウザにも対応する方法はありますが、別途記載したいと思います。

• https://caniuse.com/webp

squoosh-cliの注意事項

詳細な手順などは次の項目をご確認ください。

1. nodeは1.18.0以上は動作しない(2022/07時点)
2. nodeのバージョン切り替えをしたら差し戻す
3. '{quality: 30}'のオプションは必須

手順

1. ターミナルでnpmインストールを実行します

$ npm i -g @squoosh/cli

2. 変換を行うディレクトリに移動します

$ cd "変換するディレクトリ"

3. 軽量化の実行をします
   • 以下を実施すると私の場合はエラーとなりました
   • 結論から伝えると「node 1.18.0以上」では利用できないようです
   • 回避策を確認しましたので記載します

$ squoosh-cli --webp '{quality: 30}' *.jpeg

4. エラー回避策について
   • nodeをどのツールでインストールしたかによって対応は異なります
   • 私はnodebrewでインストールしているのでその手順を記載します

//バージョンの確認を行います
$ nodebrew ls

or

$ nodebrew list

//インストール可能なNode.jsのバージョンを確認します
$ nodebrew ls-remote

//バージョンを指定してインストールします
$ nodebrew install <version>

//私はv1.19.0をインストールしました
$ nodebrew install v1.19.0

//今回はv1.19.0に切り替えます適宜変更してください
$ nodebrew use v1.19.0

//バージョンが切り替わっているか確認します
$ nodebrew list
v17.9.0
v18.4.0

current: v17.9.0

5. nodeのバージョン変更ができたら再度squoosh-clをインストールします

$ npm i -g @squoosh/cli

6. squoosh-cliを実行してみましょう
   • 画像を軽量化するディレクトリに移動済みが前提となります
   • さくっと軽量化が実行されるのを確認できます

//30%の画質に抑えてwebpで生成してくれます
$ squoosh-cli --webp '{quality: 30}' *.jpeg

//-dで指定のディレクトリに生成をしてくれます
$ squoosh-cli --webp '{quality: 30}' *.jpeg -d "任意のディレクトリ"

7. 軽量化が実行済みとなったらnodeバージョンを元に戻しましょう
   • nodeバージョンを変更したままで「gatsby develop」をしたらエラーが表示されるのでnodeは戻すようにしましょう
   • 切り替えが面倒なので別途楽な方法を追々調査します

$ nodebrew use v18.4.0

//バージョンが切り替わっているか確認します
$ nodebrew list
v17.9.0
v18.4.0

current: v18.4.0

//いつも通り実行できるか確認する
$ gatsby develop

Squooshの圧縮結果について

画像サイズは任意の圧縮率の指定が可能となっております。
'{quality: 30}'30の箇所を適宜変更する事で軽量化後のサイズ容量が異なります。
その他にも様々なオプションコマンドがありますので調査してみると面白いと思います。
今回変換テストを行った際の結果は以下となっておりました。

• jpeg 551KB → Webp 39KB
  • 画像サイズ 1920 px× 961px
• jpeg 358KB → Webp 75KB
  • 画像サイズ 1920 px× 961px

おわり

nodeのバージョンエラーにより若干苦戦はしましたが、導入ができてしまうとさくっと軽量化ができてしまうので、趣味だけでなく実務でも物凄く役立つので、今後使い倒すようにしていきます。
ただ、nodeバージョンの切り替えが面倒など問題はまだありますが、追々解消していくようにします。