HTML

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

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

😰 こんな症状

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

🔍 原因

ブラウザは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 が常にマッチ -->

✅ 直し方

1. source を条件が狭い順（大きい画面→小さい画面）に並べる。 2. 各 source に media 属性を正しく書く。 3. 最後に img 要素をフォールバックとして置く。

✅ 修正後のコード

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

この解決法は役立ちましたか？