PCとスマホで画像を切り替えて表示したい場合

PCとスマホで画像を切り替えて表示したい場合の処理について備忘のために記録。

index.html　

<img class="pc" src="../img/hoge.png" alt="PC用の画像">
<img class="sp" src="../img/fuga.png" alt="スマホ用の画像">

style.css

.pc { display: block !important; }
.sp { display: none !important; }

@media only screen and (max-width: 500px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

HTMLにはPC用、スマホ用両方とも記載する。

CSSで調整を行う。

PCで見た際には、class名がpcのimgのみが表示され、
スマホで見た際には、、class名がspのimgのみが表示される

ようにすることで、切り替えて表示することができる。

参考:
【レスポンシブ】PCとスマホで違う画像に切り替える方法！CSSだけで簡単画像切り替え！