Hero-Bild

Wenn du eine Webseite öffnest, siehst du zuerst nur den obersten Ausschnitt. Alles Weitere musst du nach unten schieben. Genau in diesen obersten Ausschnitt setzen Gestalter oft ein einzelnes großes Bild. Dieses Bild nennt man Hero-Bild, also übersetzt etwa „Heldenbild“. Der Name sagt nichts über den Inhalt, sondern nur über die Rolle: Es ist der Star des Auftritts und meist breiter und höher als jedes andere Bild der Seite. Häufig liegt eine kurze Überschrift darüber und ein Knopf, der zum nächsten Schritt führt.

Die ersten Sekunden entscheiden

Menschen urteilen über eine Webseite extrem schnell. Studien sprechen von Bruchteilen einer Sekunde für den ersten Eindruck. In dieser Zeit liest niemand einen Absatz. Ein Bild dagegen wird sofort erfasst. Deshalb trägt das Hero-Bild einen großen Teil der Botschaft: Ist das eine Bank oder ein Musikfestival? Wirkt das seriös oder billig?

Für Unternehmen hängt daran echtes Geld. Wer eine Software verkauft, zeigt oben gern das Programm selbst in Aktion. Wer Reisen verkauft, zeigt einen Strand. Firmen testen solche Bilder systematisch gegeneinander: Zwei Gruppen von Besuchern sehen unterschiedliche Varianten, danach vergleicht man, welche Gruppe mehr gekauft hat. Dieses Verfahren heißt A/B-Test. Unterschiede von wenigen Prozent bei den Verkäufen gelten dabei schon als Erfolg.

Es gibt aber auch Kritik. Ein riesiges Bild drückt alle Informationen nach unten aus dem Blickfeld. Manche Nutzer scrollen darüber hinweg, ohne es überhaupt anzusehen, weil sie es für Werbung halten. Ein Hero-Bild ist also kein Selbstläufer, sondern eine Entscheidung mit Vor- und Nachteilen.

Wie so ein Bild technisch ausgeliefert wird

Ein Hero-Bild muss auf einem großen Monitor scharf sein und auf einem Handy trotzdem schnell laden. Beides gleichzeitig ist schwierig. Deshalb hinterlegen Entwickler dieselbe Aufnahme in mehreren Größen. Der Browser, also das Programm, mit dem du im Internet surfst, wählt dann die passende Version für den jeweiligen Bildschirm aus.

Wichtig ist außerdem die Dateigröße. Ein unbearbeitetes Foto kann mehrere Megabyte haben und über Mobilfunk Sekunden brauchen. Moderne Bildformate wie WebP oder AVIF speichern dasselbe Motiv deutlich sparsamer, oft mit der Hälfte der Daten oder weniger. Zusätzlich sagen Entwickler dem Browser ausdrücklich, dass er dieses eine Bild bevorzugt und zuerst laden soll. Andere Bilder weiter unten dürfen warten, bis man dorthin scrollt.

Ein typischer Fehler ist der Sprung im Layout. Wenn der Platz für das Bild nicht vorab reserviert ist, rutscht der Text nach unten, sobald das Bild eintrifft. Google misst genau das und wertet Seiten mit solchen Sprüngen schlechter. Deshalb legt man Breite und Höhe von Anfang an fest. Ein weiterer Punkt ist der Alternativtext: eine kurze Beschreibung des Motivs, die blinde Nutzer sich vorlesen lassen können.

Vom Online-Shop bis zur KI-Bildgenerierung

Hero-Bilder begegnen dir praktisch überall. Die Startseite eines Sneaker-Shops zeigt oben ein Modell in Großaufnahme. Nachrichtenseiten setzen über den Haupttext ein breites Foto. Auch die Ankündigungsseiten großer Technikfirmen für ein neues Handy folgen diesem Muster. Wenn in einem Artikel über Webdesign vom „Above the Fold“-Bereich die Rede ist, ist genau dieser obere Ausschnitt gemeint.

In den letzten Jahren hat sich die Herkunft solcher Bilder verändert. Früher kaufte man Fotos in Bilddatenbanken oder buchte einen Fotografen. Heute erzeugen viele Redaktionen und Marketingteams ihre Hero-Bilder mit Bildgeneratoren, also KI-Programmen, die aus einer Textbeschreibung ein neues Bild berechnen. Das ist billig und schnell, wirft aber Fragen zu Urheberrecht und Kennzeichnung auf.

Verwechseln solltest du das Hero-Bild nicht mit dem Vorschaubild, das erscheint, wenn jemand einen Link in einem Chat teilt. Dieses Vorschaubild wird gesondert festgelegt und ist oft ein anderes Motiv. Beide dienen dem ersten Eindruck, sitzen aber an verschiedenen Stellen: eines auf der Seite selbst, das andere außerhalb davon.