Im Webdesign unterscheiden wir zwischen normal eingebundenen Bildern und Hintergrundbildern. Beide haben unterschiedliche Aufgaben und verhalten sich technisch verschieden. Hier erfahren Sie, weshalb diese Unterscheidung wichtig ist und in welchen Fällen welche Variante genutzt werden sollte.
Normale Bilder
- Sind Teil des Inhalts, wie ein Foto in einem Artikel.
- Werden im HTML eingebunden (<img>).
- Werden als Bilddatei eingefügt und passen sich automatisch an.
- Das Motiv bleibt immer vollständig sichtbar und skaliert im Ganzen, je nach Bildschirmgröße.
- Können mit Alternativtexten versehen werden und sind somit für Suchmaschinen und Barrierefreiheit relevant.
Besonderheiten bei normalen Bildern
Normale Bilder sind technisch unproblematisch, da sie immer im Ganzen skaliert werden. Allerdings gibt es Einschränkungen:
- Bei sehr großen Dateien leidet die Ladezeit.
- Auf kleinen Bildschirmen können Details kaum erkennbar sein.
- Das Bild kann nur so breit dargestellt werden, wie der Inhaltsbereich der Website es zulässt, es füllt also nie automatisch den gesamten Bildschirm.
Empfehlung
Nutzen Sie normale Bilder für Inhalte, die vollständig sichtbar bleiben müssen. Achten Sie dabei auf eine passende Auflösung und Dateigröße, damit Qualität und Ladezeit im Gleichgewicht sind. Schauen Sie hierzu gerne in unseren Beitrag zum Thema Bildoptimierung.
Hintergrundbilder
- Sind ein reines Gestaltungselement, kein eigentlicher Inhalt.
- Werden per CSS eingebunden (background-image).
- Haben keinen Alternativtext und sind für Suchmaschinen unsichtbar.
- Sie füllen den Browser oder ein bestimmtes Element immer vollständig aus.
- Damit das klappt, richtet sich das Bild nach einem Fixpunkt (z. B. Mitte oder oben).
- Alles außerhalb dieses „Rahmens“ wird abgeschnitten.
Hinweis zum Fixpunkt:
Ein Hintergrundbild kennt immer nur einen einzigen Fixpunkt. Dieser Fixpunkt ist die Stelle, die beim Anpassen des Bildes erhalten bleibt. Je nach Einstellung kann das die Mitte, der obere Rand oder eine andere Position sein. Alle anderen Bereiche können abgeschnitten werden. Es gibt keinen zweiten Fixpunkt!
So funktioniert die Darstellung in der Praxis
Damit dies nicht zu technisch wird, hier zwei Beispiele:
- Poster und Rahmen:
Stellen Sie sich ein großes Poster (das Hintergrundbild) vor. Legen Sie einen etwas kleineren Bilderrahmen darüber (Ihr Endgerät), sehen Sie nur einen Ausschnitt. Drehen Sie den Rahmen hochkant oder quer, verändert sich der sichtbare Bereich. - Karte auf Tisch:
Sie legen eine Landkarte auf einen Tisch, der kleiner ist als die Karte. Sie ziehen die Karte so, dass sie den Tisch komplett bedeckt. Dadurch verschwindet an den Rändern zwangsläufig etwas vom Motiv, und je nach Tischform bleibt ein anderer Bereich sichtbar. - Gruppenfoto:
Auf einem breiten Bildschirm sehen Sie alle zehn Personen. Auf einem schmalen Handybildschirm bleibt nur ein Fixpunkt, z. B. die Mitte. Links oder rechts werden Personen abgeschnitten . Dies passiert ganz automatisch und ist nicht zu verhindern.
Folgen für unterschiedliche Geräte
- Auf Smartphones sieht man meist nur einen Bildausschnitt.
- Auf Laptops oder Desktops erscheinen andere Teile des Motivs.
- Das Bild ist nie überall vollständig sichtbar, weil es Browser oder Element ausfüllt.
Gestalterischer Einsatz
- Designer nutzen Hintergrundbilder, um eine Fläche elegant und flexibel wirken zu lassen.
- Texte und Buttons können frei davor platziert werden.
- Für wichtige Motive oder Produktfotos ist diese Methode jedoch ungeeignet, da Teile abgeschnitten werden können.
Empfehlung
Nutzen Sie Hintergrundbilder ausschließlich für gestalterische Zwecke, also für Stimmungen, Atmosphären oder dekorative Elemente. Vermeiden Sie es, in Hintergrundbildern wichtige Motive oder Informationen unterzubringen, da diese je nach Gerät abgeschnitten werden können. Sorgen Sie dafür, dass das Bild genügend „Schnittmasse“ enthält, damit die Wirkung auch dann erhalten bleibt, wenn Teile am Rand verloren gehen.