Zenn
🖼️

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

2021/02/23に公開
初心者
CLI
Google
tech

この記事は何？

Googleが開発した画像圧縮アプリ「Squoosh」を紹介する記事です。

Squooshは以下のことが出来ます。
・ブラウザ上で簡単に画像の圧縮やリサイズが出来る
・CLIでも画像の圧縮やリサイズが出来る

圧縮が必要な理由は何か？Webサイトを作成する時は、画像を利用することはなかなか避けられません。そして画像サイズが大きい場合は、Webページのパフォーマンス低下を招きます。そこで、画像を圧縮しなるべく見た目は劣化させずに画像の容量を下げる方法の一つが「Squoosh」になります。

この記事では、「Squoosh」の使用方法や感想について紹介しようと思います。

圧縮するには、２種類の方法があるので、それぞれ紹介します。
👉　ブラウザ上から画像を圧縮
👉　CLI上から画像を圧縮

※スクリーンショット：https://squoosh.app/ より

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

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

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

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


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

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

なんと...！

12MBあったものが、682KBになっていることがわかります。
かなりシンプルで、簡単に圧縮できました。

また、色々設定することが出来ます。
Resizeで画像の大きさや縮小方法の指定。Reduce palleteで色の情報量の指定。Compressで様々なフォーマットやQualityのコントロール・色チャンネルの指定などができます。

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

WebPやAVIFにも変換できるので、軽量な形式への変換を簡単に行うことが出来ます
画像形式一覧

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

最後に

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

Discussion