Background-Image CSS für mobile Endgeräte optimieren

[freak_me11]

Hallo,

ich bin mir nicht ganz sicher, ob ich das richtig mache, also folgendes:
Ich habe ein recht großes Bild ca. 2000px breit und dementsprechend groß ist auch die Datei. Für mobile Geräte reichen mir 1280px in der Breite.

Ich habe ein Hintergrundbild per CSS eingefügt:
.test
{
background-image: test.jpg;
}


Wenn ich nun schreibe:
.mobile .test
{
background-image: test_klein.jpg;
}

In der gleiches CSS-Datei. Wird nun .test auch geladen oder nur .mobile .test? Habe ich es also optimiert oder nur schlimmer gemacht?

[dhe]

mach das ganze über Media Queries, da kannste dann für jede Auflösung ein Hintergrund vergeben.
http://wiki.selfhtml.org/wiki/CSS/Media_Queries

[BugBuster]

Das beantwortet aber seine Frage nicht. Gerade in Media Queries, die nach dem "normalem" CSS folgen, bleibt die Frage, ob der Browser erst alle CSS Angaben die passend und gültig sind zusammenfasst und dann erst das passende Bild lädt (also nur eins) oder ob der gleich anfängt das erste Bild zu laden und dann das zweite hinterher.

Wobei man das ja ganz einfach testen könnte, oder?

Edit: OK, man könnte übertreiben und alles in Media Queries setzen, dann sollte auf alle Fälle nur eins greifen. Es sei denn die Browser sind wieder pseudointelligent und laden doch schon mal im voraus alles was nach einem Bild klingt Der IE ist da so ein Kandidat, der gerne mal auf Verzeichnisse einfach so zugreift die er im Quelltext findet, da könnte ja noch mehr sein als eine Bild.)

[freak_me11]

O.K. mit Media Queries.

Dann gehe ich wie folgt vor:

Ich erstelle eine weitere CSS-Datei mit dem jeweiligen Media-Query. Diese binde ich im Seitenlayout zusätzlich mit ein.

Also ich habe die CSS-Datei styles.css und dann noch styles_iPad.css zum Beispiel. Beide binde ich im Seitenlayout ein!?
In der style.css habe ich dann z.B.
.test
{
background-image:test.jpg
}

und in der styles_iPad.css schreibe ich dann:
.test
{
background-image:test_klein.jpg
}


Rufe ich die Webseite dann mit dem iPad auf wird nur test_klein.jpg geladen?

Und dann mache ich das gleiche nochmal mit einer CSS-Datei styles_smartphone.css?

[freak_me11]

Wäre spitze, wenn mir kurz jemand Bescheid gibt, ob das so der richtige Weg ist, nicht dass die ganze Arbeit dann umsonst ist...