遅延読み込みとレスポンシブ画像: 実践的入門ガイド

課題: 画像ファイルの巨大化

画像は通常、ウェブページで最も大きなファイルです。ユーザーがサイトを訪問すると、ブラウザは画面上に表示されていない画像も含め、すべての画像をダウンロードしようとします。これは帯域幅の無駄となり、初期ページの読み込みを大幅に遅らせ、ユーザー体験の低下とコア Web バイタルの低いスコアにつながります。

解決策には2つの側面があります:

1. 遅延読み込み (Lazy-Loading): 画面外の画像の読み込みを、ユーザーがスクロールで近づくまで延期します。
2. レスポンシブ画像 (Responsive Images): 異なる画面サイズに適した画像サイズを提供し、モバイルユーザーがデスクトップ向けの巨大な画像をダウンロードするのを防ぎます。

幸い、最新のHTMLにはこれらを実現する強力で使いやすい機能が用意されています。

第1部: 遅延読み込みの簡単な実装

以前は遅延読み込みに複雑なJavaScriptライブラリが必要でしたが、現在では単一の属性で実現できます。

loading="lazy" 属性は、画像がビューポートに近づくまでブラウザに読み込みを延期するよう指示します。

実装方法:

<img> タグに loading="lazy" を追加するだけです。

<img src="my-image.jpg" alt="説明的な代替テキスト" loading="lazy" width="800" height="600">

重要な注意点:

• 必ず width と height 属性を含めてください。 これによりブラウザは画像の読み込み前に適切なスペースを確保し、レイアウトのずれ (CLS - 累積レイアウトシフト) を防ぎます。
• すべての画像に遅延読み込みを使用しないでください。 「ファーストビュー」（初期表示領域）の画像は通常通り読み込む必要があります。これらに遅延読み込みを適用すると、体感読み込み時間が遅くなる可能性があります。loading="lazy" はページ下部の画像に適しています。

loading="lazy" のブラウザサポートは現在すべての主要ブラウザで利用可能であり、安全で効果的なパフォーマンス向上手法です。

第2部: srcset で適切なサイズを提供

なぜモバイルユーザーがデスクトップ向けの2000px幅の画像をダウンロードする必要があるのでしょうか？ srcset 属性を使うと、複数サイズの画像リストをブラウザに提供できます。ブラウザはユーザーの画面サイズと解像度に基づき、最適な画像を賢く選択します。

実装方法:

1. 複数サイズの画像を作成: まず画像の複数バージョンを用意します。一般的なサイズセット:

   • image-small.jpg (例: 幅480px)
   • image-medium.jpg (例: 幅800px)
   • image-large.jpg (例: 幅1200px) これらのサイズ作成には、当社の画像リサイズツールが利用できます。

2. srcset 属性を使用: 各画像とその幅記述子 (w) をリストします。

<img 
  srcset="image-small.jpg 480w, 
          image-medium.jpg 800w, 
          image-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 
         800px"
  src="image-medium.jpg" 
  alt="説明的な代替テキスト"
  loading="lazy"
  width="800" height="600">

内訳:

• srcset: 利用可能な画像と実際の幅を指定
• sizes: ビューポートサイズに応じた画像の表示幅をブラウザに指示。例: 「画面幅が600px以下なら画像は480px幅、それ以外は800px幅で表示」。ブラウザはこの情報を基に srcset から最適な画像を選択
• src: srcset 非対応の旧ブラウザ用のフォールバック

第3部: <picture> 要素でアートディレクションを実現

単に小さい画像ではなく、完全に異なる画像を提供したい場合があります。例: デスクトップの横長風景画をモバイルでは縦長のトリミング版に変更する「アートディレクション」です。

<picture> 要素はこの目的に最適です。複数の <source> 要素を提供し、ブラウザは最初に条件に一致するものを選択します。

実装方法:

<picture>
  <!-- 画面幅が600px以下の場合に表示 -->
  <source media="(max-width: 600px)" srcset="image-portrait.jpg">
  
  <!-- それ以外の場合に表示 -->
  <source media="(min-width: 601px)" srcset="image-landscape.jpg">
  
  <!-- 旧ブラウザ用のフォールバック -->
  <img src="image-landscape.jpg" alt="説明的な代替テキスト" loading="lazy" width="1200" height="600">
</picture>

AVIFやWebPなどの最新画像フォーマットをJPEGにフォールバックさせるのにも使えます:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="説明的な代替テキスト">
</picture>

これらのフォーマット作成には、当社の画像変換ツールが利用できます。

結論

これらの3つの最新HTML機能を組み合わせることで、あらゆるデバイスで驚異的な速度で読み込まれるサイトを構築できます。

• ファーストビュー以下のすべての画像に loading="lazy" を使用
• 同じ画像の異なるサイズ提供に srcset を使用
• 異なる画面サイズやフォーマット向けに異なる画像を提供する場合に <picture> を使用

これらの技術を実装することは、ウェブパフォーマンスとコア Web バイタルを改善するために最も効果的な変更の一つです。