Wie Sie ein wirkungsstarkes Hero-Bild für Ihre Website erstellen

Das Erste, was jemand sieht, wenn er deine Website besucht, ist ein Hero Image.

Menschen werden durch die Gefühle beeinflusst, die Bilder bei ihnen auslösen. Tatsächlich hast du wahrscheinlich bemerkt, dass deine Lieblings-Websites und Marken Bilder einsetzen, um ihre Nutzer zu fesseln und zu motivieren. Schließlich ist ein Bild tausend Worte wert… oder? Also könnte das richtige Hero Image Millionen von Dollar wert sein!

Das gilt besonders für moderne Unternehmen, die solche Bilder nutzen, um potenzielle Interessenten in Kunden zu verwandeln. Aber wie kann das sein?

Ein Bild, egal ob ein Einzelbild oder eine Reihe von Hero Images, hilft dir dabei, deine Botschaft und das gesamte Markenkonzept zu vermitteln. Aber warum ist es wichtig, deine Botschaft über ein Bild zu transportieren? Nun, es beeinflusst einfach, wie jemand deine Marke wahrnimmt. Es kann bei den Betrachtern Gefühle wie Aufregung, Vertrauen, Wut, Freude usw. hervorrufen.

Deshalb sprechen wir jetzt über Hero Images. Wir schauen uns einige Fakten zu Hero Images an, die du wissen solltest, behandeln wissenswerte Punkte zur Conversion durch Bilder und sehen uns sogar ein paar Beispiele an. Tauchen wir ein und finden heraus, wie du Nutzer mit nur einem Bild überzeugen kannst.

Bevor wir zu sehr ins Eingemachte gehen, kommen wir zurück zu den Grundlagen und erklären, was ein Hero-Image wirklich ist.

Kurz gesagt: Ein Hero-Image ist das große Foto oder die Grafik, die viele Websites ganz oben verwenden. Formeller: Es ist ein großes Werbebild, das im oberen Bereich der Website platziert wird und dazu dient, Aufmerksamkeit zu erregen.

Die gute Nachricht ist, dass sie sich ziemlich leicht in Ihr Website-Design integrieren lassen. Sie können ein wenig HTML oder CSS zu Ihrer Webseite hinzufügen, um ein responsives Bild zu erstellen. Sie können auch ein Hero-Image mit Bootstrap ausprobieren, indem Sie eine große Box, einen Seitenheader oder ein Jumbotron erstellen, das speziellen Inhalt anzeigt.

Oft enthalten diese Hero-Images Text, CTAs oder bestehen aus einer Reihe von Bildern. Diese Zusätze bereiten jedoch häufig Probleme für responsives Webdesign. Zum Glück gibt es Möglichkeiten, dies zu umgehen, sodass die Erstellung eines responsiven Hero-Images für Unternehmen jeder Größe möglich ist.

Ein responsives Bild ist ein Bild, das auf verschiedenen Bildschirmen und Plattformen angemessen dargestellt werden kann. Das kann bedeuten, dass für verschiedene Geräte Bilder in unterschiedlichen Größen bereitgestellt werden oder dass Text und Overlays so angepasst werden, dass sie in jedem Anwendungsfall korrekt formatiert sind.

Ein responsives Hero-Image ist einfach das Hauptbild einer Website, das optimiert wurde, um sich an unterschiedliche Darstellungsbedingungen anzupassen.

Jetzt, da du weißt, was ein Hero-Image ist, lass uns über einige Best Practices und Anforderungen für Hero-Images sprechen. Auch wenn es relativ einfach erscheint, muss ein Hero-Image so gestaltet sein, dass es dir nützt, statt potenzielle Kunden zu verärgern oder zu verwirren.

Betrachte es wie eine Landingpage … sie ist dazu da, eine Aufgabe zu erfüllen: deine Botschaft zu vermitteln und neue Leads anzuziehen. Das kann auch zu deiner Markenbekanntheit beitragen und könnte potenziell das sein, worüber die Leute sprechen, wenn sie deine Marke erwähnen.

