CSS HTML

レスポンシブ画像の実装方法｜srcset・pictureの使い方を解説

✅ レスポンシブ画像とは？

スマホ・タブレット・PCなど、ユーザーが利用するデバイスは画面サイズも解像度もバラバラです。
もし 1種類の画像をすべてのデバイスに使うと…

  • PCで見ると荒く見える
  • スマホで見ると無駄に容量が重い

👉 こうした問題を解決するのが レスポンシブ画像 です。

レスポンシブ画像を実装することで、デバイスに合わせて最適なサイズ・解像度の画像を自動で配信できます。

📌 方法1. srcset を使う

srcset 属性は、画像の解像度やサイズに応じて切り替えられる仕組みです。

🔹 解像度に応じた画像切り替え

<img src="image-600.jpg" 
     srcset="image-600.jpg 600w, image-1200.jpg 1200w, image-2000.jpg 2000w" 
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 2000px" 
     alt="サンプル画像">
  • srcset → 用意する画像のファイルと幅を指定
  • sizes → 画面幅ごとに表示サイズを指定
  • ブラウザが自動で最適な画像を選んで表示

👉 これにより「スマホでは軽量画像、PCでは高解像度画像」が配信されます。

📌 方法2. picture 要素を使う

picture 要素は、条件ごとに異なる画像を表示したい場合 に便利です。

🔹 例：横長画像と縦長画像を切り替え

<picture>
  <source media="(max-width: 600px)" srcset="image-small.jpg">
  <source media="(min-width: 601px)" srcset="image-large.jpg">
  <img src="image-default.jpg" alt="レスポンシブ画像">
</picture>
  • <source> → 条件（media query）ごとに画像を指定
  • <img> → フォールバック（条件に合わないときの画像）

👉 これにより モバイルでは小さな画像、PCでは大きな画像 を表示できます。

📌 CSSとの組み合わせ

レスポンシブ画像はHTMLの属性で最適化しますが、CSSでの調整 も重要です。

🔹 画像を画面幅にフィットさせる

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

👉 これで画像が親要素の幅に合わせて縮小され、はみ出しを防げます。

📌 実際の使い分け

方法適したケース
srcset同じ画像のサイズ違いを用意して最適化したい場合（例：ブログ記事の写真）
picture画像の内容そのものを切り替えたい場合（例：横長・縦長バナー、背景差し替え）

📌 レスポンシブ画像を使うメリット

  • ページ表示が速くなる（スマホに大きすぎる画像を送らない）
  • ユーザー体験が向上（きれいで読みやすい画像）
  • SEO効果（Googleは表示速度を評価基準にしている）

🎯 まとめ

  • レスポンシブ画像 はデバイスごとに最適な画像を表示する仕組み
  • srcset → 同じ画像のサイズ違いを切り替える
  • picture → 画像の内容そのものを切り替える
  • CSS で max-width: 100% を指定してレイアウト崩れを防ぐ

👉 まずはブログやサイトの 記事画像にsrcsetを導入 するところから始めましょう！

おすすめ記事

-CSS, HTML