Das Hero Image ist das große Bild im oberen Bereich einer Seite. Es gehört zur Hero Section und ist dort meist das größte sichtbare Element, weshalb es die Ladezeit der Seite stärker prägt als jedes andere Bild.
- Hero Image
Großes Bild im oberen Bereich einer Seite, das den Einstieg gestaltet.
Beispiel: „Das Hero Image zeigt das Team vor dem Büro.“Auch: Hero-Bild. Der Begriff stammt aus dem Zeitungslayout, wo das große Aufmacherbild über dem Falz den Blick auf die Seite zieht.
Abgrenzung zur Hero Section: Die Hero Section ist der ganze Bereich mit Überschrift, Text und Schaltfläche. Das Hero Image ist nur das Bild darin.
Was ein gutes Hero Image zeigt
Es zeigt, worum es geht, und ersetzt damit einen Absatz Text. Ein Foto der eigenen Leute, des Produkts oder einer Arbeitssituation leistet das. Ein gekauftes Bild mit lächelnden Fremden vor einem Konferenztisch leistet es nicht, weil es auf hundert anderen Websites ebenso steht.
Aus unserer Arbeit an über 2.500 Website-Projekten ist der Austausch von Katalogbildern gegen eigene Aufnahmen die Änderung, die Besucher am deutlichsten bemerken. Sie kostet einen Fototermin und wirkt auf jeder Seite, auf der die Bilder liegen.
Das Bild bestimmt die Ladezeit
Das Hero Image ist fast immer das Element, an dem der Largest Contentful Paint gemessen wird. Es wird deshalb nie verzögert geladen, sondern mit hoher Priorität angefordert, in mehreren Größen über srcset ausgeliefert und mit Breite und Höhe im Markup versehen.
Zur Größe: Ein Bild, das auf einem 4K-Bildschirm scharf sein soll, ist für ein Telefon viel zu schwer. Ohne srcset lädt das Telefon dieselbe Datei und zahlt dafür mit Wartezeit im Mobilfunknetz.
Wann es besser weggelassen wird
Wenn kein passendes Bild vorhanden ist. Eine Hero Section aus Überschrift, Text und Schaltfläche auf ruhigem Grund wirkt besser als ein beliebiges Foto, das nur den Platz füllt. Dasselbe gilt für Seiten mit Informationszweck, etwa eine Preisübersicht, bei der das Bild den Blick von der Tabelle wegzieht.