PC画像とSP画像のデザインが変わる際、CSSのメディアクエリで切り替えたりJavaScriptを使用して切り替える方法もありますが、今回はHTMLのpictureタグを使用して簡単に画像の切り替えができる方法を紹介します。
画面幅によって、表示する画像を切り替えることができる
ブラウザが対応していない画像（webpなど）を、別の画像に切り替えて表示してくれる
画像を切り替えることでRetinaディスプレイ対応ができる
イメージはこちら
設定は簡単です。切り替えのコードは以下になります。
<picture>
<source srcset="画像のパス" media="ブレイクポイント指定">
<img src="上記の条件以外の画像のパス" alt="">
</picture>例として、幅1000px以上で画像を切り替えたい場合
<picture>
<source srcset="https://autoproject.nagoya/wp-content/uploads/test_2-scaled.jpg" media="(min-width: 1000px)">
<img src="https://autoproject.nagoya/wp-content/uploads/test_1-scaled.jpg" alt="">
</picture>上記のように記述すれば、1000px以上（PC指定）の時は、test_2-scaled.jpgの画像が表示されて、それ以外（SP指定 1000px以下）の時は、test_1-scaled.jpgを表示してくれます。
PC、SPだけではなく、タブレットでも切り替えをしたい場合、画像を複数設定することもできます。
設定は、sourceタグを追加するのみです。
<picture>
上から順番に読み込む
<source srcset=".https://autoproject.nagoya/wp-content/uploads/test_2-scaled.jpg" media="(min-width: 1000px)">pc-
<source srcset="https://autoproject.nagoya/wp-content/uploads/test_3-scaled.jpg" media="(min-width: 768px)">タブレット
上記の条件にあてはまらない場合imgタグを読み込む
<img src="https://autoproject.nagoya/wp-content/uploads/test_1-scaled.jpg" alt="">その他（sp
</picture>-
pictureタグの特徴はsourceタグを上から順番に読んでいくので、条件が合う画像を読み込んでくれます。最後、どれも条件に当てはまらない場合はimgタグを読み込みます。そのため、最後にimgタグは必ず設定してください。
次回は、webp画像の設定方法や、Retinaディスプレイ対応の方法を紹介します。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
