サイト表示速度

PageSpeed Insightsの「次世代フォーマットでの画像の配信」とは？WebP・AVIF変換で表示速度を改善する方法

  • 登録：
  • 更新：

PageSpeed Insightsでサイトを診断したときに「次世代フォーマットでの画像の配信」「効率的な画像フォーマットを使用する」といった指摘を受けたことはありませんか。

これは、サイトで使っているJPEGやPNG画像を、よりファイルサイズの小さいWebPやAVIFといった次世代フォーマットに変換することで、表示速度を改善できるという意味の指摘です。この記事では、指摘の意味と、画像フォーマットごとの違い、具体的な変換方法を整理して解説します。

「次世代フォーマットでの画像の配信」とはどういう意味？

PageSpeed Insightsがこの項目で伝えたいのは、「同じ見た目の画像でも、フォーマットを変えるだけでファイルサイズを大きく減らせますよ」ということです。

画像のファイルサイズが大きいと、ページの読み込みに時間がかかり、表示速度のスコアが下がるだけでなく、訪問者の離脱（直帰）にもつながります。検索順位への影響を考えても、画像の最適化は優先度の高い改善項目のひとつです。

画像のサイズそのものを見直したい場合は、「適切なサイズの画像」とは？原因と改善方法もあわせて確認しておくと、フォーマット変更とサイズ調整の両面から最適化を進められます。

画像フォーマットごとの特徴を比較

Webサイトで使われる主な画像フォーマットには、それぞれ次のような特徴があります。用途に合わせて使い分けることが、効率的な画像配信の第一歩です。

JPEG（.jpg）

写真など色数の多い画像で広く使われてきた形式です。圧縮率が高くファイルサイズを抑えやすい一方、圧縮するほど画質が劣化し、元の画質には戻せません。

PNG（.png）

背景を透過できる可逆圧縮形式で、画質の劣化がありません。ロゴやアイコン、スクリーンショットとの相性がよい反面、写真のような複雑な画像ではJPEGよりファイルサイズが大きくなりがちです。

GIF（.gif）

使える色数が256色までに限られる代わりに、簡易的なアニメーションを作成できる形式です。現在では、アニメーション用途以外でGIFを新たに採用するメリットはほとんどありません。

WebP（.webp）

Googleが開発した次世代フォーマットで、JPEGと同等の見た目を保ちながらファイルサイズを大きく削減できます。透明度（アルファチャンネル）にも対応しているため、写真・イラスト・ロゴまで幅広く使えます。主要ブラウザのWebP対応率は97％を超えており、現在ではほぼすべての訪問者に問題なく配信できる状態です。PageSpeed Insightsも、まずはこのWebPへの変換を推奨しています。

AVIF（.avif）

WebPよりもさらに高い圧縮率を持つ最新フォーマットで、条件によってはJPEGより50％以上ファイルサイズを小さくできることもあります。ただし、エンコードに時間がかかることに加え、環境によってはまだ表示に対応しきれていない場合があります。現時点では、WebPを基本としつつ、対応環境ではAVIFも併用するという形が現実的です。

画像をWebP・AVIFに変換する方法

実際に画像を次世代フォーマットへ変換する方法には、主に次の3つがあります。サイトの環境やスキルに合わせて選んでみてください。

方法1：WordPressのプラグインを使う

WordPressサイトであれば、画像最適化プラグインを導入するのが最も手軽な方法です。アップロード時に自動でWebPへの変換・圧縮を行ってくれます。

  • EWWW Image Optimizer：無料でWebP変換に対応した定番プラグイン
  • WebP Converter for Media：既存の画像も含めてまとめてWebP化できる
  • Imagify：圧縮レベルを細かく調整でき、無料プランも用意されている

すでに大量の画像をアップロード済みの場合は、まとめて変換できるタイプのプラグインを選ぶと、過去の記事の画像も効率よく最適化できます。

方法2：オンラインツールで個別に変換する

WordPress以外のサイトを運用している場合や、特定の画像だけを手動で変換したい場合は、無料のオンラインツールが便利です。

  • Squoosh（squoosh.app）：Googleが提供する画像変換・圧縮ツール。WebP・AVIFに対応し、変換前後の画質をリアルタイムに比較できる
  • iLoveIMG：複数の画像をまとめてWebPに変換できる

どのツールを使えばよいか迷う場合は、画像圧縮フリーソフト・プラグイン・オンラインサービスを徹底比較も参考になります。

方法3：サーバー側で自動配信する

レンタルサーバーによっては、サーバー側の設定でWebPへの自動配信に対応している場合があります。元の画像ファイルはそのまま残しつつ、WebPに対応したブラウザに対してはWebP版を自動で返す仕組みです。設定方法は利用しているサーバーによって異なるため、各サービスのマニュアルを確認してください。

これからサーバーの乗り換えを検討している場合は、表示速度や画像配信まわりの機能が充実しているエックスサーバーのような高速サーバーを選んでおくと安心です。

まとめ

PageSpeed Insightsの「次世代フォーマットでの画像の配信」という指摘は、JPEG・PNGなどの画像をWebP（必要に応じてAVIF）に変換することで改善できます。最後にポイントを整理します。

  • WebPは主要ブラウザの対応率が97％を超えており、現在の基本フォーマットとして安心して使える
  • AVIFはさらに圧縮率が高いが、当面はWebPと併用する形が現実的
  • WordPressならEWWW Image OptimizerなどのプラグインでWebP変換を自動化できる
  • 個別の画像はSquooshなどのオンラインツールで手軽に変換できる
  • サーバー側のWebP自動配信に対応していれば、元画像を残したまま配信を最適化できる

画像フォーマットの最適化は、表示速度の改善効果が体感しやすい施策のひとつです。他のPageSpeed Insightsの指摘とあわせて対応し、サイト全体の速度スコアを底上げしていきましょう。

このテーマの関連記事はこちら