画像圧縮ツール「Squoosh」

最終更新日:

Squoosh

Squooshとは

GoogleChromeLabsにて開発された画像圧縮ツールです。
読み方は「スクワッシュ」

ブラウザ上から簡単にファイルサイズの圧縮が行えます。

https://squoosh.app/

用途・必要性

ホームページを運営している方の場合、
画像を掲載していることも多いかと思います。

ファイルサイズの大きい画像だと読み込みに時間がかかり、
ページが全て表示されるまで時間がかかります。

ページの表示速度はSEO対策として重要な要素ため、
可能な限り画像のファイルサイズは小さい方が良いでしょう。

そのためSquooshなどを使って、圧縮を行いましょう。

メリット・安全性

Squooshの安心な点はローカルで処理されているという点です。
つまり読み込んだ画像はサーバーに送信されていない。

Squooshのページ下部にあるPrivacyのリンクから、英文で書いてあります。
https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md#privacy

一括処理

残念ながら一括処理はできません。
複数のファイルを選択しても、1つだけ処理されます。

スマートフォン対応

Squooshはスマホでも利用できます。
さらに画面右上に表示される「Install」からアプリ版をインストールすることもできます。
アプリ版も利用方法は同じです。

使い方

使い方も簡単で、下記のいずれかの方法で画像を読み込むことができる。

読み込んだら画像処理に続きます。

画像処理

読み込んだ後は、フォーマットや圧縮率などの設定画面に移ります。
中央に分割線がありますが、これは左側が元の画像、右側は圧縮後の画像が表示されます。
画面上でマウスホイールを転がすと拡大縮小が行えます。

右側は画像処理の項目になります。

Edit 説明
Resize 画像の大きさを変更します
Reduce palette 色数・ディザリングを変更します
Colors 色数を変更します
Dithering
ディザリング
少ない色数でもそれっぽく奇麗に見せる技術です。
昔のゲームなどにあった網掛け上にしてグラデーションを表現したりする感じ
0にするとディザリングを全くしない
Compress 変換する画像フォーマット
選んだフォーマットによって、以降の設定項目が異なります
Quality 画質

対応フォーマット

下記の画像形式に変換可能です。

AVIFが圧縮率など総合的に良く、
今後最もメジャーなフォーマットになるかもしれません。

まだ現状では下記で圧縮の良い方を選んでいます。
色数が少なく、小さめの画像だと「OxiPNG」がオススメ。
大きい画像だと「WebP」が優れていると思います。