「picture」タグを使って画面サイズで画像を切り替える

主にレスポンシブデザインとして利用されると思いますが、画面の横幅サイズに応じて画像を別の画像に切り替える方法をご紹介します。

まずはデモページをご覧ください。

画像切り替えの確認は、ブラウザの横幅を狭めてみてください。
最初は犬ですが、狭めると猫に変わります。

HTMLに下記の記述のみです。

「767px」の部分は画面サイズの指定になりますので、必要に応じて変更してください。

あまり多用するものでもないと思いますが、今回のような画像を切り替える方法もあります。