Also, hier ein paar Tipps, die du beim Einrichten deines Hero-Images beachten solltest:

Menschen reagieren deutlich stärker auf Dinge und erinnern sich besser an sie, wenn Emotionen im Spiel sind. Das heißt nicht, dass du übertrieben sein musst. Wenn du aber subtil etwas einbaust, das bei den Leuten ein gutes Gefühl auslöst oder sie stark für etwas einnimmt, wird dein Hero-Bild Wirkung zeigen.

Dein Hero-Bild kann die Emotion oder Stimmung verstärken, die du darstellen möchtest.

Pampers, eine beliebte Windelmarke, nutzt den berühmten Sänger John Legend und fängt einen echten Elternmoment ein (das Gesicht, das man macht, wenn man eine schmutzige Windel wechselt). Das schafft mehr Vertrauen in die Marke. Zu wissen, dass jemand Berühmtes Pampers wählt und Windeln wechselt, macht die Marke ansprechender.

Außerdem ist der eingefangene Moment deutlich spürbar, sodass sich die meisten Eltern leicht damit verbunden fühlen.

Weißt du, was verwirrend ist? Auf einer Website zu landen und dort ein Bild zu sehen, das nichts mit dem zu tun hat, was dort verkauft wird. Das lässt einen doch irgendwie daran zweifeln, ob man die richtige Webadresse eingegeben hat, oder?

Dein Hero-Bild muss mit dem, was du tust, zusammenhängen. Wenn du zum Beispiel Gourmet-Hundesnacks verkaufst, musst du nicht unbedingt deine Snacks zeigen, aber du solltest etwas zeigen, das mit Hunden zu tun hat. Das könnte ein Hund sein, der am Strand springt, einer, der aus einer großen Futterschüssel schlingt, oder sogar einfach nur ein sitzender Hund. Dein Bild muss zu deinem Geschäft passen. Punkt.

Barkbox zeigt ihren Lieblingskundentyp zusammen mit ihrem Produkt. Außerdem machen kräftige Farben das Ganze ziemlich spannend.

Warst du schon einmal auf einer Website, die verpixelte Bilder verwendet? Wie hat sich das für dich angefühlt? Die meisten Menschen verlieren das Vertrauen in die Qualität eines Produkts oder einer Dienstleistung, die sie erhalten könnten, wenn das Erste, was sie als potenzielle Kunden sehen, eine Website von schlechter Qualität ist, zum Beispiel ein großformatiges Hero-Bild, das einfach hingeklatscht wurde.

Wenn du hochwertige Fotos verwendest, also solche mit Auflösungen, die den genutzten Geräten standhalten, kannst du dafür sorgen, dass der erste Eindruck positiv ausfällt.

Stell dir vor, du landest auf einer Website, die Strandzubehör verkauft. Wenn ein Bild gestreckt wird, damit es passt, wirkt es verschwommen und pixelig. Wenn hingegen ein entsprechend großes Bild verwendet wird, wie das auf der rechten Seite, sieht es viel besser aus.

Wenn du eine Call-to-Action verwenden willst, muss sie hervorstechen. Gleichzeitig darf sie nicht die ganze Show stehlen. Finde also ein Gleichgewicht zwischen beiden, das funktioniert.

Einige Dinge, die du beachten solltest, sind Farbe und Platzierung. Du willst nicht, dass die Farbe im umgebenden Bild untergeht. Du solltest den CTA-Button auch nicht in die Nähe anderer Buttons (z. B. Menüpunkte oder Dropdowns) platzieren.

Du kannst einen schnellen Test machen, indem du das Bild weichzeichnest, um zu sehen, ob der Button deutlich genug auffällt. Wenn dein Blick den Button findet, hast du es richtig gemacht!

