レスポンシブ画像の実装 — srcsetとsizesによるSEO最適化
レスポンシブ画像がSEOに重要な理由
画像はWebページのデータ量の大部分を占めるリソースです。HTTP Archiveのデータによると、Webページの総データ量のうち画像が約50%を占めており、画像の最適化はページ速度改善において最もインパクトの大きい施策の一つです。レスポンシブ画像を適切に実装することで、各デバイスに最適なサイズの画像を配信し、不必要なデータ転送を削減できます。
Googleはモバイルファーストインデックスを採用しているため、モバイルデバイスでのページ体験が検索順位に直接影響します。モバイル端末に対してデスクトップ向けの大きな画像を配信すると、LCPの悪化、データ通信量の増大、CLS（レイアウトシフト）の発生といったSEO上のマイナス要因となります。レスポンシブ画像の実装は、これらの問題を解決する根本的なアプローチです。
srcset属性とsizes属性の基本
srcset属性の仕組み
HTML のimg要素にsrcset属性を追加することで、異なる解像度やサイズの画像候補をブラウザに提示できます。ブラウザはデバイスのピクセル密度や画面幅に基づいて最適な画像を自動的に選択します。
- 幅記述子（w）を使う方法：画像の実際の幅をピクセル単位で指定する。
srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1024w.jpg 1024w" - ピクセル密度記述子（x）を使う方法：デバイスピクセル比を指定する。
srcset="image-1x.jpg 1x, image-2x.jpg 2x"
sizes属性の役割
sizes属性は、画像がビューポートに対してどのくらいの幅で表示されるかをブラウザに伝える情報です。この情報をもとに、ブラウザはsrcsetの候補から最適な画像を選択します。メディアクエリを使って、ブレークポイントごとに異なる表示幅を指定できます。
- ビューポート幅が768px以上のとき画像を50vw（ビューポート幅の50%）で表示する場合：
sizes="(min-width: 768px) 50vw, 100vw" - 固定幅のレイアウトの場合：
sizes="(min-width: 1200px) 400px, (min-width: 768px) 50vw, 100vw"
picture要素によるアートディレクション
picture要素を使用すると、デバイスやビューポートのサイズに応じて完全に異なる画像を切り替えることができます。例えば、デスクトップでは横長の風景画像を、モバイルでは正方形にトリミングした画像を表示するといったアートディレクションが可能です。
次世代フォーマットとの組み合わせ
picture要素は、WebPやAVIFなどの次世代画像フォーマットを対応ブラウザに配信し、非対応ブラウザにはJPEGやPNGにフォールバックする実装にも活用できます。
- AVIF：最も高い圧縮率を持つ次世代フォーマット。同品質でJPEGの50%程度のファイルサイズ
- WebP：Googleが開発したフォーマット。JPEGの25〜35%程度のファイルサイズ削減が可能。ほぼすべての現行ブラウザが対応
画像SEOの総合的な最適化
alt属性の適切な設定
alt属性は画像SEOの基本です。画像の内容を適切に説明するテキストを設定することで、画像検索からのトラフィック獲得やアクセシビリティの向上に貢献します。キーワードの自然な含有を意識しつつ、画像の内容を正確に記述します。
画像のパフォーマンス最適化チェックリスト
- srcsetとsizesを使ってレスポンシブ画像を実装する
- WebPまたはAVIF形式で画像を配信する（picture要素でフォールバックを提供）
- width属性とheight属性を明示してCLSを防止する
- ファーストビュー外の画像にはloading="lazy"を設定する
- LCP画像にはloading="eager"とfetchpriority="high"を設定する
- alt属性に適切な説明文を設定する
- 画像を適切に圧縮する（品質80〜85%が目安）
レスポンシブ画像の実装は初期設定に手間がかかりますが、一度仕組みを構築すれば、すべてのデバイスでの最適な画像配信が自動化され、SEOパフォーマンスの継続的な改善につながります。Next.jsの Image コンポーネントやWordPressの自動画像生成機能など、フレームワーク側の支援機能も積極的に活用しましょう。
