PCとスマホで画像を出し分けるときのコード

<picture>
  <!-- スマホ（幅767px以下）用の画像 -->
  <source media="(max-width: 767px)" srcset="sp-image.jpg">
  <!-- PC（幅768px以上）用の画像 -->
  <source media="(min-width: 768px)" srcset="pc-image.jpg">
  <!-- 万が一、ブラウザが <picture> 要素に対応していない場合のフォールバック -->
  <img src="pc-image.jpg" alt="表示する画像">
</picture>

<picture>
  <!-- スマホ（幅767px以下）用の画像 -->
  <source media="(max-width: 767px)" srcset="sp-image.jpg">
  <!-- PC（幅768px以上）用の画像 -->
  <source media="(min-width: 768px)" srcset="pc-image.jpg">
  <!-- 万が一、ブラウザが <picture> 要素に対応していない場合のフォールバック -->
  <img src="pc-image.jpg" alt="表示する画像">
</picture>