画像のレスポンシブ化。画面サイズに合わせて読み込む画像を変える方法 | YETI NAVIレスポンシブサイトを制作する際に気にしたいのが、画像のレスポンシブ化。 画面サイズやディスプレイの画素密度に合わせて最適な画像だけを読み込むことで、無駄に通信が発生させないようにし、ページの表示速度を上げましょう。 CSSのメディアクエリを使用する場合 画像をimg要素で読み込むのではなく、背景画像として読み込ませます。 背景画像はdiv要素に適用します。 そのdiv要素の縦横比が常に一定に保たれるようにします。 横幅がiPad以上の時は”image-large.jpg”を、以下の時は”image-small.jpg”を読み込むようにします。 デモ (ブラウザサイズを変えてみてください。画像が変わります。) //example.html <div class="image"></div> //style.css .image { width: 100%; background-image:
