{"id":4114,"date":"2022-03-02T07:01:16","date_gmt":"2022-03-02T07:01:16","guid":{"rendered":"https:\/\/vwo.com\/glossary\/hero-image\/"},"modified":"2025-05-29T07:32:07","modified_gmt":"2025-05-29T07:32:07","slug":"hero-image","status":"publish","type":"post","link":"https:\/\/vwo.com\/glossary\/de\/hero-image\/","title":{"rendered":"Hero Image"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Was ist ein Hero Image?<\/strong><\/h2>\n\n\n\n<p>Der Begriff \u201eHero Image\u201c im Webdesign bezieht sich auf ein gro\u00dfes, aufmerksamkeitsstarkes Bild mit Text, das in der Regel im <a href=\"https:\/\/vwo.com\/glossary\/de\/above-the-fold\/\">\u201eAbove The Fold\u201c<\/a>-Bereich der Webseite, direkt unter dem Header der Website, angezeigt wird.<\/p>\n\n\n\n<p>Normalerweise nimmt ein Hero Image praktisch den gesamten Bereich vor dem Scrollen in voller Breite auf der Seite ein. Die anderen Layoutkomponenten (Call-to-Action-Schaltfl\u00e4che, Text usw.) werden in der Kopfzeile und auf oder neben dem Hero Image platziert, um eine einheitliche und harmonische visuelle Komposition zu schaffen.<\/p>\n\n\n\n<p>Das Hero Image kann entweder station\u00e4r oder interaktiv (Videos und Animationen) sein. Es kann ein technisches Thema, ein Bauwerk, eine Landschaft oder sogar ein abstraktes Modell oder Kunstwerk sein. Das grundlegende Ziel ist es, durch ein Bild, das sofort die Aufmerksamkeit des Verbrauchers auf sich zieht, eine schnelle visuelle, emotionale und lehrreiche Verbindung zum Verbraucher herzustellen. Dabei geht es nicht darum, das gesamte Thema zu erkl\u00e4ren, sondern es so einzuf\u00fchren, dass die Leser aufh\u00f6ren zu scrollen und klicken, um mehr zu lesen.<\/p>\n\n\n\n<p>Das Hero Image dient als Einleitung f\u00fcr:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Online-Publikationen aller Art, einschlie\u00dflich Nachrichten, Unterhaltung und Sport.<\/li>\n\n\n\n<li>Produktwebseiten f\u00fcr alles von Surfbrettern bis zu Software.<\/li>\n\n\n\n<li>Marketing f\u00fcr Film, Fernsehen oder Musikaufnahmen.<\/li>\n\n\n\n<li>Websites zum Thema Hotels und Gastgewerbe.<\/li>\n\n\n\n<li>Veranstaltungsorte.<\/li>\n\n\n\n<li>Leben und Stil-Blogs.<\/li>\n\n\n\n<li>Berater und Werbefirmen.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1100\" data-id=\"1512\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\" alt=\"Hero image website\" class=\"wp-image-1512\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png 1500w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-1366 1366w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-1024 1024w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-375 375w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-142675bb-7fff-ead0-7d54-2fb4c130f86b\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Bildquelle: <\/span><a href=\"https:\/\/www.justinmind.com\/blog\/inspiring-hero-image-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Justinmind<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Die Bedeutung des Hero Images<\/strong><\/h2>\n\n\n\n<p>Das Hero-Bild ist eine wichtige Komponente des Webdesigns und hat mehrere Funktionen und Vorteile auf einer Website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Beeindrucken und Besucher anziehen<\/strong><\/h3>\n\n\n\n<p>Die St\u00e4rke der visuellen Wahrnehmung wird von der ersten Sekunde an aktiviert, denn es bleibt nur wenig Zeit, um das Interesse eines Website-Besuchers f\u00fcr neue Angebote zu wecken oder einen wiederkehrenden Besucher zu \u00fcberraschen. Die M\u00f6glichkeit, die Aufmerksamkeit der User schnell zu gewinnen, bietet das Hero Image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Wissen und Informationen<\/strong><\/h3>\n\n\n\n<p>Im Allgemeinen verarbeiten und interpretieren Menschen visuelle Bilder wesentlich schneller als Worte. Dies bedeutet, dass das Hero Image nicht nur ein Aspekt der Attraktivit\u00e4t ist, sondern auch als p\u00e4dagogische Komponente der Seite dient, indem es eine kurze visuelle Botschaft \u00fcber den Inhalt vermittelt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Verbesserte Navigation<\/strong><\/h3>\n\n\n\n<p>Ein angemessen komponiertes Hero Image kann die Navigation verbessern und die Aufmerksamkeit auf die Schaltfl\u00e4che f\u00fcr die Aufforderung zur Handlung lenken.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Gef\u00fchle bei den Besuchern wecken<\/strong><\/h3>\n\n\n\n<p>Der emotionale Kontext des User-Erlebnisses spielt eine wichtige Rolle und erh\u00f6ht die Menschlichkeit der Interaktion zwischen der Webseite und ihrem Besucher. Hero Images sind eine bew\u00e4hrte Methode, um durch Bilder, Formen und Farben die richtigen Gef\u00fchle beim Betrachter hervorzurufen und schon in den ersten Momenten eines Gespr\u00e4chs die richtige Stimmung zu erzeugen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u00c4sthetisches Vergn\u00fcgen<\/strong><\/h3>\n\n\n\n<p>Zweifellos stehen die Dienste und die Performance der Website an erster Stelle. Aber die Menschen wollen auch etwas, das dem Auge schmeichelt. Angesichts des harten Online-Wettbewerbs und der wachsenden Beliebtheit von \u00c4sthetik als Bestandteil eines guten User-Erlebnis ses, das mit Hilfe eines Hero Images befriedigt wird, spielt \u00c4sthetik eine gro\u00dfe Rolle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Verschiedene Grafiken, die f\u00fcr Hero Images verwendet werden<\/strong><\/h2>\n\n\n\n<p>Das Bildmaterial, das f\u00fcr das Hero Image verwendet wird, und die Erz\u00e4hlung, die es vermittelt, werden durch die Ziele der Homepage und die Art der Website als Ganzes bestimmt. Es kann sich um aktuelle Nachrichten handeln, die die Kunden sofort sehen m\u00fcssen, um eine Grafik, die das Wesentliche oder die Vorteile eines Gesch\u00e4fts oder einer Information einf\u00e4ngt, um eine neue Ver\u00f6ffentlichung, die gr\u00f6\u00dfte Aufmerksamkeit erfordert, und so weiter. Hero Images werden h\u00e4ufig auf E-Commerce-Websites verwendet, um die meistverkauften Artikel, Preisnachl\u00e4sse und Sonderangebote, wichtige Dienstleistungen oder besonders g\u00fcnstige Angebote hervorzuheben.<\/p>\n\n\n\n<p>Das Hero Image kann einen der folgenden Grafiktypen verwenden<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Fotos<\/strong><\/h3>\n\n\n\n<p>Der Hauptvorteil von Fotos besteht darin, dass sie den Usern helfen, eine Verbindung zwischen den Inhalten, die sie online sehen, und den physischen Objekten und realen Menschen, die sie bewohnen, herzustellen.<\/p>\n\n\n\n<p>Wenn sie auf einer Website verwendet werden, wecken sie starke Assoziationen und k\u00f6nnen die gew\u00fcnschte Stimmung in einem f\u00fcr das Publikum angemessenen Stil ausdr\u00fccken. Fotos in Ihrer Online-Useroberfl\u00e4che erm\u00f6glichen es Ihnen, Realit\u00e4t und \u00c4sthetik zu vereinen, indem Sie den wesentlichen Stil beibehalten und gleichzeitig die Emotionen Ihrer Zielgruppe ansprechen.<\/p>\n\n\n\n<p>Auf E-Commerce-Websites, bei denen das Konzept \u201eSie bekommen, was Sie sehen\u201c entscheidend f\u00fcr den Erfolg ist, sind Fotos das wichtigste visuelle Darstellungsmittel f\u00fcr die Artikel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Illustrationen<\/strong><\/h3>\n\n\n\n<p>Userdefinierte Grafiken sind heute ein beliebter Webdesign-Trend f\u00fcr eine Reihe von Website-Zwecken, darunter auch Hero-Bilder. Userdefinierte Grafiken, die in einer Vielzahl von Designs erstellt werden k\u00f6nnen, helfen effizient dabei, die Informationen auf einer Website oder einem Bildschirm schnell zu verstehen. Au\u00dferdem st\u00e4rken sie die visuelle Einzigartigkeit und verbessern die \u00c4sthetik und Eleganz von Websites, Blogs und Landing Pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3D-Grafiken<\/strong><\/h3>\n\n\n\n<p>3D-Grafiken, die durch die Conversion von 3D-Drahtgittermodellen in 2D-Bilder erzeugt werden, sind eine weitere Art von Online-Grafiken, die immer beliebter werden. Einer ihrer gr\u00f6\u00dften Vorteile f\u00fcr das Webdesign ist, dass viele von ihnen lebensechte Effekte bieten. Gut gemachte 3D-Grafiken sind sehr ansprechend, modern und \u00fcberzeugend, so dass sie einen bedeutenden Einfluss auf das Erscheinungsbild und die Conversion Rates von Websites haben k\u00f6nnen, auch wenn die Herstellung von Bildern dieser Art spezielle Fachkenntnisse erfordert, teuer ist und viel Zeit in Anspruch nimmt. Aus diesem Grund werden sie jetzt h\u00e4ufig f\u00fcr Hero-Bilder verwendet.Diese <\/p>\n\n\n\n<p><a href=\"https:\/\/www.justinmind.com\/blog\/inspiring-hero-image-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\">Website<\/a> zeigt einige inspirierende Beispiele f\u00fcr die Verwendung verschiedener Grafiken in den Hero Imagesn.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Verf\u00fcgbare Arten von Hero Imagesn<\/strong><\/h2>\n\n\n\n<p>Es kann schwierig sein, sich f\u00fcr das ideale Hero Image f\u00fcr Ihre Website zu entscheiden. Das Bannerbild, das Sie w\u00e4hlen, h\u00e4ngt davon ab, ob Sie ein Produkt, eine Dienstleistung oder nur Inhalte bewerben. Auch Videos k\u00f6nnen verwendet werden, um umfassende Informationen \u00fcber Ihr Unternehmen zu vermitteln.<\/p>\n\n\n\n<p>Es ist schwer, mit Sicherheit zu sagen, welches Format am besten funktioniert, aber am besten ist es, einige Alternativen auszuschlie\u00dfen und dann <a href=\"https:\/\/vwo.com\/de\/ab-testing\/\">A\/B-Tests<\/a> durchzuf\u00fchren, um zu sehen, welches Format am besten funktioniert. Damit Sie verstehen, was Sie mit den verschiedenen Hero-Bildformaten erreichen k\u00f6nnen, finden Sie hier ein paar Beispiele:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Betonung auf dem Produkt<\/strong><\/h3>\n\n\n\n<p>Manchmal ist die beste Wahl f\u00fcr ein Hero Image ein einfaches, hochaufl\u00f6sendes Foto Ihres Produkts in Verbindung mit einer kurzen Beschreibung. Die Website von Apple ist ein gutes Beispiel daf\u00fcr, wie man mit Produktfotos Besucher anlockt. Zus\u00e4tzlich wird ein Slider verwendet, um verschiedene Produkte zu zeigen.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1050\" data-id=\"1513\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png\" alt=\"An example of Apple's website\" class=\"wp-image-1513\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png 1500w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-1366 1366w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-1024 1024w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-375 375w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-bff2ac10-7fff-36ce-4891-3a942a7fb768\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Bildquelle: <\/span><a href=\"https:\/\/www.justinmind.com\/blog\/inspiring-hero-image-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">justinmind<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Vorteile hervorheben<\/strong><\/h3>\n\n\n\n<p>F\u00fcr Unternehmen, die Dienstleistungen anbieten, ist ein Hero Image, das einen USP oder ein Wertversprechen hervorhebt, eine kluge Wahl. UXPin beispielsweise bietet seinen Usern auf seiner Website die M\u00f6glichkeit, sofort mit der Nutzung seiner Dienstleistung zu beginnen, indem es den USP \u00fcber ein dynamisches Hero Image einblendet.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"287\" data-id=\"1514\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-29.png\" alt=\"UXPin's example \" class=\"wp-image-1514\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-29.png 512w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-29.png?tr=w-375 375w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-ce143913-7fff-4b12-6318-0373855930d2\"><p dir=\"ltr\" style=\"line-height:1.38;margin-top:0pt;margin-bottom:0pt\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Bildquelle: <\/span><a href=\"https:\/\/yourstory.com\/2017\/03\/what-is-hero-image?utm_pageloadtype=scroll\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">yourstory<\/span><\/a><\/p><\/span><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Grundlegende Darstellung<\/strong><\/h3>\n\n\n\n<p>Sie k\u00f6nnen den Besuchern das Angebot Ihres Unternehmens mit einem einfachen, simplen Bild erkl\u00e4ren, ohne sie mit Details zu \u00fcberladen. Sie k\u00f6nnen das Ganze mit einem klaren CTA und einem klaren Text erg\u00e4nzen. Schauen Sie sich die Homepage von Buffer an, um dies in Aktion zu sehen.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"447\" data-id=\"1515\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png\" alt=\"Buffer's homepage\" class=\"wp-image-1515\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png 800w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png?tr=w-375 375w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-626d2ce5-7fff-7759-9fbe-f4cd6cccf46f\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Bildquelle: <\/span><a href=\"https:\/\/yourstory.com\/2017\/03\/what-is-hero-image?utm_pageloadtype=scroll\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">yourstory<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Das menschliche Element<\/strong><\/h3>\n\n\n\n<p>Es versteht sich von selbst, dass die Einbeziehung realer Personen in Ihr Bildmaterial dazu beitr\u00e4gt, Glaubw\u00fcrdigkeit und Vertrauen bei den Betrachtern aufzubauen.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"571\" data-id=\"1516\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png\" alt=\"An example of Yoga Lite's homepage\" class=\"wp-image-1516\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png 900w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png?tr=w-375 375w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\">Bildquelle: <a href=\"https:\/\/www.mockplus.com\/blog\/post\/hero-image-website-examples\" target=\"_blank\" rel=\"noreferrer noopener\">Mockplus<\/a><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Emotionen erzeugen<\/strong><\/h3>\n\n\n\n<p>Die Wahrscheinlichkeit, dass Besucher Ihrer Aufforderung zu einer bestimmten Handlung nachkommen, ist gr\u00f6\u00dfer, wenn Sie Ihr Hero Image nutzen k\u00f6nnen, um ihnen ein Gef\u00fchl zu vermitteln. Eine gemeinn\u00fctzige Organisation namens Charity: Water verwendet Spenden, um sauberes Trinkwasser in verarmten L\u00e4ndern bereitzustellen. Ihre Hero-Illustrationen veranschaulichen eindrucksvoll die positiven Auswirkungen einer Spende.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-6 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"456\" data-id=\"1517\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png\" alt=\"Charity's webpage \" class=\"wp-image-1517\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png 800w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png?tr=w-375 375w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-7a23b378-7fff-44a9-fabb-24c69d2cc30e\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Bildquelle: <\/span><a href=\"https:\/\/yourstory.com\/2017\/03\/what-is-hero-image?utm_pageloadtype=scroll\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">yourstory<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Best Practices f\u00fcr Hero Images<\/strong><\/h2>\n\n\n\n<p>Trends sind nur eine kleine Komponente bei der Entwicklung eines starken Heldenimages. Der Rest der Magie basiert auf bew\u00e4hrten Designprinzipien. Sie k\u00f6nnen ein Hero Image erstellen, das bei Ihrem Publikum Anklang findet, wenn Sie sich an diese bew\u00e4hrten Verfahren halten<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Gr\u00f6\u00dfe und Platzierung<\/strong><\/h3>\n\n\n\n<p>Beachten Sie die unten aufgef\u00fchrten Tipps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Das Hero Image muss zentriert sein.<\/li>\n\n\n\n<li>Der Text muss einfach zu lesen sein.<\/li>\n\n\n\n<li>Es muss auf allen Arten von Bildschirmen fantastisch aussehen.<\/li>\n\n\n\n<li>Das Bild sollte das Fenster ausf\u00fcllen.<\/li>\n\n\n\n<li>Beachten Sie die folgenden Gr\u00f6\u00dfenrichtlinien\n<ul class=\"wp-block-list\">\n<li>Die optimale Gr\u00f6\u00dfe f\u00fcr ein bildschirmf\u00fcllendes Hero-Bild ist: 1.200 Pixel breit und mit einem Seitenverh\u00e4ltnis von 16:9<\/li>\n\n\n\n<li>Die optimale Aufl\u00f6sung f\u00fcr ein Banner-Hero Image ist 1600 x 500 Pixel.<\/li>\n\n\n\n<li>Die optimale Aufl\u00f6sung f\u00fcr ein mobiles Hero Image ist: 800 x 1.200 Pixel<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Testen Sie JPG- und PNG-Dateien, um zu sehen, welche schneller l\u00e4dt.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Gleichgewicht und Harmonie<\/strong><\/h3>\n\n\n\n<p>Wenn das Hero-Bild nicht zum Rest des Stils passt, werden die Besucher schnell durch ein schlechtes Design abgelenkt und verlassen die Website sofort. Die \u00e4sthetische Koh\u00e4renz l\u00e4sst sich aufrechterhalten, wenn Sie genau auf Schriftarten, Gr\u00f6\u00dfen, Farben, Navigation, Grafiken und Inhalte achten.<\/p>\n\n\n\n<p>Wenn Sie eine Idee f\u00fcr ein Hero Image entwickeln, sollten Sie sich mit Ihrer Markenidentit\u00e4t und Ihren Prinzipien auseinandersetzen. Es w\u00e4re keine gute Idee, wenn die Besucher uninteressiert werden, bevor sie zum wichtigen Teil des Inhalts kommen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Logische Organisation<\/strong><\/h3>\n\n\n\n<p>Eine effiziente Organisation ist ein notwendiger Bestandteil eines harmonischen Designs. Der Inhalt Ihres Hero-Bildes sollte in einer logischen Struktur angeordnet sein, wobei jedes Element auf dem vorhergehenden aufbaut. Dies ist wichtig f\u00fcr die Synchronisierung von Fotos mit Kopien.<\/p>\n\n\n\n<p>Stellen Sie sicher, dass Ihre Botschaft verstanden wird und dass Ihre Grafiken sie unterst\u00fctzen. Es ist n\u00fctzlich, ein Grundger\u00fcst zu erstellen, wie Ihr Hero Image auf der Seite angeordnet werden soll.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Originalgrafiken<\/strong><\/h3>\n\n\n\n<p>Obwohl Stock-Fotos ein wesentlicher Bestandteil des Content-Marketings sind, ist es ideal, einzigartiges Bildmaterial einzubinden, da es dazu beitragen kann, die Marketingziele erfolgreicher zu erreichen. Sie k\u00f6nnen Ihrer Fantasie freien Lauf lassen, indem Sie Canva verwenden, um einzigartige Hero Images zu erstellen, oder indem Sie auf Behance nach Ideen suchen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Kontinuit\u00e4t und Konsistenz<\/strong><\/h3>\n\n\n\n<p>Was ist die gr\u00f6\u00dfte Herausforderung bei der Erstellung von ansprechendem Bildmaterial? Marketingexperten sagen, dass es die konsequente Erstellung ist. Legen Sie einen Zeitplan f\u00fcr die Erstellung von Bildmaterial fest und f\u00fcgen Sie diese Kosten Ihrem Marketingbudget hinzu, wenn es n\u00f6tig ist.<\/p>\n\n\n\n<p>Die Neugestaltung Ihrer veralteten Grafiken kann eine gute Option sein, wenn die Zeit dr\u00e4ngt. Es ist eine innovative Technik, um Dinge schnell, effektiv und effizient zu erledigen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Fazit<\/strong><\/h2>\n\n\n\n<p>Ein beeindruckendes Hauptbild zieht die Besucher an und verleitet sie zum Verweilen und St\u00f6bern auf der Website.<\/p>\n\n\n\n<p>Hero-Bilder haben einen erheblichen Einfluss darauf, wie Ihre Marke wahrgenommen wird, auf den Internetverkehr und auf die Konversion, denn sie sind der prim\u00e4re Punkt der Interaktion, den Kunden mit Ihrer Marke haben.\u00a0<\/p>\n\n\n\n<p>Zusammenfassend l\u00e4sst sich sagen, dass Hero-Bilder ein vielseitiges und umfangreiches Toolkit f\u00fcr Website-Designer darstellen. Sie haben ein erhebliches Potenzial, die Userfreundlichkeit und Attraktivit\u00e4t der Website zu verbessern und die Besucher zu motivieren, mehr zu erfahren. Jetzt ist es an der Zeit, Ihr neu erworbenes Wissen in die Tat umzusetzen und ein Hero Image zu erstellen, das die Aufmerksamkeit der Betrachter sofort fesselt. Um sicher zu sein, dass Ihr Hero Image funktioniert, k\u00f6nnen Sie mit VWO schnell und einfach einige A\/B-Tests durchf\u00fchren. <a href=\"#free-trial\">Nutzen Sie eine kostenlose Testversion von VWO<\/a>, um loszulegen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Hero Image ist ein prominent platziertes visuelles Element auf einer Website \u2013 meist oben auf der Start- oder Landingpage \u2013 und soll sofort Aufmerksamkeit erzeugen.<\/p>\n","protected":false},"author":565,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-4114","post","type-post","status-publish","format-standard","hentry","category-uncategorized-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Hero Image | VWO<\/title>\n<meta name=\"description\" content=\"Ein Hero Image ist ein gro\u00dfformatiges Bannerbild im oberen Seitenbereich, das User visuell anspricht und zentrale Botschaften einer Website vermittelt.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vwo.com\/glossary\/de\/hero-image\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hero Image | VWO\" \/>\n<meta property=\"og:description\" content=\"Ein Hero Image ist ein gro\u00dfformatiges Bannerbild im oberen Seitenbereich, das User visuell anspricht und zentrale Botschaften einer Website vermittelt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vwo.com\/glossary\/de\/hero-image\/\" \/>\n<meta property=\"og:site_name\" content=\"VWO Glossary\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-02T07:01:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-29T07:32:07+00:00\" \/>\n<meta name=\"author\" content=\"avnishsharamav\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vwo.com\/glossary\/de\/hero-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/glossary\/de\/hero-image\/\"},\"author\":{\"name\":\"avnishsharamav\",\"@id\":\"https:\/\/vwo.com\/glossary\/de\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\"},\"headline\":\"Hero Image\",\"datePublished\":\"2022-03-02T07:01:16+00:00\",\"dateModified\":\"2025-05-29T07:32:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vwo.com\/glossary\/de\/hero-image\/\"},\"wordCount\":1848,\"image\":{\"@id\":\"https:\/\/vwo.com\/glossary\/de\/hero-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vwo.com\/glossary\/de\/hero-image\/\",\"url\":\"https:\/\/vwo.com\/glossary\/de\/hero-image\/\",\"name\":\"Hero Image | VWO\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/glossary\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vwo.com\/glossary\/de\/hero-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vwo.com\/glossary\/de\/hero-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\",\"datePublished\":\"2022-03-02T07:01:16+00:00\",\"dateModified\":\"2025-05-29T07:32:07+00:00\",\"author\":{\"@id\":\"https:\/\/vwo.com\/glossary\/de\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\"},\"description\":\"Ein Hero Image ist ein gro\u00dfformatiges Bannerbild im oberen Seitenbereich, das User visuell anspricht und zentrale Botschaften einer Website vermittelt.\",\"breadcrumb\":{\"@id\":\"https:\/\/vwo.com\/glossary\/de\/hero-image\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vwo.com\/glossary\/de\/hero-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/vwo.com\/glossary\/de\/hero-image\/#primaryimage\",\"url\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\",\"contentUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vwo.com\/glossary\/de\/hero-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/vwo.com\/glossary\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hero Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vwo.com\/glossary\/de\/#website\",\"url\":\"https:\/\/vwo.com\/glossary\/de\/\",\"name\":\"VWO Glossary\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vwo.com\/glossary\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/vwo.com\/glossary\/de\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\",\"name\":\"avnishsharamav\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/vwo.com\/glossary\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g\",\"caption\":\"avnishsharamav\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hero Image | VWO","description":"Ein Hero Image ist ein gro\u00dfformatiges Bannerbild im oberen Seitenbereich, das User visuell anspricht und zentrale Botschaften einer Website vermittelt.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vwo.com\/glossary\/de\/hero-image\/","og_locale":"de_DE","og_type":"article","og_title":"Hero Image | VWO","og_description":"Ein Hero Image ist ein gro\u00dfformatiges Bannerbild im oberen Seitenbereich, das User visuell anspricht und zentrale Botschaften einer Website vermittelt.","og_url":"https:\/\/vwo.com\/glossary\/de\/hero-image\/","og_site_name":"VWO Glossary","article_published_time":"2022-03-02T07:01:16+00:00","article_modified_time":"2025-05-29T07:32:07+00:00","author":"avnishsharamav","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vwo.com\/glossary\/de\/hero-image\/#article","isPartOf":{"@id":"https:\/\/vwo.com\/glossary\/de\/hero-image\/"},"author":{"name":"avnishsharamav","@id":"https:\/\/vwo.com\/glossary\/de\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044"},"headline":"Hero Image","datePublished":"2022-03-02T07:01:16+00:00","dateModified":"2025-05-29T07:32:07+00:00","mainEntityOfPage":{"@id":"https:\/\/vwo.com\/glossary\/de\/hero-image\/"},"wordCount":1848,"image":{"@id":"https:\/\/vwo.com\/glossary\/de\/hero-image\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png","articleSection":["Uncategorized"],"inLanguage":"de-DE"},{"@type":"WebPage","@id":"https:\/\/vwo.com\/glossary\/de\/hero-image\/","url":"https:\/\/vwo.com\/glossary\/de\/hero-image\/","name":"Hero Image | VWO","isPartOf":{"@id":"https:\/\/vwo.com\/glossary\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vwo.com\/glossary\/de\/hero-image\/#primaryimage"},"image":{"@id":"https:\/\/vwo.com\/glossary\/de\/hero-image\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png","datePublished":"2022-03-02T07:01:16+00:00","dateModified":"2025-05-29T07:32:07+00:00","author":{"@id":"https:\/\/vwo.com\/glossary\/de\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044"},"description":"Ein Hero Image ist ein gro\u00dfformatiges Bannerbild im oberen Seitenbereich, das User visuell anspricht und zentrale Botschaften einer Website vermittelt.","breadcrumb":{"@id":"https:\/\/vwo.com\/glossary\/de\/hero-image\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vwo.com\/glossary\/de\/hero-image\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/vwo.com\/glossary\/de\/hero-image\/#primaryimage","url":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png","contentUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png"},{"@type":"BreadcrumbList","@id":"https:\/\/vwo.com\/glossary\/de\/hero-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vwo.com\/glossary\/de\/"},{"@type":"ListItem","position":2,"name":"Hero Image"}]},{"@type":"WebSite","@id":"https:\/\/vwo.com\/glossary\/de\/#website","url":"https:\/\/vwo.com\/glossary\/de\/","name":"VWO Glossary","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vwo.com\/glossary\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/vwo.com\/glossary\/de\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044","name":"avnishsharamav","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/vwo.com\/glossary\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g","caption":"avnishsharamav"}}]}},"_links":{"self":[{"href":"https:\/\/vwo.com\/glossary\/de\/wp-json\/wp\/v2\/posts\/4114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vwo.com\/glossary\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vwo.com\/glossary\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vwo.com\/glossary\/de\/wp-json\/wp\/v2\/users\/565"}],"replies":[{"embeddable":true,"href":"https:\/\/vwo.com\/glossary\/de\/wp-json\/wp\/v2\/comments?post=4114"}],"version-history":[{"count":4,"href":"https:\/\/vwo.com\/glossary\/de\/wp-json\/wp\/v2\/posts\/4114\/revisions"}],"predecessor-version":[{"id":4120,"href":"https:\/\/vwo.com\/glossary\/de\/wp-json\/wp\/v2\/posts\/4114\/revisions\/4120"}],"wp:attachment":[{"href":"https:\/\/vwo.com\/glossary\/de\/wp-json\/wp\/v2\/media?parent=4114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vwo.com\/glossary\/de\/wp-json\/wp\/v2\/categories?post=4114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vwo.com\/glossary\/de\/wp-json\/wp\/v2\/tags?post=4114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}