Responsive Design Bilder automatisch anpassen

[Auge]

Hallo

Weiterhin gibt es für <img> das Attribut srcset und das Element <picture> …

Gibt es für Hintergrundbilder etwas ähnliches?

Du kannst über Media Queries steuern, welches Hintergrundbild angezeigt wird. Allerdings war mir so, dass einige Browser dennoch alle referenzierten Bilder herunterladen. Davon meine ich vor ein paar Jahren gelesen zu haben. Ich weiß allerdings nicht, ob das aktuell (noch) so ist.

Mit den CSS-Angaben für Background-size (content, cover, ...) stehe ich ohnehin noch auf Kriegsfuß. Wie die sich in Mobilgeräten auswirken ist mir noch nicht klar, wenn der Screen weine Orientierung ändert.

Ich weiß nicht, ob Mobilbrowser beim drehen des Displays die eventuell anderen Hintergrundbilder herunterladen. Das lässt sich ja nun leicht testen, ich habe es bisher nur nie getan. Einerseits wird das Layout je nach Media Query ja tatsächlich angepasst und warum soll das nicht auch für die dort referenzierten Bilder gelten, andererseits wäre mir der eventuell vorhandene Qualitätsverlust schnurzpiepegal, wenn mir der Traffic erspart bleibt. Ein Display muss schon ein sehr krasses Seitenverhältnis haben, wenn ein für die Porträtausrichtung gedachtes aber in der Landschaftsausrichtung angezeigtes Bild derart aufpixelt, dass es unangenehm auffällt.

Die Größe des Bildes ist allerdings nicht alles. Manchmal will man auf verschieden großen oder verschieden ausgerichteten Displays auch verschiedene Motive oder aber Bildausschnitte des selben Motivs anzeigen. Dann sollte man vielleicht bei bestimmten „Gruppen“ von Media-Query-Abschnitten, bei denen davon ausgegangen werden kann, dass die mit dem selben Gerät zutreffen können (z.B. eben bei Porträt- vs. Landschaftsausrichtung), das selbe Bild benutzen und nur die Ausrichtung und den Ausschnitt verändern. Dann fiele in (vermutlich) vielen Fällen das Nachladen eines anderen Hintergrundbildes weg (wenn das denn überhaupt stattfindet).

Tschö, Auge