【保存版】神ツール「Squoosh」の使い方をマスターして画像を爆速化しよう！

Web制作を学習中のみなさんこんにちは！

サイトを作っていて、「なんか表示が遅い…」「スマホで見るとカクつく…」なんてことはありませんか？

それ、十中八九「画像の重さ」が犯人です！

せっかくオシャレなLPを作っても、表示に時間がかかったらユーザーは一瞬で離脱します。これ、Web制作において「機会損失」以外の何物でもありません。もったいない！

でも安心してください。今回はGoogleが開発した神ツール「Squoosh」を使って、画像の画質を保ったまま容量を「爆速化」する方法を伝授します。

これを読めばあなたのサイトは羽根のように軽くなり、SEO評価も爆上がり間違いなしです！さあ、一緒に見ていきましょう！

なぜ画像を圧縮しないと「ヤバい」のか？

まず、エンジニア視点でハッキリ言います。

「画像を圧縮せずにアップロードするのは、フルマラソンに冷蔵庫を背負って参加するようなもの」です。

特にLP（ランディングページ）で使いたくなるような高画質で派手な写真は、そのままだと容量が巨大すぎます。サーバーからユーザーのスマホに届くまでに時間がかかり、その間ユーザーは真っ白な画面を見せられることに…。これでは絶対に成果は出ません。

そこで必要なのが「圧縮」という処理です！

画像の圧縮ツールは世の中にたくさんありますが、現時点で僕が最もおすすめするのが、Google製の「Squoosh（スクーシュ）」です。

使い方は超シンプル。なのに効果は絶大。まさにWeb制作者のための必須ツールです。

サイトにアクセスして、圧縮したい画像を読み込ませるだけでOK。すぐに圧縮の設定画面（エディタ画面）に切り替わります。

画面の右下にある設定パネルを見てください。ここで以下の3つを調整して、ギリギリまで容量を削ぎ落としていきます。

実際の画面はこんな感じです！

ここで一番重要なのがフォーマットの選択です。迷わず「WebP（ウェッピー）」を選んでください！

WebPとは、Googleが開発した「Web表示に特化した次世代画像フォーマット」です。これを使うだけで、画質をほとんど落とさずに劇的に軽くできます。

従来のPNGやJPEGからWebPに変換・圧縮すると、画像にもよりますが大体70％〜90％もの大幅な容量削減が可能です。これ、やらない理由ないですよね？

Squooshのすごいところは、真ん中のバーをスライドさせることで「圧縮前（左）」と「圧縮後（右）」をリアルタイムで比較できる点です。

画質が荒くなりすぎないギリギリのラインを攻めましょう。僕のおすすめ設定は以下の通り！

Quality（画質）は「75〜90」の間で設定するのがベスト！
Resizeは実際に表示される大きさの2割程度大きい数字がおすすめ！

これくらいなら人間の目で見ても劣化はほぼ分かりません。なのに容量はガッツリ減っています。これがプロの仕事です！

いかがでしたか？

画像をただ貼り付けるだけのコーディングは今日で卒業です！

サイトの表示速度が上がれば、ユーザー体験が良くなり、SEOの順位も上がり、結果としてクライアントの利益につながります。つまり、あなたの市場価値（時給）もアップするということです！

Squooshを使って、サクッと爆速サイトを作れるようになりましょう！

今すぐSquooshをブックマークして、手持ちの画像を1枚WebPに変換してみてください。その軽さに驚くはずです！