Über viele Jahre wurden Hintergrundbilder bedenkenlos und teilweise im großen Stil im Webdesign (auch von uns) verwendet. Zum größten Teil ist dies auch noch heute der Fall (bei uns nicht mehr). Doch spätestens mit dem Beginn der stetig steigenden Anforderungen an die technische Qualität und die Geschwindigkeit von Webseiten, wurde der Einsatz von Hintergrundbildern mehr und mehr zum Problem. Denn:Hintergrundbilder sind nicht Bestandteil des HTML-Codes einer Webseite, sondern lediglich ein Design-Element, welches im CSS-Code angegeben wird. Und genau das ist sogar in mehrfacher Hisicht ein Problem.
Beim Upload eines Bildes in WordPress werden von jedem Bild sofort mehrere Versionen in verschiedenen Größen erzeugt, die je nach Bedarf und Bildschirmgröße im Frontend zur Anzeige benötigt werden. Das stellt sicher, dass bei jeder Bildschirmgröße möglichst ein Bild geladen wird, was nur so groß ist, dass es für eine vernünftige Anzeige ausreicht und nicht viel zu groß ist. Zwar werden auch von Hintergrundbildern mehrere Versionen angelegt, da WordPress ja im Moment des Uploads noch nicht wissen kann, dass wir das Bild als Hintergrundbild benutzen wollen. Allerdings werden nach dem Einbinden im Frontend keine dynamischen Bildgrößen abgerufen, sondern das Hintergrundbild wird in einer statischen Größe angezeigt. Da Hintergrundbilder meist komplette Sections abdecken, sind diese Bilder in der Praxis dann sogar recht groß um den Effekt zu verhindern, dass der Hintergrund zu pixelig dargestellt wird.
Problem: die Größe und somit die Ladezeit der angezeigten Webseite leiden darunter.
Moderne Webseiten und visuelle Editoren wie Oxygen oder Bricks verfügen mittlerweile standardmäßig über ein sog. Lazy Load Feature. Dies bedeutet, dass Bilder erst dann in die Webseite geladen werden, wenn der User an die entsprechende Stelle auf der Seite scrollt bzw. kurz davor. Dies verhindert, dass direkt beim Aufrufen einer Seite alle Bilder sofort geladen werden, was den Ladevorgang unnötig verzögert. Für Hintergrundbilder gilt dieses Feature jedoch nicht, da sie nicht Bestandteil des HTML-Codes der jeweiligen Seite sind und somit nicht von diesen Features aufgegriffen werden. Elementor hat zwar vor kurzem das experimentelle Feature von Lazy Load für Hintergrundbilder eingefügt, allerdings bleibt hier erst einmal abzuwarten, inwiefern diese Lösung wirklich funktioniert und wie diese sich auf die Ladezeiten der Webseite auswirkt (bitte nicht noch ein JavaScript).
Problem: auch hier leiden die Größe und somit die Ladezeit der angezeigten Webseite. Das Bild wird nicht nur nicht in einer optimalen Version angezeigt, sondern auch nicht "lazy geloadet".
Auch im Bereich SEO und Zugänglichkeit haben Hintergrundbilder klare Nachteile. Denn da sie nicht "normal" im HTML-Code der Webseite auftauchen, verfügen sie nicht über Meta-Attribute wie Alt- und Title. Gerade das Alt-Attribut ist jedoch wichtig, um beispielsweise sehbehinderten Menschen die Möglichkeit zu geben, sich die Beschreibung des Bilder vorlesen zu lassen.
Wir haben für die Webseiten unserer Kunden eine spannende Lösung gefunden, um all diese Nachteile komplett zu umgehen und trotzdem die exakt selbe Optik auf Webseiten zu benutzen, als würden wir Hintergrundbilder verwenden. Das CSS-Feature object-fit.
CSS object-fit bietet eine Lösung für die Probleme, die durch die Verwendung von Hintergrundbildern entstehen können. Mit object-fit können Bilder direkt in ein HTML-Element eingebettet werden, was mehrere Vorteile bietet:
In der Praxis nutzen wir dieses Feature so, indem wir bspw. eine Section relativ positionieren und das Bild dann absolut innerhalb dieser Section positionieren, meist mit einem z-index von -1. Dadurch bilder das absolut positionierte Bild den Hintergrund der Section. Mit object-fit: cover kommt nun das beliebte Feature ins Spiel, bei dem sich das Bild so verhält, wie wir es von Hintergrundbildern gewohnt sind. Nun kann über dem Bild ein normaler Container eingefügt werden, in dem wir Content platzieren.
Insgesamt gibt es viele kleine und große Tricks, wie sich die Ladezeit und die Qualität einer Webseite deutlich verbessern lassen, ohne dass man dies auf den ersten Blick bei der Betrachtung der Webseite erkennt. CSS object-fit ist definitiv einer davon und wird bei uns in einer Vielzahl von Projekten eingesetzt.
powered by Borlabs Cookie