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

[Schmidt]

Kann mich da jemand aufklären?

Ich habe es mit Opera 12.12 ausprobiert.

Das Bild für die große Fensterbreite wurde gleich zu Beginn geladen.
Das Bild für die kleine Fensterbreite wurde erst geladen, als ich das Fenster kleiner gezogen habe.

Genaugenommen wurde das Bild für die kleine Fensterbreite sogar erst geladen, als es in den sichtbaren Bereich kam.

Wie man so etwas herausfinden kann:
Opera bietet ein Entwicklerwerkzeug namens "Opera Dragonfly" an, welches standardmäßig im Operabrowser enthalten ist. Neben vielen anderen nützlichen Dingen kann man sich anzeigen lassen was wann wie lange von wo geladen wird.

Ich erinnere mich, dass es so etwas auch für den Mozilla Firefox Browser gab.

Womöglich auch für weitere Browser.

Lieben Gruß

[1UnitedPower]

Ich erinnere mich, dass es so etwas auch für den Mozilla Firefox Browser gab.

Ja, Firebug

Womöglich auch für weitere Browser.

Webkit-Browser und InternetExplorer kommen ebenfalls von Haus aus mit Entwicklertools, die das leisten.

Chrome: CTRL+I
IE: F12

[1UnitedPower]

Chrome: CTRL+I

CTRL+Shift+I

[snorri]

Cool -- Danke an alle! :-)