パフォーマンス/読み込み時間を改善するために、画面サイズによって画像が異なりますか？ （Webdesign）

Question

私は私のウェブサイトに、一種の背景画像として表示したい大きな画像を持っています。それは非常に大きく、読み込み時間がかかるので、小さい画面では、実際に小さい画面に表示されている画像は小さくなるため、小さい画像を表示して読み込み時間を最小限に抑えたいので、大きな画像をロードするための無駄。

私の質問はこれです：どうすればいいですか？どのようなオプションがありますか？画面の解像度によって画面が異なるのですか？そして、どのようにして私のウェブサイトを見ているのかを知ることができます（つまり、画面サイズを知るにはどうすればよいですか）。

Answer 1

あなたはメディアクエリを使用することができ、これは

#body {  
background: url('images/your_bg_small.png') repeat-x; 
} 

@media (min-width: 601px) { 
#body { 
    background: url('images/your_bg.png') repeat-x; 
} 

}

上のウェブサイトが表示されているデバイスの幅当たりなどの変更に背景画像を許可します