画像圧縮ツール「Squoosh」

最終更新日：2021年2月5日

Squooshとは

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

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

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

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

ページの表示速度は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が圧縮率など総合的に良く、
今後最もメジャーなフォーマットになるかもしれません。

AVIFへの対応はまだまだだと思うので、
私は「OxiPNG」がメイン、場合によって「WebP」を使用しています。

色数が少なく、小さめの画像だと「OxiPNG」がオススメ。
大きい画像だと「WebP」が優れていると思います。