HTML

picture要素で画像が切り替わらない

source の記述順が間違っている

こんな症状

pictureタグでレスポンシブ画像を設定したのに切り替わらない。sourceの順番が原因だよ。

まず試す

<source> を条件が狭い順（大きい画面→小さい画面）に並べ、最後に img をフォールバックとして置く。

html

<picture>
  <source srcset="large.jpg" media="(min-width: 768px)">
  <source srcset="small.jpg">
  <img src="default.jpg" alt="写真">
</picture>

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

✓常に1枚目の画像になる
→ 条件の広い source を先に書いている。狭い順（大画面→小画面）に並べ替える。
✓media 条件が効かない
→ 各 source の media 属性を正しく書く（例: (min-width: 768px)）。
✓何も表示されない
→ picture 内に img を必ず置く（フォールバック兼必須要素）。

なぜ起きる？

ブラウザはsource要素を上から順に評価し、最初にマッチしたものを使うよ。media属性の条件が広いものを先に書くと、それが常にマッチして他のsourceが使われないんだ。また、img要素はpicture内に必須で、フォールバックとして機能するよ。

✕ エラーが起きるコード

<picture>
  <source srcset="small.jpg" media="(min-width: 0px)">
  <source srcset="large.jpg" media="(min-width: 768px)">
  <img src="default.jpg" alt="写真">
</picture>
<!-- 最初の source が常にマッチ -->

✓ 直したコード

<picture>
  <source srcset="large.jpg" media="(min-width: 768px)">
  <source srcset="small.jpg">
  <img src="default.jpg" alt="写真">
</picture>
<!-- 条件が狭い順に並べる -->