重い画像をサクッと劇的圧縮！Google開発の神ツール「Squoosh」の使い方

Squoosh（スクーシュ）とは？

Squooshは、ブラウザ上で直感的に画像を圧縮・変換できる無料のWebサービスです。
ソフトをパソコンにインストールしたり、面倒な会員登録をしたりする必要は一切ありません。サイトにアクセスするだけで、誰でも今すぐ使い始めることができます。

Squooshの機能

1. 画質の変化を「スライダー」で見比べられる
   画面の中央にスライダーが表示され、左側が「圧縮前」、右側が「圧縮後」の画像になります。スライダーを左右に動かすことで、「どこまで容量を下げても綺麗に見えるか」を自分の目で確認しながら調整できます。
2. 次世代フォーマット「WebP（ウェッピー）」に変換できる
   現在主流のJPEGやPNGよりも、さらに軽量でWebに最適な次世代画像フォーマット「WebP」へ、ボタン一つで変換できます。これを使うだけで、プロ顔負けの表示速度改善に繋がります。

Squooshの基本的な使い方（3ステップ）

使い方は驚くほどシンプルです。

1. 画像をドラッグ＆ドロップ
   Squooshのサイトを開き、画面の中央に圧縮したい画像をドラッグ＆ドロップします。
2. 圧縮形式と数値を設定する
   画面右下のメニューから設定を行います。
   • Compress: 基本は「MozJPEG（写真向け）」か「WebP（より軽くしたい場合）」を選びます。
   • Effort / Quality: 数値を下げるほど画像は軽くなりますが、画質は荒くなります。中央のスライダーでプレビューを見ながら、最適な数値（70〜80前後がおすすめ）を探ります。
3. ダウンロードする 調整が終わったら、右下にある青い「ダウンロードアイコン（↓）」をクリックして保存します。

というわけで実際に試してみました。
実用的な画質ではありませんが、一目見てわかりやすいように右側の画質レベルは12まで落としています。

このQualityのバーを調整しながら、運用上問題のない画質を探していくことが出来るのが、このSquooshの強み。
ただの写真にしても、WEBサイトのメインビジュアル、バナーの背景、ブログのサムネイルでは求められる画質が異なります。

同時に、ここで調整を意識することで、掲載箇所ごとに最適な画像を考える意識もつくでしょう。

また、書き出し時の拡張子も簡単に選択することができます。
この選択によってもファイルサイズ、処理の重さなどが変わってきますので、慎重に考える必要がありますね。

まとめ

画像圧縮は、誰でも無料でできて、かつWebサイトの改善に最も効果的な施策の一つです。

「Squoosh」をブラウザのお気に入りに登録しておき、ブログに画像をアップロードする前に「1回Squooshにポイッと入れてから使う」という習慣をつけるだけで、あなたのサイトは劇的に軽くなります。

明日の業務からすぐに使えるテクニックですので、ぜひ一度試してみてくださいね！