最初に

近年ではレスポンシブが標準化されており、サイトが重くならないように画像などもpcとspで同一の画像を使うのが標準になっていると思います。

ただ、どうしても表やグラフなどはどうしてもつくりによってはpcとspで別々の画像で出し分けたい時があるのでそんな時に対応する手法を紹介します。

CSSメディアクエリを使う方法

CSSのメディアクエリを使って、画面サイズに応じて表示する画像を切り替えることができます。
こちらの手法は画像だけではなく他の要素にも使用する事ができます。

具体的にはpcに表示させたい要素に.u-pc-show、spで表示させたい要素には.u-sp-showのようなクラスを付与し、cssのメディアクエリを利用して表示を切り替えます。

<div class="c-img-box">
  <img src="./assets/img/common/img_pc.png" alt="" class="u-pc-show"> 
  <img src="./assets/img/common/img_sp.png" alt="" class="u-sp-show">
</div>

.u-sp-show{
  @media screen and (min-width: 769px) {
    display: none; //pc時に非表示
  }
}

.u-pc-show{
  display: none; //sp時は非表示
  @media screen and (min-width: 769px) {
    display: block; //pc時に表示
  }
}

cssを準備しておけばクラスの付け替えだけで画像だけではなく色々な要素を出し分ける事ができます。
この手法はcssのプロパティで制御しているので、他の目的でdisplayプロパティを使用している要素に使用すると意図していない挙動になる時があるので注意が必要なのと、画像を二枚読み込ませているので多少サイトのパフォーマンスに影響がでる可能性もあります。

CSSの背景画像として設定する方法

場合によってはcssで背景画像を設定し、メディアクエリで切り替える方法もあります。

.c-img-box {
  width: 100%;
  height: 300px;
  background-image: url('../img/common/img_sp.png') center center no-repeat; //sp時の画像を設定
  background-size: cover;
  @media screen and (min-width: 769px) {
    background-image: url('../img/common/img_pc.png') center center no-repeat; //pc時の画像を設定
  }
}

ただこちらの方法は画像をページに認識させる事ができないのでseoなどを考慮すると使用する場面は限られる印象です。

picture要素を使う方法　☆おすすめ

最近のweb制作現場では一番使われている手法だと思います。
HTMLのpicture要素を使うことで、異なる解像度や画面サイズに応じて最適な画像を選択することができます。

<picture>
  <source srcset="./assets/img/common/img_sp.png" media="(max-width: 768px)">
  <img src="./assets/img/common/img_pc.png" alt="">
</picture>

もう少し細分化させた書き方もありますが、そこまで使用する機会が多くないので割愛しております。
この例では、画面の幅が768px以下の場合はimg_sp.pngが表示され、それ以上の場合はimg_pc.pngが表示されます。

最後に

他にもjsを利用して出し分ける方法もあるとは思うのですが、基本的には上記に記載した方法で色々なパターンをフォローできると思います。

近年画像を取り扱うhtmlやcssはものすごいスピードで進化している印象です。
サイトのパフォーマンスに直結し、非常に重要なコンテンツを占めているのでこれからも新しい情報があればご紹介できればと思います。