Google発の画像圧縮ツール「Squoosh」を使ってみた

2 min read読了の目安(約2500字

この記事は何?

Googleが開発した画像圧縮Webアプリ/CLIを紹介する記事です。
Webサイトを作成する時は、画像を利用することはなかなか避けられません。
画像サイズが大きいと、ページの読み込み速度が遅くなってしまうため、容量の大きい画像はできるだけ避けたいです。
そこで、画像を圧縮し、なるべく見た目は劣化させずに画像の容量を下げる方法の一つが「Squoosh」になります。
この記事では、「Squoosh」を実際に使ってみた使用感について紹介しようと思います。他にも画像容量を削減する良い方法があればコメントで教えて下さい!
圧縮するには、2種類の方法があるみたいです。それぞれ紹介します。
・ブラウザ上から画像を圧縮
・CLI上から画像を圧縮

※以下のスクリーンショットは次のサイトで撮影しております。https://squoosh.app/

ブラウザ上から画像を圧縮

まずは、Webサイトに行ってみましょう。

このように、ページが表示されるので、画像をドラックアンドドロップしていきます。

すると次のように、アップロードされた写真が表示されます。


左が圧縮前、右が圧縮後です。

とりあえず何も考えずに、右下のダウンロードを押してみます(青色のボタン)。
そして、画像のサイズを確認してみます。

...!

12MBあったものが、682KBになっていることがわかります。
かなりシンプルで、簡単に圧縮できました。
また、色々設定することが出来ます。
Resizeで画像の大きさや縮小方法の指定。Reduce palleteで色の情報量の指定。Compressで様々なフォーマットやQualityのコントロール・色チャンネルの指定などができます。

できるだけ画質の劣化を抑え、さくっと画像サイズを縮小したい場合は便利ですね!

CLIから画像を圧縮

では、コマンドライン上で実行してみたいと思います。
こちらから使い方を確認できます。
自分は以下のように実行しました。

$ npm i -g @squoosh/cli
/usr/local/bin/squoosh-cli -> /usr/local/lib/node_modules/@squoosh/cli/build/index.js
/usr/local/bin/cli -> /usr/local/lib/node_modules/@squoosh/cli/build/index.js
+ @squoosh/cli@0.6.0
added 2 packages from 3 contributors in 1.737s

$ squoosh-cli --mozjpeg '{quality:30}' -d out src/DSC00916.JPG
1/1 ✔ Squoosh results:
 src/DSC00916.JPG: 11.41MB
  └ .jpg  → 215.51KB (1.84%)

ちょっと解説します。

  1. まず、npm i -g @squoosh/cliでSquoosh CLIをインストール
  2. コマンドsquoosh-cli --mozjpeg '{quality:30}' -d out src/DSC00916.JPGを叩く

以上です!

コマンドの具体的な説明は以下になります。

  • --mozjpeg: jpgの形式にて出力
  • '{quality:30}': 品質は30
  • -d out: 出力のディレクトリはoutディレクトリ
  • src/DSC00916.JPG: 変換したい画像

これにより、約98%とかなり圧縮できていることがわかりますね!

今後

squoosh v2の告知では、以下のように書かれていました。

What's next ? #
We plan to keep working on Squoosh. As the new image format gets released, we want our users to have a place where they can play with the codec without heavy lifting. We also hope to expand use of Squoosh CLI and integrate more into the build process of a web application.

「Webアプリケーションのビルドプロセスに統合したい」
ビルド時に、画像を圧縮も同時にしてくれる...みたいな感じなのでしょうか...?!
とにかく普段使いも出来ますが、今後にも期待できそうです!

最後に

いかがでしたでしょうか?
画像の圧縮は重要なので、このアプリはかなり活用できそうです。
他にも、圧縮方法など便利な方法を知っていればコメントお願いします!