Nimm das Referral-Landing von Sock Fancy als Hero-Bild. Das Bild hat kräftige Farben, der CTA ist weit genug von der Menüleiste platziert und ein schwarzer Button sorgt dafür, dass er sich vom Rest des Bildes abhebt.

Wenn wir den Weichzeichner-Test anwenden, hebt sich das Bild hervor und dein Blick wird darauf gelenkt. Am stärksten nimmst du das Bild und den Button wahr, ohne dass der Button zu dominant wirkt.

Sie können für Ihr Hero-Bild im Grunde genommen alles verwenden, was Sie möchten. Wenn Sie jedoch Menschen einsetzen, kann sich ein Kunde visuell in derselben Situation wiedererkennen.

Wenn Sie eine Person zeigen, kann sich ein Nutzer möglicherweise verbunden fühlen und sich so besser mit Ihrer Marke identifizieren. Vermeiden Sie, zu generisch zu wirken. Ein übermäßig inszeniertes Foto erzielt nicht die gleiche Wirkung. Verwenden Sie stattdessen Fotos von Personen oder Kunden, die tatsächlich zu Ihrer Zielgruppe passen. 

Seiten wie Pikwizard bieten eine großartige Auswahl an Stockbildern, die inszenierte Motive vermeiden und stattdessen Bilder zeigen, mit denen sich Menschen identifizieren können.

Acer entschied sich für ein Fotoshooting, um eine Vielzahl von Nutzern in unterschiedlichen Situationen zu zeigen; das verdeutlicht, dass es sich um ein Produkt handelt, das für alle geeignet ist.

Wenn ein solches Fotoshooting nicht in Ihrem Budget liegt, wählen Sie neutrale Stockbilder, die alltägliche Menschen zeigen, mit denen sich die Nutzer identifizieren können.

Warten macht keinen Spaß, und Menschen haben eine sehr kurze Aufmerksamkeitsspanne. Deshalb ist die Ladegeschwindigkeit entscheidend, um Nutzer zu halten.  Aktuelle Studien zeigen, dass man sieben Sekunden Zeit hat, um jemandes Aufmerksamkeit zu gewinnen. Das kennen wir doch alle: man wartet, bis eine Seite geladen ist, und klickt weiter, noch bevor man blinzeln kann.

Mach ein paar Tests, um sicherzustellen, dass deine Seite schnell lädt. Das Letzte, was du willst, ist, dass jemand abspringt, weil die Bilder auf deiner Seite nicht laden.

Denk an deine SEO-Strategie: Bildgröße und Ladegeschwindigkeit sind Teile davon!

Ein Teil davon, ein responsives Hero-Bild zu verwenden, besteht darin, sicherzustellen, dass du alle möglichen Bildschirmgrößen berücksichtigst, auf denen es angezeigt werden könnte.

Die Optimierung für alle Geräte ist essenziell und hilft, dein Bild für alle Nutzer konsistent zu halten. Es gibt viele Tools, die du nutzen könntest, wie einen responsive image breakpoint generator. Dieser analysiert dein Bild für verschiedene Bildschirmgrößen, sodass du die optimale Größe auswählen kannst.

Oder du kannst eine Grafikdesign-Software verwenden, die dir hilft, Inhalte für mehrere Geräte zu gestalten. Möglicherweise musst du das Haupt-Hero-Bild zuschneiden oder eine andere Version davon verwenden, um es an die Bildschirmgrößen kleinerer Geräte, z. B. Smartphones, anzupassen.

Schau dir Gold’s Gym an. Sie haben ein großes Hero-Bild, das vier verschiedene Personen zusammen mit ihrem Markenversprechen zeigt. Aber das passt nicht auf ein kleineres Gerät; der Text wäre nicht lesbar.

