HTML: HTMLレスポンシブ画像
同じ画像でも、スマートフォン、タブレット、デスクトップで異なるサイズや解像度で表示されるべきです ― これが「レスポンシブ画像」です。すべての画面サイズで画像をクリアに、帯域効率よく、高速に読み込む方法を学びましょう。
1. ビューポート設定
レスポンシブデザインの第一歩は、ビューポートを設定することです。これがないと、モバイルブラウザはページを980px幅に縮小して表示するため、テキストや画像が非常に小さくなります。この <meta> タグを追加すると、ページ幅がデバイス画面に一致します。
▶ サンプル
HTML
<!-- ✅ ビューポート設定あり（推奨） -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 0; font-family: sans-serif; }
.box { padding: 20px; background: #e3f2fd; }
</style>
</head>
<body>
<div class="box">
<h1>こんにちは、モバイル！</h1>
<p>スマートフォンで表示すると、テキストサイズが適切で、1画面にすべての内容が収まります。</p>
</div>
</body>
<!-- ❌ ビューポート設定なし -->
<head>
<style>
body { margin: 0; font-family: sans-serif; }
.box { padding: 20px; background: #ffebee; }
</style>
</head>
<body>
<div class="box">
<h1>こんにちは、モバイル！</h1>
<p>スマートフォンで表示すると、ページが980pxに縮小され、テキストが非常に小さくなります。</p>
</div>
</body>
2. 画像のレスポンシブ対応
画像をコンテナ幅に自動適応させるために最もよく使われる2つのCSSプロパティ：
max-width: 100%― 画像がコンテナ幅を超えず、元のサイズ以上に拡大されないwidth: 100%― 画像が常にコンテナ幅いっぱいに表示されるが、引き伸ばされて歪む可能性がある
▶ サンプル
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 20px; }
.container {
width: 80%;
max-width: 600px;
border: 2px dashed #999;
padding: 10px;
margin-bottom: 20px;
}
.img-max {
max-width: 100%;
height: auto;
}
.img-full {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>max-width: 100%（アスペクト比を維持、歪まない）</h2>
<div class="container">
<img src="https://via.placeholder.com/800x400" alt="サンプル画像" class="img-max">
<p>元の画像幅800px、コンテナ600px。画像は歪まずに600pxに縮小されます。</p>
</div>
<h2>width: 100%（コンテナいっぱいに表示）</h2>
<div class="container">
<img src="https://via.placeholder.com/800x400" alt="サンプル画像" class="img-full">
<p>画像は常にコンテナ幅いっぱいに表示されます。height: auto を追加して歪みを防ぎます。</p>
</div>
</body>
</html>
📌 画像の読み込み速度は重要です。CSSで大きな画像を縮小しても、「見た目が小さくなる」だけで ― ブラウザはフルサイズのオリジナルファイルをダウンロードしています。アップロード前に画像を適切なサイズにトリミングするのが最善です：モバイル用に小さい画像、デスクトップ用に大きい画像。これにより読み込み速度が大幅に向上します。
3. srcset属性
srcset を使うと、ブラウザが画面密度（1x、2x、3x）やビューポート幅に基づいて最適な画像を自動選択できます。複数の画像バージョンを提供するだけで、ブラウザが「賢く選び」ます。
▶ サンプル
HTML
<!-- 画面密度に基づいて選択 -->
<img src="photo-1x.jpg"
srcset="photo-1x.jpg 1x, photo-2x.jpg 2x, photo-3x.jpg 3x"
alt="サンプル写真">
<!-- ビューポート幅に基づいて選択 + sizesで画像表示幅を指定 -->
<img src="small.jpg"
srcset="small.jpg 480w,
medium.jpg 768w,
large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 80vw,
60vw"
alt="レスポンシブ画像の例">
srcset には2つの一般的な使い方があります。
- x 記述子：画面密度に基づいて選択。通常画面は1x、Retina画面は2xまたは3x。
- w 記述子：ビューポート幅に基づいて選択。
sizes属性と組み合わせてブラウザに画像の実際の表示幅を伝え、ブラウザが最適な画像を計算します。
4. picture要素
<picture> は srcset よりも柔軟です。異なる画面幅でまったく異なる画像を読み込むことができます ― 例えば、ワイド画面ではパノラマ画像、狭い画面ではクローズアップ画像（デザイン用語で「アートディレクション」と呼ばれます）。
▶ サンプル
HTML
<picture>
<!-- ワイド画面 >= 1200px：全景を表示 -->
<source media="(min-width: 1200px)" srcset="landscape-full.jpg">
<!-- 中画面 >= 768px：中程度のビュー -->
<source media="(min-width: 768px)" srcset="landscape-medium.jpg">
<!-- 小画面 < 768px：クローズアップ -->
<source media="(max-width: 767px)" srcset="landscape-cropped.jpg">
<!-- フォールバック：ブラウザがpictureをサポートしない場合 -->
<img src="landscape-medium.jpg" alt="風景写真">
</picture>
<picture> は複数の画像フォーマット（WebPなど）を提供するためにもよく使われ、ブラウザが最初にサポートするフォーマットを選択します。
▶ サンプル
HTML
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="写真">
</picture>
ブラウザは各 <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のメディアクエリでブレークポイントを制御してください。
