CSS レスポンシブ画像

レスポンシブな画像とは、どのような画面サイズ（デスクトップ、タブレット、スマートフォン）であっても、自動的に拡大・縮小し、レイアウトを崩すことなく綺麗に収まる画像のことです。

1. CSS を使用した画像のレスポンシブ化

画像をレスポンシブにする最も簡単な方法は、CSSでサイズを相対的に指定することです。

1.1 width プロパティを使用する

width プロパティを 100% に設定すると、画像は親要素の幅に合わせて常に拡大・縮小されます。

img {
  width: 100%;
  height: auto;
}

       注意: この方法では、親要素が画像本来のサイズ（Original Size）より大きい場合、画像が引き伸ばされて画質が劣化する可能性があります。

1.2 max-width プロパティを使用する（推奨）

max-width: 100% を使用すると、画像は必要に応じて縮小されますが、元のサイズより大きくなることはありません。現在のWeb開発において最も標準的な手法です。

img {
  max-width: 100%;
  height: auto;
}

2. 背景画像のレスポンシブ制御

要素の背景として指定した画像（background-image）も、background-size プロパティを使って制御できます。

2.1 background-size: contain

画像のアスペクト比を維持したまま、要素の中に画像が完全に収まるようにリサイズします。画像全体が見えますが、要素の形状によっては余白ができることがあります。

2.2 background-size: cover

画像のアスペクト比を維持したまま、要素を完全に覆うようにリサイズします。余白はできませんが、画像の一部が切り取られる（トリミングされる）場合があります。

2.3 background-size: 100% 100%

画像を要素の幅と高さに合わせて引き伸ばします。アスペクト比が崩れるため、写真などには不向きです。

3. デバイスごとに異なる画像を表示する

画面サイズが変わる際、単に画像をリサイズするだけでなく、「PCでは横長の画像、スマホでは被写体に寄った縦長の画像」といった具合に、画像そのものを切り替えたい場合があります。

3.1 メディアクエリによる背景画像の切り替え

CSSのメディアクエリを使用して、画面幅に応じて異なる背景画像を指定します。

/* モバイル向けの小さな画像 */
.container {
  background-image: url('small-bg.jpg');
}

/* 400px以上の大きな画面向け */
@media only screen and (min-width: 400px) {
  .container {
    background-image: url('large-bg.jpg');
  }
}

3.2 HTML5 の <picture> 要素

HTMLの <picture> 要素を使用すると、ブラウザがデバイスの条件に最適な画像を自動的に選択して読み込みます。

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

この手法は、モバイルユーザーに対して小さなサイズの画像を送信できるため、パフォーマンス（読み込み速度）の向上に非常に効果的です。

4. レスポンシブ画像に関連するプロパティ一覧

画像のレスポンシブ対応は、単に「見た目を整える」だけでなく、モバイルデバイスでのデータ通信量を節約し、サイトの表示速度を速めるという重要な側面も持っています。