PCとSP用画像の切り替えをHTMLタグで実装する方法

コーディングで必要だったのでメモ代わりの投稿です。

今や必須のレスポンシブ対応ですが、CSSでメディアクエリで切り替える以外の方法で実装したい時ありますよね。こちらの方法だとHTMLタグで実装できます。

<picture>
<source srcset=“画像URL" media="(max-width: 768px)">
<img src="画像URL" alt="">
</picture>

ディスプレイサイズ毎に画像を切り替えるので読み込みのスピードも変わるメリットがあります。

メディアクエリとうまく使い分けていきたいです。

上部へスクロール