スマホ時とPC時の画像の切り替え

2026.06.23

HTML/CSS

スマホ時とPC時で画像を変えたい時ありますよね。

大体こういう具合に display:none display:block で分けている人もいるのではないでしょうか。

<style>
	.img-pc {
		display: none;
	}

	.img-sp {
		display: block;
	}

	@media (min-width: 768px) {

		.img-pc {
			display: block;
		}

		.img-sp {
			display: none;
		}
	}
</style>


<!-- PC時の画像 -->
<img src="/assets/images/sample_pc.jpg" alt="" class="img-pc">
<!-- スマホ時の画像 -->
<img src="/assets/images/sample_sp.jpg" alt="" class="img-sp">

ただこれだと読み込みの際画像を２つ読み込んでしまい速度が遅くなってしまうので、pictureを使うと速度を抑えつつ切り替えることができます！

<picture>
	<!-- PC時（幅768px以上）画像 -->
	<source srcset="/assets/images/sample_pc.jpg" media="(min-width:768px)">
	<!-- スマホ時（幅768以下）の画像 -->
	<img src="/assets/images/sample_sp.jpg" alt="">
</picture>

sourceタグのsrcsetでパスを指定し、mediaでどの幅で分岐させるのかを設定します。
imgタグがそれに適応しない場合表示される画像になります。
altやclassはimgに指定されたのが適用されます。

こちらの方がパフォーマンスがいいので、こちらを使用するのがベストでしょう！