【HTML／CSS】レスポンシブ！PCとスマホで違う画像に切り替えて表示する方法

RELEASE / 2024.8.23 UPDATE / 2024.08.21

picture

レスポンシブ

画像切り替え

Webサイトを閲覧する方法として、一昔前であればPCがごく一般的でした。
しかし、今はスマホで閲覧する人がかなりの割合を占めるようになり、さらにはタブレットや携帯ゲーム機などさまざまな端末で閲覧することが出来るようになっています。
そして、それらの画面サイズはバラバラで画面サイズによって理想的な画像サイズは変わってきます。

そこで画面サイズに応じて表示する画像を切り替える必要がありますが、この記事ではその方法をご紹介したいと思います。

この記事の目次を表示

1 【方法1】pictureタグで切り替え
2 【方法2】CSSで切り替え
3 まとめ

【方法1】pictureタグで切り替え

まずご紹介するのがpictureタグを使ってPCとスマホで違う画像に切り替える方法です。
2024年8月時点ではオススメの指定方法と考えています。

pictureタグは画面サイズに応じて表示する画像を切り替えることが出来ます。

基本的な使い方はこちらです。

<picture>
    <source srcset="" media="(min-width: 769px)" type="image/jpg"><!-- 画面サイズが769px以上の時に表示される画像 -->
    <source srcset="" media="(max-width: 768px)" type="image/jpg"><!-- 画面サイズが768px以下の時に表示される画像 -->
    <img src="" alt="代替テキスト"><!-- 該当しない場合に表示される画像 -->
</picture>

このように画面サイズごとに表示する画像を指定することで、画像を切り替えることが出来ます。

一番上に指定したものが優先度が一番高くなり、下になるにつれて優先度が下がっていきます。
そして、どの条件にも該当しない場合は、imgタグに指定した画像が表示されるようになっています。

pictureタグを使うことで、該当する条件の画像のみを読み込むため、パフォーマンスの向上が期待出来ます。

【方法2】CSSで切り替え

続いてご紹介するのが、CSSのdisplay:block、display:noneで切り替える方法です。

IEのサポートが終了するまではこの書き方が主流だった気がします。

基本的な使い方はこちらです。

<img src="" class="pc" alt="代替テキスト">
<img src="" class="sp" alt="代替テキスト">

.pc {
    display: block;
}
.sp {
    display: none;
}
@media (max-width: 768px) {
    .pc {
        display: block;
    }
    .sp {
        display: none;
    }
}

PC用の画像とスマホ用の画像をそれぞれimgタグで指定し、PC用の画像にはclass="pc"、スマホ用の画像にはclass="sp"を追加します。
そして、CSSの指定でメディアクエリを使い、画面サイズに応じてclass="pc"とclass="sp"のdisplayの指定を切り替えます。

この方法のデメリットは表示しない画像も読み込んでしまうため、表示スピードが遅くなってしまう点です。
そのため、最初にご紹介したpictureタグを使う方法が現時点ではオススメと考えています。