私は壁紙のウェブサイトのすべてのイメージのイメージ源を設定する方法

Question

私は壁紙のウェブサイトを開発しています。これは私はすべての壁紙の3つのバージョンがあり、私はこれらの3つをホームページに使いたいと思います。ウェブサイトの例のホームページの は10の壁紙を示していますし、私は300×300の画像を使用したい小さな画面のデバイスのために、私が欲しい中画面サイズのデバイスは、O 600×600を使用するために、私は1000×1000

を使用する大画面サイズのデバイス用にあります任意の効率的なSEOのフレンドリーな方法は、ホームページのHTMLを読み込む前に画面のサイズを決定し、画面のサイズに応じて画像srcを設定する？ HTMLを読み込んだ後にjavascriptを使って画像srcを更新/設定したくない

Answer 1

HTMLを変更しないでください。 CSSとメディアクエリを使用して背景画像を設定するだけです。

/* Small screens & default */ 
.homepage .wallpaper { 
    width: 300px; 
    background-image: url(wallpaper-300.jpg); 
} 

/* Medium sized screens */ 
@media all and (min-width: 600px) { 
    .homepage .wallpaper { 
     width: 600px; 
     background-image: url(wallpaper-600.jpg); 
    } 
} 

/* Larger sized screens */ 
@media all and (min-width: 1100px) { 
    .homepage .wallpaper { 
     width: 1000px; 
     background-image: url(wallpaper-1000.jpg); 
    } 
} 

（あなたが各画像3回ハードコードする必要があるので、これは、画像の多くの最善の解決策ではないかもしれない）何画素について