HTML: HTMLレスポンシブ画像
最終更新：2026-09-08
同じ画像でも、スマートフォン、タブレット、デスクトップで異なるサイズや解像度で表示されるべきです ― これが「レスポンシブ画像」です。すべての画面サイズで画像をクリアに、帯域効率よく、高速に読み込む方法を学びましょう。
1. ビューポート設定
レスポンシブデザインの第一歩は、ビューポートを設定することです。これがないと、モバイルブラウザはページを980px幅に縮小して表示するため、テキストや画像が非常に小さくなります。この <meta> タグを追加すると、ページ幅がデバイス画面に一致します。
▶ サンプル
▶ 試してみよう2. 画像のレスポンシブ対応
画像をコンテナ幅に自動適応させるために最もよく使われる2つのCSSプロパティ：
max-width: 100%― 画像がコンテナ幅を超えず、元のサイズ以上に拡大されないwidth: 100%― 画像が常にコンテナ幅いっぱいに表示されるが、引き伸ばされて歪む可能性がある
▶ サンプル
▶ 試してみよう📌 画像の読み込み速度は重要です。CSSで大きな画像を縮小しても、「見た目が小さくなる」だけで ― ブラウザはフルサイズのオリジナルファイルをダウンロードしています。アップロード前に画像を適切なサイズにトリミングするのが最善です：モバイル用に小さい画像、デスクトップ用に大きい画像。これにより読み込み速度が大幅に向上します。
3. srcset属性
srcset を使うと、ブラウザが画面密度（1x、2x、3x）やビューポート幅に基づいて最適な画像を自動選択できます。複数の画像バージョンを提供するだけで、ブラウザが「賢く選び」ます。
▶ サンプル
▶ 試してみようsrcset には2つの一般的な使い方があります。
- x 記述子：画面密度に基づいて選択。通常画面は1x、Retina画面は2xまたは3x。
- w 記述子：ビューポート幅に基づいて選択。
sizes属性と組み合わせてブラウザに画像の実際の表示幅を伝え、ブラウザが最適な画像を計算します。
4. picture要素
<picture> は srcset よりも柔軟です。異なる画面幅でまったく異なる画像を読み込むことができます ― 例えば、ワイド画面ではパノラマ画像、狭い画面ではクローズアップ画像（デザイン用語で「アートディレクション」と呼ばれます）。
▶ サンプル
▶ 試してみよう<picture> は複数の画像フォーマット（WebPなど）を提供するためにもよく使われ、ブラウザが最初にサポートするフォーマットを選択します。
▶ サンプル
▶ 試してみようブラウザは各 <source> を上から順にチェックします。フォーマットをサポートしていればそれを読み込み、どれもサポートしていなければ <img> にフォールバックします。これにより、新しいフォーマットの圧縮メリットを享受しながら互換性を維持できます。
❓ よくある質問
Q
srcsetとsizesの違いは何ですか？A
srcsetは複数の画像ソースとその解像度（480w、768wなど）を提供し、sizesは異なるビューポート幅での画像の実際の表示サイズ（(max-width: 480px) 100vwなど）をブラウザに伝えます。ブラウザはこの2つの情報に基づいて、読み込むべき画像を計算します。簡単に言うと、srcsetは「利用可能な画像」、sizesは「さまざまな状況での画像の大きさ」です。Q なぜ画面サイズを判断して画像を切り替えるJavaScriptを使わないのですか？
A
srcset+sizesを使用する利点は3つあります：1）ブラウザはHTMLを解析しながら画像の読み込みを決定でき、JavaScriptの実行を待つ必要がない；2）JavaScriptが無効な場合でも機能する；3）ブラウザはより intelligentな選択ができます（ネットワーク状況、デバイスのピクセル比などを考慮）。JavaScriptは複雑なアートディレクションシナリオ（異なる構成など）にのみ適しており、単純な解像度の切り替えはsrcsetで処理されます。Q
<picture>とsrcsetはいつ使うのですか？A
srcsetは「同じ画像の異なる解像度バージョン」用で、ブラウザが自動的に適切な鮮明度を選択します。<picture>は「さまざまなシナリオで異なる画像を表示」するためで、異なる構成（アートディレクション）や異なるフォーマット（WebP/AVIF/JPG）を指定できます。シンプルなルール：鮮明度だけが異なる場合はsrcsetを使い、構成やフォーマットが異なる場合は<picture>を使います。Q レスポンシブ画像はSEOに影響しますか？
A 正しく使用されたレスポンシブ画像はSEOに肯定的な影響を与えます：1）ページの読み込み速度を向上させ（Core Web Vitals指標）；2）モバイルユーザーエクスペリエンスを向上させ；3）検索エンジンが
altテキストをインデックスできます。注意：srcset内の画像は同じコンテンツの異なるバージョンでなければなりません。完全に異なる画像を使用すると、検索エンジンが欺瞞と見なす可能性があります。📖 まとめ
<meta name="viewport">はモバイル対応の第一歩max-width: 100%で画像をレスポンシブにし、歪みを防止srcsetは画面密度やビューポート幅に基づいて異なる解像度の画像を読み込む<picture>+<source>は異なる画面幅で異なる構成の画像を表示、または複数の画像フォーマットを提供<picture>のフォールバックには常に<img>を使用
📝 練習問題
- レスポンシブ画像ギャラリー： 3枚の画像を持つギャラリーページを作成し、各画像に
max-width: 100%を適用してモバイルで完全に表示されるようにしてください。各画像に1xと2xのバージョンを提供するためにsrcsetを使用してください。 - アートディレクション練習：
<picture>を使って以下を実装してください：デスクトップでは1200px幅の風景写真、タブレットでは768pxのトリミング版、スマートフォンでは480pxのクローズアップ。min-widthのメディアクエリでブレークポイントを制御してください。