Also haben sie eine Handyversion erstellt, um dieses Problem zu beheben. Wie du siehst, ist die Botschaft immer noch klar. Sie haben die Botschaft mit einer zugeschnittenen Version ihres bestehenden Bildes kombiniert. Du siehst denselben Typen, dasselbe Versprechen und nur ein leicht anderes Bild. Aber die Aussage bleibt dieselbe.

Manchmal kann das Anpassen Ihres Hero-Bildes an die Jahreszeit oder an einen bestimmten Feiertag bei Nutzern Interesse und Begeisterung wecken. Es kann auch Ideen anregen und sie ermutigen, einen Artikel zu kaufen, den Sie in diesem Fall zeigen könnten.

Build-A-Bear ändert sein Hero-Bild ziemlich häufig und zeigt jedes Mal das perfekte Stofftier für den jeweiligen Anlass oder Feiertag.

In diesem Fall setzt das Unternehmen einen Teddybären ein, der ein T‑Shirt‑Tuxedo trägt und Blumen hält, um den bevorstehenden Feiertag – den Valentinstag – zu symbolisieren. Außerdem spielt es mit der Formulierung und macht deutlich, dass noch reichlich Zeit bleibt, um einen Bären wie diesen für Ihren eigenen Liebsten zu besorgen.

Ein Thema oder einen Feiertag zu nutzen, ist auch eine großartige Möglichkeit, deine Mundpropaganda zu steigern!

Das ist optional, aber es gibt eine bestimmte Vorgehensweise. Die Bilder selbst sollten keinen Text enthalten. Stattdessen sollten Sie HTML und CSS verwenden, um den Text über die Bilder zu legen.

Viele Websites tauschen einfach das Bild aus und lassen den Text im Code unverändert. Der Haken dabei ist, dass Sie ständig Bilder verwenden müssen, die gut zur Textplatzierung passen. Wenn Sie die Hero-Bilder jedoch nicht allzu oft wechseln, kann das sehr gut für Sie funktionieren.

Indem Sie Ihren Text so positionieren, machen Sie das Bild responsiver. Das ist ideal, besonders wenn Nutzer über verschiedene Kanäle auf Ihre Seite kommen.

Sephoras aktuelles Hero-Bild zeigt eine Reihe neuer und gerade eingetroffener Produkte. Wenn du genau hinsiehst, werden außerdem verschiedene Texte verwendet. Um das zu erreichen, haben sie, wie du dir gedacht hast, ein Text-Overlay verwendet!

Gibt es eine allgemeine Hero-Image-Größe mit der du arbeiten solltest? Nun, wenn du eine optimierte Seite willst, dann ja.

Das Bild sollte groß genug für jede Bildschirmgröße sein, aber klein genug, damit es die Ladegeschwindigkeit deiner Seite nicht verlangsamt.  Daher musst du die richtigen Abmessungen verwenden und den optimalen Kompromiss zwischen Auflösung und Dateigröße finden.

Es gibt einige Dimensionen, die du als grobe Richtlinie verwenden kannst (wir haben bereits einige erwähnt). Das sind Dateigröße, Auflösung und natürlich Bildgröße.

Viele Computer haben eine minimale Auflösung von 1024 x 768 Pixeln. Dein Hero-Image sollte etwas größer sein, etwa 1600 x 500 Pixel. Du kannst jedoch kleiner gehen, wenn du mit kleineren Bildschirmen (wie einem Smartphone oder Tablet) arbeitest.

Die Größe des Hero-Images in WordPress richtet sich nach dem Gerät, genau wie bei jeder anderen Website. Für mobile Geräte sollte eine kleinere Datei verwendet werden, während für größere Displays ein Bild bis zu 2880 px genutzt werden sollte. Mit dem richtigen CSS kannst du verschiedene Bildgrößen für unterschiedliche Geräte verwenden. Du kannst den Browser die für jedes Gerät passende Größe wählen lassen; viele Unternehmen tun das auch. Das Problem ist, dass dabei die Bildschärfe und die Ladegeschwindigkeit leiden können. Das muss aber nicht so schlimm sein – bedenke, dass das Internet ständig schneller wird.

