シンプルにPCとスマホで画像を出し分けたい場合
<picture>
<source media="(min-width: 768px)" srcset="pc.png">
<source media="(max-width: 767px)" srcset="sp.png">
<img src="pc.png" alt="" class="hide-on-sp"><!-- PC用フォールバック -->
<img src="sp.png" alt="" class="hide-on-pc"><!-- SP用フォールバック -->
</picture>
<!-- ピクセル密度に合わせた画像の変更 -->
<picture>
<source media="(min-width: 768px)"
srcset="images/pc.png,
images/pc@2x.png 2x">
<source media="(max-width: 767px)"
srcset="images/sp.png,
images/sp@2x.png 2x">
<!-- PC用フォールバック -->
<img src="images/pc.png"
srcset="images/pc@2x.png 2x"
alt=""
class="hide-on-sp">
<!-- SP用フォールバック -->
<img src="images/sp.png"
srcset="images/sp@2x.png 2x"
alt=""
class="hide-on-pc">
</picture>