画像の最適化：形式、レスポンシブ対応、遅延読み込み

画像の最適化が重要な理由

大きな画像や読み込み開始の遅い画像は、主要コンテンツの表示を遅らせ、LCPを悪化させることがあります。まず実際に取得される画像を調べ、影響を測定してください。転送量の削減は読み込み改善につながる可能性がありますが、検索順位や特定のコンバージョン増加を保証しません。

画像形式の選択

代表的な画像を使い、許容できる画質でJPEG、PNG、WebP、AVIFを比較します。最小のファイルサイズは画像、エンコーダー、設定によって変わります。対象ブラウザーを確認し、必要なら代替形式を用意してください。ベクターの図形にはSVGが適しています。

レスポンシブ画像：srcsetとsizes

srcsetで候補ファイルを列挙し、sizesでレイアウト内の表示幅を示します。ブラウザーはその情報と端末条件から候補を選びます。以下の幅は例なので、実際のCSSに合わせてください。画面外の画像の例です。代替テキストを実際の内容に変え、正しい縦横比を指定します。

<img
	src="example-400w.jpg"
	srcset="example-400w.jpg 400w, example-800w.jpg 800w, example-1200w.jpg 1200w"
	sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
	alt="山の湖"
	width="1200"
	height="800"
	loading="lazy"
/>

画面外の画像を遅延読み込みする

loading="lazy"を指定すると、画面外の画像が表示領域に近づくまで読み込みを遅らせられます。画像が見える前に取得が始まる場合もあり、タイミングはブラウザーと条件によって変わります。

• 重要でない画像を遅らせると、初期転送量や競合するリクエストを減らせる場合があります。
• 最初から表示される主要画像、特にLCPになる可能性の高い画像は遅延読み込みにしないでください。LCPが悪化する場合があります。
• 適切な幅と高さ、または縦横比で場所を確保し、レイアウトのずれを抑えます。

最初の画面より下にある画像の例です。寸法は説明用なので、実ファイルに合わせてください。

<img src="example.webp" alt="山の湖" width="1200" height="800" loading="lazy" />

最適化のためのツールとサービス

実践的なヒントと例

1. 許容できる画質で形式を比較し、必要なら代替形式を用意します。
2. srcsetとsizesを実際のレイアウトと端末に合わせます。
3. loading="lazy"は画面外の画像に使い、LCP画像は通常どおり読み込みます。ブラウザーの遅延読み込みには通常Intersection Observerは不要です。独自の処理は具体的な要件のために実装します。
4. ビルドや配信時のサイズ変更と圧縮を自動化し、出力を確認します。
5. 同等の条件で修正前後のPageSpeed Insightsと必要なWeb Vitalsを比較します。LCPとCLSも確認してください。

公開した結果を確認する

選ばれた画像ファイル、転送バイト数、画質、読み込み優先度を確認します。代表的なモバイルとデスクトップのレイアウトで繰り返し、主要画像が早く表示され、配置が安定することを確かめてください。

読者に必要な内容と画質を残しながら、不要なバイト数を減らします。

速度監査でページを調べ、画像の変更をブラウザーで確認してください。測定できた改善と未確認の仮説を分けて記録します。