Du solltest ein relativ großes Bild mit hoher Auflösung (mindestens 2000 px) verwenden. Der Trick besteht darin, es um etwa 70 % zu komprimieren. Du kannst so die Dateigröße reduzieren und dabei sowohl die Integrität als auch die Qualität des Bildes erhalten.

Am besten beginnst du immer mit einem Bild, das 2000 px breit ist. Außerdem erfordert Limecubes Website-Baukasten nicht, dass du das Bild optimierst, da die Plattform das für dich übernimmt und die Bannerbilder in WebP konvertiert, um schnelle Ladezeiten zu ermöglichen. Die Bilder passen sich zudem automatisch an verschiedene Geräte an.

Glücklicherweise gibt es viele kostenlose Bildkompressoren, also schnapp dir deine großen Bilder und komprimiere sie für maximale Optimierung.

Genauer gesagt solltest du dich bei deinem Shopify-Theme nach Informationen zu Bildgrößen erkundigen.

Jetzt, wo du das Konzept von Hero-Images verstanden hast, schauen wir uns ein paar inspirierende Beispiele an. Hier sind einige unserer Favoriten!

Das ausschließlich auf das Produkt fokussierte Hero-Image zeigt nur das Produkt.

Das emotionale Hero-Image zeigt starke Emotionen.

Ein illustratives Hero-Image nutzt eine Illustration, um die Botschaft zu vermitteln.

Schauen wir uns ein paar mobile Hero-Bilder an. Sie haben alle denselben Effekt, sind jedoch für kleinere Größen skaliert.

CTA-Fokus – der CTA ist der Haupttreiber dieses Bildes.

Das zentrierte Produktbild – das Hero-Bild ist zwischen Menü und Text angeordnet.

Einsatz von Video – einige Hero-Bilder werden durch ein Promotion-Video ersetzt.

Wir haben oft gesehen, dass viele einzelne Bilder verwendet werden. Manchmal jedoch verwendet eine Marke eine Collage oder eine Fotogalerie als ihr Hero-Bild.

Overtone verwendet zum Beispiel ein paar Bilder, um ihr neues Produkt zusammen mit echten Nutzern zu präsentieren.

Es gibt auch Unternehmen, die einen Bild-Slider oder eine Galerie verwenden, in denen die Bilder automatisch wechseln, um den Nutzern noch mehr visuelle Effekte zu bieten. Das erkennt man an den Pfeilen auf beiden Seiten der Bilder sowie an den Punkten am unteren Rand.

Woher bekommst du die Bilder, die du verwendest? In vielen Fällen erstellst du deine Inhalte vielleicht selbst. Manchmal kannst du sogar nutzergenerierte Inhalte verwenden. Wenn du dein Glück mit kostenlosen Stockfotos versuchen willst, stehen dir viele Optionen zur Verfügung.

Viele kostenlose Bildseiten bieten lizenzfreie Bilder an, die Sie auf Ihrer Website verwenden können. Oft findet man wirklich gute Fotos, mit denen Sie Ihr Unternehmen einzigartig präsentieren können.

Einige beliebte Seiten sind…

Pikwizard – Die Seite ist kostenlos und bietet mehr als 1.000.000 Fotos. Sie können sogar kostenlose Vektoren und Illustrationen herunterladen.

Design Wizard – Es gibt eine kostenlose Option, aber Sie können auf eine kostenpflichtige Version upgraden, um noch mehr Inhalte zu erhalten. Das Tool bietet viele kostenlose Bilder und Bearbeitungsoptionen und ist einen Blick wert.

Es muss nicht schwer sein – wie du siehst, gibt es viele Möglichkeiten, das beste Hero-Bild für deine Seite zu erstellen. Achte nur auf Bildschirmgröße und Ladezeit, dann sollte der Rest von selbst klappen.