画像の切り替えレスポンシブ(pictureタグ)

PC時とスマホ時で別の画像を表示させたい！
そんなときに便利な方法をご紹介します。

実装イメージ

コード

 HTML

<picture>
    <source media="(max-width: 768px)" srcset="img/sample-sp.png" width='200' height='100' />
    <img src="img/sample-pc.png" alt="代替テキスト" width='800' height='400'/>
</picture>

pictureタグを使用すれば、CSSを使わずHTMLのみで画像を切り替えることができます。
ブラウザ幅769px~は最大幅はsample-sp.pngが表示され、
ブラウザ幅768px以下はsample-pc.pngが表示されます。

pictureタグのメリット

 HTML

<div class="imageArea">
  <img class="image-pc" src="img/sample-pc.png">
  <img class="image-sp" src="img/sample-sp.png">
</div>

 CSS

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

.image-pcと.image-spで分けて要素を記載すると、display:none;を記載していても、Webサイトがロードした際にimgタグが1度読み込まれてしまいます。
pictureタグで記載すると、Webサイトがロードした際、表示しないほうの画像は読み込まれません。よってWebサイトの表示スピードを改善することができます。