まだCSSで切り替えてる？img(画像タグ)をPCとスマホで切り替える方法

PCとスマホで<img>を切り替えるのは画像サイズの問題もあり、PageSpeed->SEO的にも出来るだけ適切なサイズで配置したいところです。

今まではCSSで@mediaを使いdisplay: noneで非表示にしていたのですが、これだと全ての画像を1度読み込んでしまうため、どうにかならないかと思っていたところ他の方法があったのでメモしておきます。

Pictureタグを使ってhtmlのみで切り替え

今まではCSSで表示切り替えをしていたのですが、この方法だとhtmlのみで切り替えが可能！

読み込みもサイズで判断してそのサイズの画像のみを読み込んでくれるので画期的。

今まで知らなかったのが恥ずかしい限りです…。

今までのCSSでの切り替えの記述

今まではhtmlにスマホとPC用のimgを配置してCSSで表示/非表示を切り替えてました。

<img class="pc" src="/images/pc.jpg">
<img class="sp" src="/images/sp.jpg">

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

スマホサイズの時はclass=”pc”は非表示

PCサイズの時はclass=”sp”を非表示/class=”pc”を表示

今でもこのように書かれている方もいるのではないでしょうか？

もちろんこれでも問題なく表示されますが、これでは2つのimgを読み込む->非表示にするためPageSpeed的に少し評価が下がってしまいます。

Pictureタグとmediaでhtmlのみで記述してみる

この方法だとmediaで切り替えて表示する画像を切り替えます。

mediaをブレイクポイントと合わせるのが一般的だとは思いますが、ここも自由に切り替えが可能です。

<picture>
  <source media="(max-width: 768px)" srcset="/images/sp.jpg">
  <img src="/images/pc.jpg" alt="ここは共通です">
</picture>

<source>タグ内のmediaに切り替えるポイント、srcsetに表示させる画像のソースを記述します。

<img>内にはそれ以外の時に表示する画像のソースを記述します。

上記はCSSを使った書き方と内容的には同じです。

コード量も抑えられて一石二鳥ですね。

今後はこの方法で記述する習慣をつけていこうと思います。