レスポンシブデザインのWEBサイトを作成時、「PCではこちらの画像、スマホではあちらの画像」と、表示を切り替えたい時ってありませんか？ありますよね。たまに。

そんな時の解決策はいくらかあるのですが、私が一番スマートだと思う方法をご紹介します。
JavaScript等は使用せずにhtmlのみで切り替える方法です。cssすらも必須ではありません。

では早速、こちらがその方法です。

<picture>
	<source srcset="https://webcreatetips.com/wp-content/uploads/2016/05/beautiful-woman-sp.jpg" media="(max-width: 767px)">
	<img src="https://webcreatetips.com/wp-content/uploads/2016/05/beautiful-woman.jpg">
</picture>

上記の例ですと、画面幅（ブラウザ幅）が「767px以下」では「beautiful-woman-sp.jpg」を表示し、「768px以上」であれば「beautiful-woman.jpg」を表示します。

こちらの「source」というタグがおそらく大変スマートで、「media=”XXXX”」に指定した画面幅によって自動で表示画像を切り替えてくれます。

上の女性の写真は実際に上のコードを利用して表示しています。
PCで見ている方はブラウザ幅を縮めてみてください。画面幅「767px以下」で画像が切り替わります。

注意点として、「head」タグ内に以下の記述をお忘れなく。
レスポンシブデザインでは必須のメタタグです。

<meta name="viewport" content="width=device-width">

あとたまに「レスポンシブルデザイン」と言っている方もいらっしゃいますが正しくは「レスポンシブデザイン」です。
「シブル」って言いたくなる気持ちはわかりますが正しくは「レスポンシブデザイン」です。