概要
PC画像とSP画像など、画面幅に応じて異なる画像を読み込む場合にpicture要素を使用して出し分ける方法を紹介。用途・要件
- picture要素を使用して画面幅に応じて異なる画像を表示する。
- .pc-hideや.sp-hideなどのクラスで非表示( display:none; )にして切り替えても、両方の画像が読み込まれるためページの表示速度が遅くなる原因になる。そのため、picture要素で出し分ける事が望ましい。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
