Ein Einkäufer aus der Fertigung landet auf Ihrer Website und sieht als Hero-Bild ein schickes SaaS-Dashboard. Ein Fintech-Interessent kommt und sieht dasselbe Bild. Keiner von beiden hat das Gefühl, dass die Seite für ihn gemacht ist, und beide gehen innerhalb von Sekunden. Das Problem ist nicht, dass Bilder auf der Landingpage fehlen. Das Problem ist, dass allen dieselben Bilder gezeigt werden, egal wer sie sind oder was sie brauchen.
Landingpage-Bilder werden einmal ausgewählt, meist von der Person, die die Seite gestaltet hat, und dann jedem Besucher gezeigt. Auf einer B2B-Website mit mehreren Branchen und Käuferrollen bedeutet das, dass die meisten Besucher ein Bild aus der Welt von jemand anderem sehen. Das Hauptbild an Branche, Rolle oder Phase des Besuchers anzupassen, ist eine der günstigeren Formen der Personalisierung, weil es keinen neuen Text braucht, aber es hilft nur, wenn das Bild etwas Konkretes aussagt. Dieser Beitrag zeigt, wofür jeder Bildtyp gedacht ist, wann sich Video lohnt, wie Sie Bilder Segmenten zuordnen und welche Details zu Performance und Barrierefreiheit darüber entscheiden, ob das alles funktioniert.
Warum generische Landingpage-Bilder im B2B scheitern
Bilder sind meist das Erste, worauf der Blick eines Besuchers fällt. Sie prägen also den ersten Eindruck, bevor die Überschrift gelesen wird. Ein generisches Bild schadet für sich genommen nicht viel; der Preis ist die verpasste Chance, dem Besucher etwas zu zeigen, das er wiedererkennt.
Für B2B-Unternehmen mit mehreren Buyer Personas ist ein einziges Bilder-Set ein struktureller Nachteil. Ein VP of Engineering, der Ihre Plattform prüft, hat andere visuelle Erwartungen als ein CMO, der dasselbe tut. Der eine will technische Architektur, Integrationen oder Datenflüsse sehen. Der andere spricht auf Dashboards, Kampagnenkennzahlen oder ROI-Diagramme an. Sehen beide dasselbe generische Bürofoto, erhält keiner das Relevanzsignal, das ihn weiterscrollen lässt. Dasselbe gilt für die Anzeige, die sie hergebracht hat; unser Leitfaden dazu, wann sich responsive Displayanzeigen lohnen, zeigt, wie Sie Display-Creatives mit der Seite stimmig halten.
Stockfotos von Menschen, die sich in einem Glasbüro die Hände schütteln, sind die üblichen Übeltäter. Sie sind leicht als Stock zu erkennen, bringen also nichts, und sie belegen den Platz, an dem ein Produkt-Screenshot, ein echter Kunde oder ein Diagramm des Workflows hätte stehen können. Wenn Sie bei den Visuals einer Landingpage eine Sache testen, dann ein echtes Bild (Ihr Produkt, Ihre Kunden, Ihr Team) gegen das Stockfoto.
Visuals auf Besuchersegmente abstimmen
Die Idee hinter personalisierten Bildern ist, die Zeit zwischen Ankunft und „Das ist für mich“ zu verkürzen. Praktisch gelingt das, indem Sie Bildvarianten Segmenten zuordnen, die Sie bereits erfassen. Wenn Sie per Besuchererkennung Branche, Größe oder Region eines Unternehmens ermitteln, können dieselben Daten steuern, welche Bilder auf der Seite erscheinen.
Möglichkeiten, Segmenten Bilder zuzuordnen:
Branchenbezogene Bilder. Zeigen Sie Besuchern aus der Fertigung eine Werkshalle, Finanzdienstleistern einen Handelsraum und dem Gesundheitswesen einen Klinikablauf. Das verkaufte Produkt ist dasselbe, aber der visuelle Kontext passt sich dem Arbeitsalltag des Besuchers an.
Rollenbasierte Visuals. Technische Käufer sprechen auf Architekturdiagramme, Code-Snippets und Integrationsabläufe an. Business-Käufer auf Dashboards, Diagramme und Ergebniskennzahlen. Wenn die Bildsprache zur Expertise des Käufers passt, signalisiert das, dass Sie seine Perspektive verstehen.
Bilder nach Phase. Erstbesuchern helfen übergeordnete Illustrationen des Nutzens, die zeigen, was Sie tun. Wiederkehrende Besucher, die bereits Produktinhalte gelesen haben, reagieren besser auf detaillierte Screenshots, Vergleichstabellen oder Kundenbelege.
Unternehmensgröße. Enterprise-Besucher sprechen eher auf Bilder an, die Größe, Sicherheitszertifizierungen oder teamübergreifende Workflows zeigen. Kleinere Unternehmen fühlen sich von Bildern angesprochen, die Geschwindigkeit, Einfachheit und schnelle Erfolge zeigen.
Bildtypen und wann welcher am besten funktioniert
Verschiedene visuelle Elemente erfüllen auf einer Landingpage unterschiedliche Funktionen. Wer diese Unterschiede versteht, entscheidet bewusst, was personalisiert wird und was statisch bleibt.
Hero-Bilder prägen den ersten Eindruck und rahmen das gesamte Wertversprechen. Sie belegen den wertvollsten Platz auf der Seite. Ein Hero, der das Produkt im Einsatz zeigt, idealerweise mit Daten oder in einem Umfeld, das der Besucher wiedererkennt, sagt mehr als eine abstrakte Grafik. Auf personalisierten Seiten ist der Hero das naheliegende erste Element für Varianten, weil ihn jeder sieht, der auf der Seite landet.
Produkt-Screenshots liefern einen konkreten Beleg dafür, was Sie verkaufen, können Seiten aber überladen wirken lassen, wenn man sie unbedacht einsetzt. Ein einzelner kommentierter Screenshot, der die für den Anwendungsfall des Besuchers relevantesten Funktionen hervorhebt, funktioniert besser als mehrere unkommentierte. Wenn Ihre Segmentierungs-Daten zeigen, dass sich ein Besucher für Analytics interessiert, zeigen Sie das Analytics-Dashboard. Interessiert er sich für Integrationen, zeigen Sie das Integrationspanel.
Illustrationen und individuelle Grafiken eignen sich hervorragend, um Komplexität zu vereinfachen. Wenn Sie einen abstrakten Workflow oder einen mehrstufigen Prozess erklären müssen, vermitteln individuelle Illustrationen in Sekunden, wofür Text ganze Absätze bräuchte. Besonders nützlich sind sie auf personalisierten Seiten, auf denen sich die Erklärung nach dem technischen Kenntnisstand des Besuchers richten muss. Halten Sie im Briefing für Landingpage-Texte fest, welches Visual jeder Abschnitt braucht, damit Design und Text gemeinsam geplant werden.
Social-Proof-Bilder umfassen Kundenlogos, Teamfotos und Fallstudien-Vorschaubilder. Sie lassen sich personalisieren, indem Sie Logos aus der Branche oder Größenklasse des Besuchers zeigen. Ein SaaS-Unternehmen aus dem Mittelstand, das Logos anderer SaaS-Mittelständler sieht, fühlt sich eher bestätigt als bei Fortune-500-Logos, mit denen es sich nicht identifizieren kann. Unsere B2B-Landingpage-Beispiele zeigen, mit welchem Beleg jeder Seitentyp starten sollte.
Hintergrundbilder schaffen Atmosphäre, ohne Aufmerksamkeit zu beanspruchen. Dezente Verläufe oder geometrische Muster schneiden oft besser ab als fotografische Hintergründe, weil sie Tiefe verleihen, ohne abzulenken. Sie müssen selten personalisiert werden, da ihre Aufgabe darin besteht zu unterstützen, nicht Relevanz zu signalisieren.
Video auf der Landingpage: Wann es sich seinen Platz verdient
Video ist das schwerste visuelle Element, das Sie hinzufügen können, beim Seitengewicht und bei der Aufmerksamkeit, die es fordert. Unsere Sicht: Ein Video auf einer Landingpage sollte eine Frage beantworten, die der Besucher anhand eines Screenshots nicht beantworten kann, meist „Wie sieht es aus, wenn jemand das tatsächlich nutzt?“ Wiederholt das Video nur die Headline mit Musik im Hintergrund, erledigt ein gut gewählter Screenshot denselben Job schneller. Zu Video jenseits von Landingpages siehe unseren Leitfaden zum B2B-Videomarketing.
Wo sich Video auf B2B-Seiten meist auszahlt:
- Produkt-Walkthroughs auf Demo- und Registrierungsseiten. Sechzig bis neunzig Sekunden, die den Kern-Workflow zeigen, ermöglichen es einem Besucher, sich selbst zu qualifizieren, bevor er ein Gespräch bucht. Bewegen Sie den Cursor langsam und halten Sie die Oberfläche in der Abspielgröße lesbar.
- Kundengeschichten auf Seiten der späten Phase. Ein Kunde, der das Problem in eigenen Worten schildert, ist ein Nachweis, den kein Logo liefern kann. Platzieren Sie ihn neben der Aussage, die er belegt, nicht in einer separaten Videogalerie.
- Webinar- und Event-Seiten. Ein 30-sekündiger Clip des Sprechers zeigt, dass sich die Session lohnt. Nach dem Event ersetzt die Aufzeichnung den Clip.
Und wo es meist nicht funktioniert: als automatisch abgespielte Hintergrundschleife hinter der Headline (sie konkurriert mit dem Text und kostet Ladezeit) und als einziger Weg zu wichtigen Informationen (viele B2B-Besucher surfen bei der Arbeit ohne Ton).
Video einbinden, ohne die Seite zu verlangsamen
- Verwenden Sie ein Vorschaubild und laden Sie den Player erst bei Klick. Ein vollständiges YouTube- oder Vimeo-Embed lädt seine Skripte, bevor jemand auf Play drückt. Die Lighthouse-Dokumentation von Google empfiehlt, Embeds von Drittanbietern hinter einer Fassade per Lazy Loading zu laden, also einer statischen Vorschau, die bei Interaktion durch den echten Player ersetzt wird.
- Embeds unterhalb des sichtbaren Bereichs per Lazy Loading laden. Mit
loading="lazy"an iframes werden Player außerhalb des Bildschirms verzögert geladen, wie im Leitfaden von web.dev zum Lazy Loading von iframes beschrieben. - Untertiteln Sie alles. Untertitel helfen Zuschauern ohne Ton und sind bei aufgezeichneten Videos mit Audio eine Anforderung der Barrierefreiheit.
- Halten Sie den CTA auch ohne das Video sichtbar. Das Formular oder der Button sollte nie davon abhängen, dass jemand bis zum Ende zuschaut.
Messen, ob das Video hilft
Die erweiterte Analyse in GA4 erfasst die Events video_start, video_progress und video_complete für eingebettete YouTube-Videos mit aktivierter JS-API-Unterstützung. Zwei Zahlen sind wichtiger als Aufrufe: die Wiedergaberate (Wiedergaben geteilt durch Seitenbesucher) und die Conversion-Rate der Besucher, die das Video abgespielt haben, im Vergleich zu denen, die es nicht getan haben. Vorsicht bei der zweiten: Wer auf Play drückt, ist bereits engagierter, eine höhere Conversion-Rate unter Zuschauern beweist also nicht, dass das Video sie verursacht hat. Der faire Test ist ein A/B-Test der Seite mit und ohne Video, bewertet nach Conversions, nicht nach Wiedergabezeit.
Auch Videos lassen sich gut personalisieren. Ein Besucher aus der Fertigung und einer aus der Softwarebranche können dieselbe Produktführung sehen, aufgenommen mit zwei verschiedenen Demo-Datensätzen; das ist günstiger, als es klingt, sobald das Skript steht.
Visuelle Hierarchie auf personalisierten Seiten
Bilder bestimmen, wie sich Besucher durch eine Seite bewegen. Auf textlastigen Seiten scannen Menschen meist oben quer und dann an der linken Seite nach unten (das F-Muster); auf spärlich gefüllten Seiten springt das Auge oft im Zickzack von oben links nach oben rechts und nach unten. Platzieren Sie Bilder mit diesen Pfaden im Hinterkopf.
Platzieren Sie Ihr personalisiertes Hero-Bild oben im F, wo der Blick zuerst landet. Unterstützende Visuals gehören entlang des vertikalen Scanpfads. Nutzen Sie Richtungshinweise im Bild, etwa den Blick einer Person oder einen Pfeil in einem Diagramm, lassen Sie sie auf Ihren Call-to-Action zeigen statt davon weg.
Größe schafft Hierarchie. Größere Bilder signalisieren Bedeutung. Wenn sich ein Besucher eines Zielaccounts auf ein bestimmtes Ergebnis oder eine bestimmte Fähigkeit konzentrieren soll, machen Sie dieses Bild zum dominierenden Element der Seite. Sekundäre Bilder wie Kundenlogos oder ergänzende Screenshots sollten kleiner bleiben, damit sie unterstützen, ohne zu konkurrieren.
Geben Sie dem Hauptbild Raum. Ein klares, zum Segment passendes Bild mit Weißraum wird schneller erfasst als drei gedrängte, die um Aufmerksamkeit konkurrieren, und es ist eine Variante zu pflegen statt drei.
Ein Schritt-für-Schritt-Workflow zur Personalisierung von Landingpage-Bildern
Für Bildpersonalisierung müssen Sie nicht Ihre gesamte Website neu aufbauen. Hier ist ein praxisnaher Workflow, der klein beginnt und mitwächst.
Schritt 1: Wählen Sie Ihre größten qualifizierten Segmente. Ziehen Sie Daten aus Ihrem Analytics- oder Besucheridentifizierungs-Tool. Welche Branchen, Unternehmensgrößen oder Rollen machen den Großteil Ihres qualifizierten Traffics aus? Beginnen Sie mit Segmenten, die groß genug zum Messen und unterschiedlich genug sind, dass verschiedene Bilder wirklich sinnvoll wären.
Schritt 2: Prüfen Sie die aktuellen Bilder Ihrer Landingpages. Listen Sie jedes Bild auf Ihren Landingpages mit dem meisten Traffic auf. Fragen Sie bei jedem: Spricht es alle drei Segmente gleichermaßen an? Wenn ja, ist es entweder ein starkes universelles Bild oder ein generisches, das niemanden anspricht. Markieren Sie Bilder, bei denen eine segmentspezifische Variante für mehr Relevanz sorgen könnte.
Schritt 3: Erstellen Sie 2–3 Bildvarianten pro markiertem Slot. Sie brauchen kein komplettes Redesign. Bei Hero-Bildern können das drei Versionen desselben Layouts mit unterschiedlichem Hintergrundbild, unterschiedlichen Produkt-Screenshots oder unterschiedlichen Use-Case-Illustrationen sein. Halten Sie Komposition und CTA-Platzierung konstant, damit Sie den Bildinhalt testen und nicht die Seitenstruktur.
Schritt 4: Segmentbasierte Anzeigeregeln einrichten. Ordnen Sie in Ihrer Personalisierungsplattform jede Variante ihrem Zielsegment zu. Legen Sie einen Standard für Besucher fest, die zu keinem Segment passen. Prüfen Sie per Vorschau mit Testaccounts aus jedem Segment, ob die richtigen Bilder bei den richtigen Besuchern erscheinen.
Schritt 5: Messen und iterieren. Erfassen Sie die Conversion-Rate je Segment, nicht nur insgesamt. Ein Hero-Bild, das die Conversions bei Besuchern aus der Fertigung steigert, kann bei SaaS-Besuchern schaden. Führen Sie A/B-Tests innerhalb jedes Segments durch, um die Wirkung von Bildänderungen von anderen Seitenelementen zu trennen. Legen Sie die Stichprobengröße vor Teststart fest (unser Leitfaden zur Stichprobengröße für A/B-Tests zeigt, wie), testen Sie mindestens zwei volle Wochen und brechen Sie nicht vorzeitig ab, nur weil das Dashboard gut aussieht.
Technische Performance: Geschwindigkeit vs. visuelle Qualität
Ein personalisierter Hero, der zu spät erscheint, ist schlechter als ein generischer, der pünktlich kommt. Das Hero-Bild ist oft das Largest-Contentful-Paint-Element, daher entscheiden seine Größe und Ladereihenfolge darüber, wie schnell sich die Seite anfühlt.
Nutzen Sie moderne Formate. Laut Googles Dokumentation sind verlustbehaftete WebP-Bilder 25–34 % kleiner als vergleichbare JPEGs und verlustfreie WebP-Bilder 26 % kleiner als PNGs. AVIF komprimiert oft noch stärker. Liefern Sie AVIF oder WebP mit JPEG-Fallback über das Element <picture> aus.
Statt die Größenlimits anderer zu übernehmen, legen Sie ein Budget für Ihre eigenen Seiten fest: Prüfen Sie Dateigröße und LCP des Hero-Bereichs in PageSpeed Insights mit einem mobilen Profil, und behandeln Sie jede Variante, die spürbar schwerer ist als die Standardversion, als Fehler.
Verwenden Sie responsive Bilder mit srcset-Attributen. Ein 2000px breites Bild an einen mobilen Besucher auszuliefern verschwendet Bandbreite und verzögert das Rendering. Lassen Sie Browser anhand der Viewport-Breite das passende Bild wählen. Für personalisierte Seiten heißt das, dass jede Bildvariante eigene responsive Größen braucht, was sich aber mit Build-Tools automatisieren lässt.
Laden Sie den Hero nicht per Lazy Loading. Er liegt above the fold, Lazy Loading würde ihn also verzögern; kennzeichnen Sie ihn stattdessen mit fetchpriority="high" und laden Sie nur Bilder weiter unten per Lazy Loading. Bei Segmentvarianten wird die Variante am saubersten auf dem Server oder am Edge bestimmt, sodass das richtige Bild von Anfang an im HTML steht. Erfolgt der Austausch clientseitig, reservieren Sie die Bildmaße, damit das Layout beim Laden nicht springt.
Barrierefreiheit für alle Bildvarianten
Jede personalisierte Bildvariante braucht ihren eigenen Alt-Text. Ein Hero-Bild, das einen Fertigungsablauf zeigt, sollte einen Alt-Text haben, der diese Szene beschreibt, keinen generischen Alt-Text, der zu jeder Variante passen könnte. Screenreader geben wieder, was auf der Seite steht, und der Alt-Text sollte dem entsprechen, was sehende Besucher in diesem Segment tatsächlich sehen.
Guter Alt-Text beschreibt den Bildinhalt knapp und setzt ihn in Bezug zum umgebenden Kontext. Bleiben Sie unter 100 Zeichen. Dekorative Bilder (Hintergründe, Abstandhalter) sollten leere Alt-Attribute haben, damit Screenreader sie überspringen. Funktionale Bilder wie verlinkte Grafiken brauchen einen Alt-Text, der das Linkziel beschreibt.
Wenn Bilder nicht geladen werden, wird der Alt-Text sichtbar angezeigt. Er dient also auch sehenden Besuchern mit langsamer Verbindung als Fallback. Wenn Sie personalisierte Bildvarianten haben, ist das ein weiterer Grund, warum jede Variante einen eigenen, beschreibenden Alt-Text braucht statt eines gemeinsamen Platzhalters.
Häufige Fehler bei personalisierten Bildern
Teams, die neu in der Bildpersonalisierung sind, personalisieren oft zu viel. Jedes Bild auf der Seite je nach Besuchersegment auszutauschen, erzeugt Pflegeaufwand und verwässert die Wirkung der Änderungen, die wirklich zählen. Konzentrieren Sie die Personalisierung auf die ein oder zwei wirkungsvollsten Bildflächen (meist den Hero und den wichtigsten Social-Proof-Abschnitt) und halten Sie den Rest einheitlich.
Ein weiterer häufiger Fehler ist, aus Segmentdaten Annahmen abzuleiten, die sich übergriffig anfühlen. Einem Besucher sein Firmenlogo zu zeigen, bevor er sich zu erkennen gegeben hat, überschreitet eine Grenze. Bilder zu zeigen, die zu seiner Branche passen, ist hilfreich. Sein Bürogebäude zu zeigen, ist verstörend. Der Unterschied liegt zwischen kontextueller Relevanz und Überwachung.
Zu viele Varianten auf einmal zu testen, ist eine dritte Falle. Vier Segmente mal drei Bild-Slots mit jeweils ein paar Varianten ergeben schon Dutzende Kombinationen, weit mehr, als B2B-Traffic testen kann. Testen Sie innerhalb jedes Segments eine Variable nach der anderen, warten Sie auf statistische Signifikanz und gewinnen Sie Sicherheit bei jeder Änderung, bevor Sie weitere hinzufügen.
Für Teams, die einen umfassenderen Plan zur Optimierung von B2B-Landingpages umsetzen, ist Bildpersonalisierung ein sinnvoller früher Schritt, weil sie weniger neue Inhalte erfordert als Textpersonalisierung. Der Haken: Sie setzt echte, segmentspezifische Bilder voraus. Wenn Sie nur ein anderes Stockfoto pro Branche liefern können, investieren Sie die Zeit lieber in die Texte.
Wo Sie anfangen
Nehmen Sie Ihre Landingpage mit dem meisten Traffic und betrachten Sie das Hero-Bild mit einer Frage: Würde ein Besucher aus Ihrem größten Segment darin seine eigene Arbeit wiedererkennen? Wenn nicht, ersetzen Sie es durch einen Produkt-Screenshot oder ein Kundenbild, bei dem das der Fall wäre, und testen Sie es gegen das aktuelle. Erst wenn ein echtes Bild das Stockfoto schlägt, lohnt es sich, Varianten pro Segment zu produzieren. Markettailor verknüpft Daten aus der Besuchererkennung mit Inhalten auf der Seite, auch mit Bildern, wenn Sie diese Varianten ausspielen wollen, ohne die Regeln selbst zu bauen.
