サイト表示速度

「次世代フォーマットでの画像の配信」とは？WebP・AVIFへの変換方法を解説【PageSpeed Insights】

  • 登録：
  • 更新：

Googleが提供する無料のページ速度診断ツール「PageSpeed Insights」で計測すると、「次世代フォーマットでの画像の配信」という指摘が表示されることがあります。聞き慣れない言葉ですが、要するに「画像の形式を新しいものに変えるとページがもっと速くなりますよ」というアドバイスです。この記事では、この指摘の意味と、WebP・AVIFといった次世代フォーマットへの具体的な対応方法を解説します。

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

この指摘が表示される主な原因は、ページ内の画像がJPEGやPNGといった従来からの形式のまま配信されていることです。これらの形式に代わって、より少ないデータ量で同程度の画質を保てる「WebP」や「AVIF」といった新しい画像形式に変換することで、画像の読み込みにかかる時間を短縮できます。

WebPやAVIFに変換すると、同じ見た目の画像でもファイルサイズを30%以上、画像によっては50%近く削減できることもあります。特にAVIFはWebPよりもさらに高い圧縮率を実現できる形式として注目されています。

WebPとAVIF、どちらを選ぶべき？

結論から言うと、まず優先すべきはWebPです。WebPはすでに主要なブラウザのほとんどが対応しており、現在ではインターネット利用者の95%以上が、WebP画像を問題なく表示できるブラウザを使っているといわれています。古いブラウザへの対応もそれほど気にせず導入できる点が大きなメリットです。

AVIFはWebPよりもさらに圧縮率が高く、同じ画質であればWebPの半分程度のファイルサイズに収められることもある形式です。一方で、AVIFへの変換には処理時間がかかったり、対応プラグインがWebPほど多くなかったりする場合があります。まずはWebPで対応し、余裕があればAVIFにも対応する、という順番で進めるのが現実的です。

改善の進め方

①ページ内の画像を見直し、不要な画像を減らす

形式の変換に取りかかる前に、まずはそもそも「その画像は本当に必要か」を見直しましょう。装飾だけの画像や、テキストで十分説明できる内容を画像で表示しているケースは意外と多いものです。ユーザー側の視点でページを見直し、不要な画像を削除するだけでも読み込み速度は改善します。

②WordPressならプラグインで自動変換するのが効率的

WordPressを使っている場合、画像を1枚ずつ手作業でWebP・AVIFに変換するのは現実的ではありません。「Converter for Media（旧称：WebP Converter for Media）」のような変換プラグインを導入すれば、メディアライブラリ内の画像をまとめて次世代フォーマットに変換し、対応ブラウザには自動的にWebP・AVIF版を配信してくれます。

プラグインを導入する際は、変換後に画像が正しく表示されるか、色味や透過処理に問題がないかを必ず確認しましょう。特にロゴ画像など透過PNGを使っている箇所は、変換後に背景が白くなってしまうなどのトラブルが起こることがあります。

③変換後はブラウザごとの表示も確認する

WebPやAVIFへの変換が完了したら、Chrome・Safari・Edgeなど複数のブラウザで実際の表示を確認しておくと安心です。特にスマートフォンとパソコンでは、同じブラウザ名でもバージョンによって対応状況が異なる場合があります。プラグインの多くは、未対応のブラウザに対しては自動的に元のJPEG・PNGを配信するフォールバック機能を備えているため、基本的には大きな心配はいりませんが、公開後に一度は実機で見た目をチェックしておくと安心です。

あわせて改善したいPageSpeed Insightsの画像関連項目

画像の形式を変換するだけでなく、サイズや圧縮率、読み込みタイミングを見直すことで、表示速度はさらに改善します。次の記事もあわせてチェックしてみてください。

まとめ

「次世代フォーマットでの画像の配信」は、ページ内のJPEG・PNG画像をWebPやAVIFといった新しい形式に変換することで改善できる項目です。WebPはすでにほとんどのブラウザで利用でき、変換プラグインを使えば手間もそれほどかかりません。まずはWebP対応から始め、余裕があればAVIFも検討してみましょう。

画像の最適化は、PageSpeed Insightsのスコア改善だけでなく、ページの表示速度そのものを底上げしてくれる効果の高い施策です。まだ対応していない方は、この機会にプラグインの導入を検討してみてください。

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