WebP知ってますか？Squooshで簡単にWeb用画像を最適化する方法

まさかpngとかjpegのまま
サイトにアップロードしてにゃい？

画像、そのままアップしていませんか？
実はそれだけで、サイトの表示速度は大きく落ちています。
PCだとそんな感じませんが、スマホだと画像だけじわじわ出てくるの経験したことありませんか？

そんなときに使えるのが「WebP」と「Squoosh」です。

Web制作をしていると、サイトの表示速度はとても重要です。ページの読み込みが遅いと、ユーザーが離脱してしまうだけでなく、SEOにも悪影響があります。結構見落としがちですが、検索順位が落ちるんです。そんなときに活躍するのがWebPという次世代画像フォーマットです。

WebPとは？
Squooshで簡単にWebPに変換
圧縮のポイント
実際の活用例
まとめ

WebPとは？

WebPはGoogleが開発した画像フォーマットで、JPEGやPNGに比べてファイルサイズを大幅に削減できるのが特徴です。画質をほぼ落とさずに軽量化できるため、ブログやWebサイトで画像を多く使う場合には特に有効です。
例えば、同じ画質でもJPEGより30〜50％ほどサイズを小さくできることもあり、表示速度の改善やモバイル通信量の節約につながります。

Squooshで簡単にWebPに変換

このブログでも、記事に使用するすべての画像をSquooshでWebPに変換して投稿しています。Squooshはブラウザ上で動く無料の画像圧縮ツールで、インストール不要ですぐ使えます。

使い方はとても簡単です。

画像をドラッグ＆ドロップでアップロード
圧縮形式をWebPに変更
画質や圧縮率を調整
元画像との比較スライダーで確認
ダウンロードしてブログに投稿

これだけで、手軽に軽量化したWebP画像を作れます。実際にここのアイキャッチ画像や記事内画像をすべてWebP化しており、表示速度の改善を実感しています。

圧縮のポイント

画質と容量のバランスを見ながら圧縮する
透過が必要な場合はWebPでも対応可能
WebP非対応の古いブラウザ向けには元画像も用意

このように設定しておくことで、表示速度を落とさずにすべてのユーザーに最適な画像を提供できます。

実際の活用例

ブログ記事のアイキャッチ画像
記事内の図解やスクリーンショット
Eコマースサイトの商品画像

このブログではこれらすべての画像をWebP化しており、ページ読み込み速度が体感でも速くなっただけでなく、GoogleのCore Web Vitalsスコアの改善にもつながっています。

まとめ

Web制作において、画像はページ速度に大きな影響を与えます。Squooshを使ってWebPに変換すれば、手軽に高速化と通信量削減が可能です。
ブログの画像もWebPに変換して投稿することで、ユーザー体験とSEOの両方を改善できます。
正直最初は面倒だなって思います。そうなんです。邪魔くさいんです。けどその一手間・ひと工夫が良いサイトの形を作っていきます。
まずは1枚から試して、効果を実感してみてくださいね。