タイトル: 次世代フォーマットでの画像の配信
SEOタイトル: PageSpeed『次世代フォーマットで画像を配信』の対処｜WebP/AVIFへの変換
PageSpeed Insightsで表示される「次世代フォーマットでの画像の配信」は、JPEGやPNGの画像を、より圧縮効率の高いWebPやAVIFで配信することを促す指摘です。これらの形式は同等の見た目を保ちながらファイルサイズを大きく削減できるため、置き換えるだけでページの読み込み時間とLargest Contentful Paint(LCP)の改善が期待できます。本記事では、この指摘の意味、各形式の違い、具体的な変換方法、そして非対応ブラウザへのフォールバックまでを2026年時点の状況に基づいて解説します。
| この記事の要点 |
|---|
|
「次世代フォーマットでの画像の配信」とは何を指す指摘か
PageSpeed Insights(およびその基盤であるLighthouse)は、ページ内の画像を解析し、従来形式(JPEG・PNGなど)よりも軽量な形式で配信できる画像を検出すると、この項目で「次世代フォーマット(next-gen formats)での配信」を提案します。あわせて、その画像を次世代フォーマットに置き換えた場合に削減が見込まれるおおよそのデータ量(推定削減サイズ)も表示されます。
ここで言う「次世代フォーマット」は、主にWebPとAVIFを指します(かつてはJPEG 2000やJPEG XRも候補に挙げられていましたが、ブラウザ対応の広がりという点では現在WebPとAVIFが中心です)。これらは従来形式と同等の見た目を、より少ないファイルサイズで表現できるため、転送量と読み込み時間の削減につながります。
重要なのは、この項目が「不合格」や「エラー」ではなく改善提案であるという点です。対応しなくてもページは正常に表示されますが、画像が表示速度のボトルネックになっている場合、次世代フォーマットへの置き換えはスコア改善とユーザー体験向上の両面で効果が大きい施策になりやすいといえます。
WebP・AVIFとは
WebPは、可逆圧縮と非可逆圧縮の両方に対応し、透過(アルファチャンネル)やアニメーションも扱える画像形式です。JPEGの置き換え(写真など)とPNGの置き換え(透過画像)の双方に使える汎用性が特長で、JPEGと比べておおむね25〜35%程度ファイルサイズを小さくできるとされます(画像の内容や圧縮設定によって変動します)。対応ブラウザが広く、変換ツールも豊富なため、まず導入しやすい選択肢です。
AVIFは、より新しい映像コーデック由来の画像形式で、同等の画質をさらに小さいファイルサイズで実現できる場合が多いとされています。高い圧縮効率に加え、広色域やHDR表現にも対応します。一方で、エンコード(変換)に時間がかかりやすい、対応環境がWebPほど普遍的ではない、といった点には注意が必要です。
2026年時点では、WebPはデスクトップ・モバイルを問わず主要なモダンブラウザで広く利用できます。AVIFも対応が進んでいますが、利用者の環境や古いブラウザでは未対応のケースが残るため、後述するフォールバックの併用が前提となります。最新の対応状況は、ブラウザ対応表(Can I useなど)で確認することをおすすめします。
画像形式の比較
| 形式 | 主な用途 | 圧縮効率 | 透過 | ブラウザ対応(2026年時点) |
|---|---|---|---|---|
| JPEG | 写真・グラデーション | 標準(非可逆) | 非対応 | ほぼすべての環境 |
| PNG | 透過・ロゴ・図版 | 低め(可逆) | 対応 | ほぼすべての環境 |
| WebP | 写真・透過の両方 | 高い(JPEG比でおおむね25〜35%程度減とされる) | 対応 | 主要モダンブラウザで広く対応 |
| AVIF | 写真・高圧縮が必要な画像 | 非常に高いことが多い | 対応 | 対応が進行中(未対応環境が残る場合あり) |
圧縮効率の数値はあくまで目安であり、画像の内容(写真かイラストか、色数、ノイズの量など)や圧縮設定によって結果は変わります。導入前に実際の画像で変換・比較し、サイズと画質のバランスを確認するとよいでしょう。
次世代フォーマットへの変換方法
変換手段は大きく分けて、コマンドラインツール、画像編集ソフト、CMS/CDNの自動変換機能の3つがあります。運用規模や既存の制作フローに合わせて選ぶとよいでしょう。
1. コマンドラインツールで変換する
個別ファイルやバッチ処理には、専用のエンコーダーが便利です。WebPはcwebp、AVIFはavifencがよく使われます。以下は基本的なコマンド例です(-qは品質、数値が大きいほど高画質・大サイズの傾向です)。
# JPEG/PNG を WebP に変換(品質80を指定) cwebp -q 80 input.jpg -o output.webp
# JPEG/PNG を AVIF に変換 avifenc input.jpg output.avif |
これらのツールはオプションで圧縮品質や速度を細かく調整できます。多数の画像をまとめて変換する場合は、シェルスクリプトやビルドツール(タスクランナー)に組み込んで自動化すると運用が楽になります。
2. 画像編集ツール・オンライン変換を使う
コマンド操作に不慣れな場合は、WebP/AVIFの書き出しに対応した画像編集ソフトや、ブラウザ上で動作する変換ツールを利用する方法があります。少数の画像であれば手軽ですが、件数が多い場合や継続運用では、後述の自動変換のほうが効率的です。なお、外部のオンライン変換サービスに画像をアップロードする際は、取り扱う画像の機密性に注意してください。
3. CMS・CDNの自動変換機能を使う
多くのCMSには、アップロードした画像を自動的にWebPやAVIFへ変換して配信する機能やプラグインがあります。また、画像最適化に対応したCDNや画像配信サービスを使うと、元画像はJPEG/PNGのまま管理しつつ、配信時にブラウザの対応状況に応じて最適な形式へ自動変換してくれます。元画像を差し替える手間が少なく、フォールバックも含めて配信側で処理できるため、規模の大きいサイトでは有力な選択肢です。
非対応ブラウザへのフォールバック
WebPやAVIFは対応が広がっているものの、すべての環境で表示できるとは限りません。そこで、HTMLの<picture>要素を使い、対応ブラウザには次世代フォーマットを、非対応ブラウザには従来形式(JPEG/PNG)を配信するのが定番の実装です。
<picture>要素は、内部に複数の<source>を記述でき、ブラウザは上から順に対応する形式を選んで読み込みます。どの<source>にも対応しない場合は、最後の<img>に指定した従来形式が使われます。<img>は必ず1つ含める必要があり、これがフォールバックと代替テキスト(alt)の役割を担います。
実装例
AVIF・WebP・JPEGの順に候補を並べ、最後にJPEGをフォールバックとして指定する基本形は次のとおりです。ブラウザはAVIF対応ならimage.avifを、非対応でWebP対応ならimage.webpを、いずれも非対応ならimage.jpgを読み込みます。
<picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="画像の説明" width="800" height="600"> </picture> |
各<source>のtype属性で形式(MIMEタイプ)を明示しておくと、ブラウザは画像を読み込む前に対応可否を判断できます。また、<img>にwidthとheightを指定しておくと、読み込み中のレイアウトのずれ(Cumulative Layout Shift)を抑えやすくなります。CMSやCDNの自動変換を使う場合は、こうした<picture>の出力を自動生成してくれることも多く、手書きの手間を減らせます。
導入時の落とし穴と注意点
| 落とし穴 | 内容と対策 |
|---|---|
| フォールバックの省略 | 次世代フォーマット単体で配信すると、未対応環境で画像が表示されないおそれがある。<picture>と<img>による従来形式へのフォールバックを必ず用意する。 |
| 過度な圧縮による画質劣化 | サイズ削減を狙って品質を下げすぎると、ノイズやにじみが目立つことがある。品質設定を調整し、実際の表示で画質とサイズのバランスを確認する。 |
| 変換・運用の手間 | 画像が多いと手作業の変換は負担が大きい。バッチ処理の自動化や、CMS/CDNの自動変換機能の活用で運用コストを抑える。 |
| AVIFのエンコード時間 | AVIFは変換に時間がかかりやすい。大量変換ではビルド時間やサーバー負荷に留意し、必要に応じてWebPと使い分ける。 |
よくある質問(FAQ)
Q. WebPとAVIFはどちらを使えばよいですか?
A. 一概には決められませんが、対応の広さと導入のしやすさを重視するならWebP、より高い圧縮効率を狙うならAVIFが候補になります。<picture>要素を使えば両方を併記でき、ブラウザが対応する形式を自動的に選ぶため、AVIF→WebP→JPEGの順に並べて両立させる構成も一般的です。最終的には実際の画像で変換・比較し、サイズと画質のバランスで判断するとよいでしょう。
Q. 既存のJPEG/PNG画像はすべて差し替える必要がありますか?
A. 必須ではありません。PageSpeed Insightsは削減効果が見込める画像を提示するため、まずは表示への影響が大きい画像(ファーストビューの大きな画像など)から優先的に置き換えると、少ない手間で効果を得やすくなります。CDNやCMSの自動変換を使えば、元画像を差し替えずに配信時の最適化だけを行うことも可能です。
Q. 次世代フォーマットに変換すれば、それだけで表示速度は十分改善しますか?
A. 画像が速度のボトルネックになっている場合は大きな改善が見込めますが、これは複数ある最適化施策の一つです。画像サイズ(解像度)の適正化、遅延読み込み、キャッシュ設定、サーバー応答の改善などと組み合わせることで、ページ全体のパフォーマンスをより効果的に高められます。