Responsive Design - Bilder für unterschiedliche Viewports nur bei Bedarf laden

sight011

Erfahrenes Mitglied
Hallo liebe Commune ;-)

Wenn ich unterschiedliche Bilder per Media-Query beispielsweise für Smartphone und Tablet einbauen will. Und für den kleineren Viewport beispielsweise das tablet Bild auf display: none; stelle, wird es dann trotzdem geladen/übertragen, wenn der User nun die Seite mit dem Smartphone öffnet?

Besten Gruß
sasa
 
Für unterschiedliche Bildversionen kannst du auch sowas wie das hier verwenden: http://adaptive-images.com/
Der Vorteil dabei ist, dass dafür keine Anpassungen am Code nötig sind und alles über die htaccess und danach über das PHP Script geregelt wird (Ausser einem kleinen Eintrag im <head>).
Damit kannst du definieren wie Gross die Bilder sein sollen für verschiedene Auflösungen. zB bringt es ja nichts ein 2000px breites Bild zu laden um es nachher bei einer Auflösung von 460px auf 100% runter zu skalieren. Nun kannst zu zB sagen, dass bei einer Auflösung von 500px alle Bilder auf 500px runtergerechnet werden sollen. (Dies wird einmal gemacht und danach zwischengespeichert).

Zu display: none; http://justinmarsan.com/hidden-elements-and-http-requests/
Scheint als würden alle Browser was eigenes machen und ist wohl noch unsicher was sich durchsetzen wird.

Ich glaube die einzige Möglichkeit im Moment ist es über media-querys zu gehen und dann das Bild als background-image einem Div zuweisen und zwar nur dann wenn die Auflösung genug gross ist. Für img-Tags kannst du nur mit Javascript arbeiten und den src nur setzen wenn du das Bild auch wirklich brauchst, aber das finde ich mehr als suboptimal.
 
Zurück