HTML
CSS

レスポンシブサイトの画像切り替え

More than 1 year has passed since last update.

(2017/11/12)良いコメントをいただいたので、記事を編集しました。
スクリーンサイズによって違う内容の画像を表示する際はpicture要素を使う。

picture要素を使ってページを読み込むと、画像がPC/スマホのどちらかしか読み込まなくなるためにCSSで指定するよりも表示が速くなるみたいです。

html
<picture>
  <source media="(min-width: 751px)" srcset="../img/forPc.png">
  <source media="(max-width: 750px)" srcset="../img/forSp.png">
  <img src="../img/forPc.png" alt=""> <!-- フォールバック -->
</picture>

media
メディアクエリを指定
img
イメージ要素は最後に指定