Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Hero-Image

Definition: Ein Hero-Image (auch: Hero-Bild, Hero-Visual) ist ein großes bildschirmdominierendes Bild oder visuelles Element im obersten sichtbaren Bereich einer Website (Above the Fold) das als erstes visuelles Element den Erstimpression prägt und die zentrale Botschaft einer Seite, Kampagne oder Marke kommuniziert. Hero-Image-Layouts: Fullscreen-Hero (Bild füllt gesamten Viewport; Text als Overlay; typisch für Landingpages und Marken-Websites); Split-Hero (Bild rechts; Text links oder umgekehrt; häufig bei Produktseiten und SaaS-Websites); Product-Shot-Hero (Produktfreisteller prominent; E-Commerce-Produktseiten); Illustration-Hero (Grafik statt Foto; häufig bei SaaS, Tech-Startups; Brand-Character-Kommunikation); Video-Hero (Hintergrundvideo statt Standbild; Motion als emotionales Mittel; Performance-kritisch). Performance-Kritikalität: Das Hero-Image ist in den meisten Fällen das LCP-Element (Largest Contentful Paint) einer Seite – Google's Core-Web-Vitals-Metrik für Ladezeit des größten sichtbaren Inhalts; LCP-Zielwert: unter 2,5 Sekunden (Google-Ranking-Faktor seit Mai 2021); schlechte LCP-Werte durch unoptimierte Hero-Images beeinflussen direkt organisches Ranking und Nutzer-Absprungrate. Accessibility: Hero-Images benötigen Alt-Text wenn inhaltlich relevant; dekorative Hero-Bilder (reine Stimmungsbilder ohne Informationsgehalt): alt=""; Text auf Hero-Bild muss WCAG-Kontrastverhältnis ≥ 4,5:1 erfüllen; hero-Hintergrundbilder per CSS (background-image) erhalten keinen Alt-Text → informationelle Inhalte nie als CSS-Background.

Erläuterung

Das Hero-Image als prominentes Gestaltungselement von Websites wurde durch das Aufkommen von Fullscreen-Fotografie in Web-Design-Trends der frühen 2010er Jahre (popularisiert durch Apple.com's Produkt-Fotografie und durch Premium-Wordpress-Themes auf ThemeForest ab 2012) zum Standard-Element moderner Web-Gestaltung. Jakob Nielsen und Kara Pernice (Nielsen Norman Group) dokumentierten in ihrer Eye-Tracking-Studie «Eyetracking Web Usability» (New Riders Press, 2010) dass Banner-Blindness – die automatische visuelle Ignorierung von Bildelementen die werblich aussehen – auch für Hero-Images gilt wenn diese als generische Stockfotos erkennbar sind; authentische Bilder von echten Produkten oder Personen erhalten deutlich mehr Fixationen und längere Betrachtungszeiten. Peep Laja (CXL; 2011–) quantifizierte den Conversion-Einfluss von Hero-Image-Motiven in mehreren dokumentierten A/B-Tests: Menschen im Bild erzeugen mehr emotionale Resonanz; direkte Blickkontakt-Bilder haben höhere Aufmerksamkeitsbindung; Person blickt in Richtung des CTA-Buttons = Nutzerauge folgt der Blickrichtung (Persuasive Technology Forschung; B.J. Fogg, Stanford; 2003). Google Core Web Vitals (eingeführt als Ranking-Signal Mai 2021; basierend auf CrUX Chrome User Experience Report) etablierten LCP als Performance-Benchmark: laut Google's Analyse von Millionen echter Nutzer-Sessions (Googl's own CrUX data, 2023) sind Hero-Images oder Hero-Videos in 79% aller Seiten das LCP-Element; ein 500 KB-komprimiertes WebP-Hero-Bild lädt bei schnellem Mobilnetz (4G) in ~200ms; unkomprimiertes JPEG bei 3 MB: ~1.200ms – ein Unterschied der direkt LCP-Bewertung und Seitenranking beeinflusst. Dmitri Lau und das Google PageSpeed-Team dokumentierten in technischen Empfehlungen (web.dev) die Preload-Strategie für LCP-Bilder: <link rel="preload" href="hero.webp" as="image" fetchpriority="high"> im <head> – damit beginnt der Browser mit dem Hero-Bild-Download bevor das Rendering-Blocking-CSS geladen ist, was LCP typisch um 30–60% verbessert. Neil Patel (CRO-Berater; San Jose; co-Gründer Crazy Egg, Hello Bar, NP Digital) dokumentierte in Case Studies dass Hero-CTA-Platzierung direkt über dem Hero-Image im Split-Layout höhere CTR erzielt als CTAs innerhalb oder unterhalb des Bildes; die physische Nähe von Value Proposition Headline und CTA-Button in der Hero-Sektion ist ein konsistenter CVR-Faktor.

Technische Optimierung: LCP, Preload und Responsive Images

Gestaltung, Conversion und Text auf Hero-Bildern

Praxistipp: Messen Sie Ihren LCP-Wert in Google PageSpeed Insights und prüfen Sie ob das Hero-Image als LCP-Element identifiziert wird (es ist bei den meisten Websites der Fall). Falls ja: Konvertieren Sie das Bild zu WebP, fügen Sie <link rel="preload" href="hero.webp" as="image" fetchpriority="high"> als erste <link>-Zeile im <head> ein, und stellen Sie sicher dass das Bild width und height-Attribute hat um Layout-Shift (CLS) zu vermeiden. Diese drei Maßnahmen verbessern typisch den LCP um 40–60% ohne das Bild selbst zu ändern – und damit direkt Ihren Core Web Vitals Score und organisches Google-Ranking.