画像最適化の完全ガイド｜WebP・圧縮・遅延読み込みでページを高速化する

画像はページ速度の主要ボトルネック

多くのWebページにおいて、データ転送量の50〜70%を画像が占めています。画像を最適化するだけで表示速度は大幅に改善されます。

次世代フォーマット：WebP

WebPはGoogleが開発した画像フォーマットで、同品質のJPEGと比べて25〜35%、PNGと比べて最大26%ファイルサイズが小さくなります。現在ほぼすべてのモダンブラウザが対応しています。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明文">
</picture>

適切なサイズへのリサイズ

表示サイズより大きい画像を使っているケースは非常に多いです。PCで最大表示が1200pxなら、2400px（Retina用2倍）の画像が上限の目安です。不必要に大きい画像は容量の無駄です。

圧縮ツールの活用

• Squoosh（ブラウザ）：Googleのツール。圧縮前後をリアルタイム比較できる
• TinyPNG（オンライン）：ドラッグ＆ドロップで簡単圧縮
• ImageOptim（Mac）：ローカルで一括最適化

遅延読み込み（Lazy Loading）

画面外の画像は表示が必要になるまで読み込まない設定です。HTMLのimg要素に loading="lazy" を追加するだけで実装できます。

<img src="image.jpg" alt="説明文" loading="lazy">

ファーストビューの画像には使わないように注意しましょう。

WordPressでの自動最適化

プラグインを使えば自動的に最適化できます。「Smush」「ShortPixel Image Optimizer」などが人気です。WebP変換に対応しているプラグインを選びましょう。

まとめ

画像最適化は費用対効果の高い速度改善施策です。まず既存の画像をWebPに変換し、遅延読み込みを設定するだけで大幅な改善が期待できます。