レスポンシブサイトの画像切り替え

##こんな人におすすめ
メディアクエリ？難しいことはよくわからないが、とにかく簡単にパソコンとスマホで別の画像を表示させることのできる方法を探しているんだという方。

##実装方法
スクリーンサイズによって異なる画像を表示したい場合には、「picture」要素の使用がおすすめです。

これを利用すると、使用中のデバイスごとに最適な画像のみが読み込まれ、CSSでの指定よりも速い表示が期待できます。

html

<picture>
  <!-- ビューポートの幅が751ピクセル以上の場合にPC用画像を表示 -->
  <source media="(min-width: 751px)" srcset="img/forPc.png">
  <!-- ビューポートの幅が750ピクセル以下の場合にスマホ用画像を表示 -->
  <source media="(max-width: 750px)" srcset="img/forSp.png">
  <!-- ブラウザが<picture>タグをサポートしていない場合のフォールバック画像 -->
  <img src="img/fallback.png" alt="フォールバック画像">
</picture>

このコードでは、「source」要素を使って、スクリーン幅が751ピクセル以上であればPC用の画像を、それ以下であればスマホ用の画像を表示するように設定します。タグ内に指定されている画像は、万が一ブラウザがsource要素を認識できなかった場合でも適切な画像が表示されるためのものです。（回線が遅い、ブラウザが古いなどが主な理由です。）

media
メディアクエリを指定
img
イメージ要素は最後に指定

急ぎで簡単なランディングページ（LP）を公開したい場合などに、おすすめです。
リンクを画像に設定したい場合は、「picture」タグ全体をaタグで囲んでください。

（2017/11/12）良いコメントをいただいたので、記事を一部編集しました。