picture要素を使用してPC画像/SP画像を出し分ける

[ ID : 8648 ]
picture要素を使用してPC画像/SP画像を出し分ける

概要

PC画像とSP画像など、画面幅に応じて異なる画像を読み込む場合にpicture要素を使用して出し分ける方法を紹介。

用途・要件

  • picture要素を使用して画面幅に応じて異なる画像を表示する。
  • .pc-hideや.sp-hideなどのクラスで非表示( display:none; )にして切り替えても、両方の画像が読み込まれるためページの表示速度が遅くなる原因になる。そのため、picture要素で出し分ける事が望ましい。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

実装

コンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録