レスポンシブデザインで画像を切り替える方法は色々ありますが、今回はHTMLのみで切り替えるとっても簡単な方法をご紹介します。
HTMLのみなのでCSSは不要です。コピペで使用できます。
picture要素を使用する
今回紹介する方法では、HTMLのpicture要素を使います。
pictureはHTML5.1から登場した要素で、子要素に source と img を内包して使用します。
※IE（Internet Explorer）は非対応
では具体的にコードを見ていきましょう。
<picture>
<source srcset="画像URL" media="メディアクエリの候補１">
<source srcset="画像URL" media="メディアクエリの候補２">
<img src="上記に一致しない場合に表示する画像URL" alt="">
</picture>こんな感じで、picture要素の中にsource要素とimg要素を内包します。
また、メディアクエリは上から順番に判定され、条件にマッチした時点で表示されるので、
①PCで表示したい画像
②タブレットで表示したい画像
③それ以外（スマホ）で表示したい画像
というように、順番に記述すると良いです。
source要素は1個～複数記述できるので、メディアクエリの数に合わせて増やすことができます。
PC/スマホで画像を切り替えるサンプルコード
それでは本題のPC/スマホの画像切り替えのサンプルコードです。
PCとスマホの２つで切り替えたい場合は、下記サンプルのようにsource要素を１つ記述します。
<picture>
<source srcset="pc-img.png" media="(min-width: 960px)"><!-- PC用 幅960px以上の場合表示 -->
<img src="sp-img.png" alt=""><!-- スマホ用 上記に一致しない場合（幅959px以下で）表示 -->
</picture>※メディアクエリの幅960px は任意です。切り替えたいサイズ幅に変更して使用してください。
PC/タブレット/スマホで画像を切り替えるサンプルコード
PC・タブレット・スマホの３つで切り替えたい場合は、source要素を２つ記述します。
<picture>
<source srcset="pc-img.png" media="(min-width: 960px)"><!-- PC用 幅960px以上の場合表示 -->
<source srcset="tb-img.png" media="(min-width: 640px)"><!-- タブレット用 幅640px以上の場合表示 -->
<img src="sp-img.png" alt=""><!-- スマホ用 上記に一致しない場合（幅639px以下で）表示 -->
</picture>メディアクエリの幅960px、640pxは任意です。切り替えたいサイズ幅に変更して使用してください。
メディアクエリをmax-widthで指定する場合のサンプルコード
メディアクエリはmax-widthでも指定できます。
max-widthの場合は、source要素にスマホ等のメディアクエリを指定し、それ以外の場合（PCの場合）をimg要素に記述すると良いです。
<picture>
<source srcset="sp-img.png" media="(max-width: 640px)"><!-- スマホ用 幅640px以下の場合表示 -->
<img src="pc-img.png" alt=""><!-- PC用 上記に一致しない場合（幅641px以上で）表示 -->
</picture>以上、HTMLのみでPCとスマホで画像を切り替える方法でした！
「参考になったよ！」という方はSNSなどでシェアしていただけると嬉しいです。
