responsive Hintergrundbilder - werden alle sofort geladen?

[snorri]

Hi alle,

kurze Verständnisfrage zum responsive design: Ich möchte einem Element ein Foto als Hintergrundbild geben. Die Seite soll responsiv sein, dieses Element kann also je nach Bildschirmgröße unterschiedlich breit sein (in Stufen, also nicht 100%).

Ich weise diesem Element also bei kleinen Bildschirmen per media query ein kleineres Bild als Hintergrund zu, damit Smartphone-Nutzer nicht das große herunterladen müssen, das ihr Browser dann ja eh herunterskalieren würde.

Also schematisch:

  
@media only screen and (min-width: 641px) {  
    #element {  
        background-image: url(hintergrund-gross.png);  
    }  
}  
@media only screen and (max-width: 640px) {  
    #element {  
        background-image: url(hintergrund-klein.png);  
    }  
}  

Frage dazu: Es stehen ja beide Bild-URLs im CSS. Lädt der Browser dann wirklich nur das Bild, das er braucht, oder lädt er doch beide herunter?

Die Frage stellt sich mir, weil ich ja auch einen Desktop-Browserfenster schmal ziehen kann, woraufhin es auf das kleine Bild umschaltet. Das scheint ohne Ladezeit zu passieren, weshalb ich vermute, dass doch alle Bilder geladen werden, die im CSS referenziert sind. Dann wäre der Vorteil des geringeren Datenvolumens für die Smartphone-Browser freilich dahin.

Kann mich da jemand aufklären?

Danke im Voraus!

-- snorri