So bearbeiten Sie das Headerbild Ihrer WordPress-Website

Headerbild in WordPress anpassen: Der erste Eindruck Ihrer Website

Das Headerbild, auch Kopfzeilenbild oder Hero-Bild genannt, ist häufig eines der ersten Elemente, das Besucher auf Ihrer Website wahrnehmen. Es prägt den visuellen Eindruck, unterstützt Ihre Markenwirkung und kann sofort vermitteln, worum es auf Ihrer Website geht.

Ein professionelles Headerbild kann Vertrauen schaffen, Ihre Leistungen visuell unterstützen und Besucher gezielt in den Inhalt führen. Ein schlecht gewähltes oder zu grosses Headerbild kann dagegen unprofessionell wirken, die Ladezeit verschlechtern und wichtige Inhalte verdrängen.

Was ist ein Headerbild?

Das Headerbild ist ein Bild im oberen Bereich einer Website. Je nach Theme kann es als breites Hintergrundbild, als Kopfzeilenbild, als Hero-Bereich oder als Teil des Website-Headers erscheinen. Häufig befindet es sich direkt unter oder hinter dem Logo und der Navigation.

Typische Einsatzbereiche sind:

• Startseite: Grosses Bild mit klarer Botschaft und Call-to-Action.
• Leistungsseiten: Visuelle Einführung in ein Angebot.
• Blog oder Magazin: Titelbild für Beiträge oder Kategorien.
• Landingpages: Emotionaler Einstieg für Kampagnen oder Angebote.
• Unternehmensseiten: Teamfoto, Standort, Produkt oder Markenmotiv.

Nicht jedes Theme verwendet ein klassisches Headerbild. Manche Themes nutzen stattdessen Beitragsbilder, Hintergrundbilder, Cover-Blöcke oder Pagebuilder-Abschnitte.

1. Headerbild bei klassischen Themes über den Customizer ändern

Viele klassische WordPress-Themes erlauben die Anpassung des Headerbildes über den Customizer. Diesen finden Sie häufig unter:

Design > Customizer > Header-Medien

Je nach Theme kann der Bereich auch anders heissen, zum Beispiel Headerbild, Header Image, Website-Identität oder Theme-Optionen.

Der typische Ablauf:

1. Öffnen Sie im WordPress-Dashboard Design > Customizer.
2. Suchen Sie den Bereich Header-Medien oder eine vergleichbare Theme-Option.
3. Wählen Sie ein vorhandenes Bild aus der Mediathek oder laden Sie ein neues Bild hoch.
4. Schneiden Sie das Bild bei Bedarf zu.
5. Prüfen Sie die Vorschau auf Desktop und Mobilgerät.
6. Klicken Sie auf Veröffentlichen, wenn alles korrekt aussieht.

2. Headerbild bei Block-Themes im Website-Editor ändern

Moderne Block-Themes arbeiten häufig mit dem WordPress Site Editor. In diesem Fall wird der Header nicht mehr klassisch über den Customizer verwaltet, sondern als Template-Teil im Website-Editor bearbeitet. Der Site Editor ist laut WordPress-Dokumentation für Block-Themes verfügbar und erlaubt die Bearbeitung von Header, Footer und weiteren Website-Bereichen mit Blöcken. ([wordpress.org](https://wordpress.org/documentation/article/site-editor/?utm_source=chatgpt.com))

Sie finden den Website-Editor meist unter:

Design > Editor

Dort können Sie den Header-Bereich öffnen und je nach Theme Bilder, Cover-Blöcke, Gruppen, Navigation, Logo und andere Elemente bearbeiten.

Der Ablauf kann je nach Theme unterschiedlich sein:

1. Öffnen Sie Design > Editor.
2. Wählen Sie den Header oder den entsprechenden Template-Teil aus.
3. Bearbeiten Sie den Bild-, Cover- oder Hintergrundbereich.
4. Ersetzen Sie das bestehende Bild durch ein neues Bild aus der Mediathek.
5. Prüfen Sie Desktop-, Tablet- und mobile Darstellung.
6. Speichern Sie die Änderung.

3. Headerbild in Pagebuildern ändern

Wenn Ihre Website mit einem Pagebuilder wie Elementor, Divi, Beaver Builder oder einem Theme Builder erstellt wurde, wird das Headerbild möglicherweise nicht über WordPress selbst, sondern über den jeweiligen Builder verwaltet.

In solchen Fällen finden Sie das Bild oft in:

• einem Hero-Abschnitt,
• einem Cover-Element,
• einer Hintergrundbild-Einstellung,
• einem Template für Header oder Seitenkopf,
• einer globalen Theme-Builder-Vorlage.

Prüfen Sie vor Änderungen, ob das Bild nur auf einer einzelnen Seite oder global auf vielen Seiten verwendet wird. Besonders bei globalen Templates kann eine kleine Änderung weitreichende Auswirkungen haben.

4. Die richtige Bildgrösse wählen

Die ideale Bildgrösse hängt vom Theme, Layout und Einsatzzweck ab. Ein Headerbild über die volle Breite benötigt andere Abmessungen als ein kleines Headerfoto in einer schmalen Sidebar.

Als grobe Orientierung:

• Breites Headerbild: etwa 1600 bis 2000 Pixel Breite.
• Sehr grosses Hero-Bild: je nach Layout bis etwa 2400 Pixel Breite, aber nur wenn wirklich nötig.
• Normales Seitenkopf-Bild: oft 1200 bis 1600 Pixel ausreichend.
• Mobile Darstellung: Bildausschnitt gesondert prüfen.

Wichtig ist, dass das Bild nicht deutlich grösser ist, als es tatsächlich angezeigt wird. Ein 5000 Pixel breites Smartphone-Foto ist für die meisten Headerbereiche unnötig gross und verschlechtert die Ladezeit.

5. Dateigrösse optimieren

Headerbilder sind oft besonders kritisch für die Ladezeit, weil sie im sichtbaren oberen Bereich erscheinen. Ein zu grosses Headerbild kann den ersten Seitenaufbau verlangsamen und wichtige Performance-Werte verschlechtern.

Als grober Richtwert sollte ein Headerbild möglichst schlank sein. Für viele Websites sind Werte unter 200 bis 400 KB sinnvoll, abhängig von Motiv, Qualität, Format und sichtbarer Grösse. Ein sehr detailreiches grosses Bild kann etwas mehr benötigen, sollte aber bewusst optimiert werden.

Optimieren Sie Headerbilder vor dem Upload:

• Bild auf sinnvolle Abmessungen verkleinern,
• Komprimierung anwenden,
• WebP prüfen,
• unnötige Metadaten entfernen,
• mobile Darstellung testen,
• nicht benötigte Bildvarianten löschen.

• Anleitung: WordPress-Medieneinstellungen optimieren

6. WebP für Headerbilder verwenden

WebP ist ein modernes Bildformat, das bei vergleichbarer Qualität oft kleinere Dateien ermöglicht als JPEG oder PNG. WordPress unterstützt WebP seit Version 5.8 nativ. ([make.wordpress.org](https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/?utm_source=chatgpt.com))

Für Headerbilder kann WebP besonders sinnvoll sein, weil grosse visuelle Elemente schnell geladen werden sollten. Trotzdem gilt: Auch ein WebP-Bild sollte korrekt skaliert und komprimiert sein. Ein übergrosses WebP-Bild kann weiterhin zu schwer sein.

7. Headerbild und Core Web Vitals

Das Headerbild ist oft das grösste sichtbare Element im oberen Bereich. Damit kann es den Largest Contentful Paint, kurz LCP, beeinflussen. Der LCP ist eine wichtige Kennzahl für die wahrgenommene Ladegeschwindigkeit.

Für gute Performance sollte das wichtigste Headerbild schnell verfügbar sein. Deshalb sollte es in vielen Fällen nicht per Lazy Loading verzögert werden. Lazy Loading eignet sich eher für Bilder weiter unten auf der Seite.

Prüfen Sie bei Headerbildern:

• Ist das Bild ausreichend komprimiert?
• Hat es passende Abmessungen?
• Wird es im richtigen Format ausgeliefert?
• Wird es nicht unnötig verzögert?
• Gibt es Layout-Verschiebungen beim Laden?
• Ist die mobile Version optimiert?

Gute Core-Web-Vitals-Werte entstehen durch mehrere Faktoren: Hosting, Bildoptimierung, Caching, Theme, CSS, JavaScript und saubere Layout-Struktur.

8. Bildmotiv bewusst auswählen

Ein Headerbild sollte nicht nur technisch passen, sondern auch inhaltlich. Es sollte die Botschaft der Seite unterstützen und nicht vom eigentlichen Inhalt ablenken.

Gute Headerbilder sind:

• relevant: Sie passen zum Thema der Seite.
• vertrauenswürdig: Sie wirken professionell und authentisch.
• ruhig genug: Text bleibt gut lesbar, falls Text darüber liegt.
• markenkonform: Farben und Stil passen zum Unternehmen.
• nicht austauschbar: Eigene Bilder wirken oft stärker als generische Stockfotos.

Vermeiden Sie Bilder, die zwar schön aussehen, aber nichts mit der Seite zu tun haben. Besucher sollten sofort verstehen, welchen Zweck die Seite erfüllt.

9. Text auf Headerbildern: Lesbarkeit beachten

Viele Websites platzieren Überschriften, Slogans oder Buttons über dem Headerbild. Das kann gut funktionieren, wenn Kontrast und Bildausschnitt stimmen. Problematisch wird es, wenn der Text auf unruhigem Hintergrund liegt oder mobil abgeschnitten wird.

Achten Sie auf:

• ausreichenden Kontrast,
• ruhige Bildbereiche hinter Text,
• keine wichtigen Bilddetails hinter Buttons,
• lesbare Schriftgrösse auf Mobilgeräten,
• ausreichenden Abstand zwischen Text und Bildrändern,
• korrekte Darstellung in verschiedenen Bildschirmgrössen.

Ein leicht abgedunkeltes Overlay kann helfen, Text besser lesbar zu machen. Übertreiben Sie es aber nicht, damit das Bild weiterhin natürlich wirkt.

10. Mobile Darstellung prüfen

Ein Headerbild sieht auf einem grossen Desktop-Monitor oft gut aus, kann auf Smartphones aber problematisch werden. Breite Bilder werden auf kleinen Bildschirmen häufig beschnitten oder anders skaliert.

Prüfen Sie daher immer:

• Ist der wichtigste Bildbereich mobil sichtbar?
• Wird Text nicht abgeschnitten?
• Bleiben Buttons bedienbar?
• Ist die Dateigrösse für mobile Nutzer vertretbar?
• Wird das Bild nicht zu hoch dargestellt?
• Ist die Navigation weiterhin gut erreichbar?

Viele Themes bieten separate Einstellungen für Desktop, Tablet und Smartphone. Nutzen Sie diese Möglichkeiten, wenn Ihr Headerbild auf mobilen Geräten nicht optimal wirkt.

11. Alt-Text und Barrierefreiheit

Ob ein Headerbild einen Alt-Text benötigt, hängt von seiner Funktion ab. Wenn das Bild rein dekorativ ist, kann ein leerer Alt-Text sinnvoll sein. Wenn das Bild wichtige Informationen vermittelt, sollte es einen aussagekräftigen Alt-Text erhalten.

Beispiel für ein informatives Headerbild:

Team von Beispiel AG vor dem Firmenstandort in Chur

Beispiel für ein dekoratives Headerbild:

Vermeiden Sie Keyword-Stuffing. Ein Alt-Text sollte beschreiben, was für Nutzer relevant ist. Das hilft Barrierefreiheit, Bildersuche und allgemeinem Verständnis.

12. SEO: Wie ein Headerbild indirekt wirkt

Ein Headerbild verbessert Ihr Ranking nicht automatisch. Es kann aber indirekt zur SEO-Qualität beitragen, wenn es Ladezeit, Nutzererfahrung, Markenwirkung und inhaltliche Klarheit unterstützt.

Aus SEO-Sicht wichtig:

• schnelle Ladezeit,
• passende Bildgrösse,
• sprechender Dateiname,
• sinnvoller Alt-Text, falls informativ,
• keine übergrossen Dateien,
• mobile Optimierung,
• keine Layout-Verschiebungen,
• klare Überschrift in HTML, nicht nur im Bild.

Wichtig: Schreiben Sie zentrale Texte wie Überschriften oder Leistungsversprechen nicht nur direkt ins Bild. Suchmaschinen, Screenreader und mobile Nutzer profitieren davon, wenn wichtige Texte als echter HTML-Text vorhanden sind.

13. GEO: Headerbilder und klare Seitenbotschaft

GEO, also Generative Engine Optimization, betrifft vor allem die Verständlichkeit von Inhalten für KI-gestützte Such- und Antwortsysteme. Ein Headerbild allein ist dafür nicht entscheidend. Wichtig ist, dass Bild, Überschrift, Einleitung und Seiteninhalt dieselbe klare Botschaft vermitteln.

Für GEO hilfreich sind:

• eindeutige Überschriften,
• kurze Einleitung mit klarem Seitenthema,
• passendes Bildmotiv,
• aussagekräftiger Alt-Text bei informativen Bildern,
• keine wichtigen Informationen nur als Bildtext,
• strukturierte Inhalte unterhalb des Headers.

Wenn Ihre Seite zum Beispiel eine Dienstleistung erklärt, sollte der sichtbare Einstieg sofort erkennen lassen, welche Dienstleistung angeboten wird, für wen sie relevant ist und was der nächste Schritt ist.

14. Typische Fehler bei Headerbildern

Viele Header-Probleme entstehen durch zu grosse Dateien, unpassende Motive oder fehlende mobile Kontrolle.

• Zu grosse Bilddatei: Verlangsamt den Seitenaufbau.
• Falscher Bildausschnitt: Wichtiges Motiv wird mobil abgeschnitten.
• Text im Bild statt HTML: Schlecht für Barrierefreiheit und SEO.
• Schlechter Kontrast: Überschrift oder Button sind kaum lesbar.
• Generisches Stockfoto: Wirkt austauschbar und wenig vertrauensbildend.
• Lazy Loading für Hero-Bild: Kann das wichtigste Bild zu spät laden.
• Keine Prüfung nach Theme-Wechsel: Headerbereiche ändern sich je nach Theme.
• Unoptimiertes PNG für Foto: Führt oft zu unnötig grossen Dateien.

Empfohlene Vorgehensweise

1. Theme-Typ prüfen: Customizer, Website-Editor oder Pagebuilder?
2. Passendes Bild auswählen: Motiv muss zur Seite und Marke passen.
3. Bild zuschneiden: Desktop und mobile Darstellung berücksichtigen.
4. Dateigrösse reduzieren: Komprimieren und unnötige Pixel vermeiden.
5. Format wählen: WebP, JPEG oder PNG je nach Einsatzzweck.
6. Bild hochladen: Über Mediathek, Customizer, Editor oder Pagebuilder.
7. Textlesbarkeit prüfen: Kontrast, Overlay und mobile Ansicht kontrollieren.
8. Performance testen: PageSpeed Insights oder Browser-Tools verwenden.
9. Alt-Text pflegen: Nur wenn das Bild informativ ist.
10. Mehrere Seiten prüfen: Besonders bei globalen Headern.

Häufige Fragen zum Headerbild in WordPress

Wo ändere ich das Headerbild in WordPress?

Bei klassischen Themes meist unter Design > Customizer > Header-Medien. Bei Block-Themes häufig unter Design > Editor. Bei Pagebuildern kann das Headerbild im jeweiligen Builder oder Theme Builder verwaltet werden.

Warum sehe ich keine Option für Header-Medien?

Nicht jedes Theme unterstützt klassische Headerbilder. Moderne Block-Themes oder Pagebuilder verwenden oft andere Methoden zur Header-Bearbeitung.

Wie gross sollte ein Headerbild sein?

Für breite Headerbilder sind häufig 1600 bis 2000 Pixel Breite sinnvoll. Entscheidend ist das konkrete Layout. Das Bild sollte nicht deutlich grösser sein, als es tatsächlich angezeigt wird.

Sollte ein Headerbild unter 200 KB sein?

Das ist ein guter Zielwert für viele Fälle, aber nicht immer zwingend. Je nach Motiv und Grösse können auch 200 bis 400 KB vertretbar sein. Wichtig ist, dass das Bild sichtbar gut aussieht und schnell lädt.

Ist WebP für Headerbilder empfehlenswert?

Ja, oft. WebP kann bei vergleichbarer Qualität kleinere Dateien ermöglichen. WordPress unterstützt WebP seit Version 5.8 nativ. ([make.wordpress.org](https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/?utm_source=chatgpt.com))

Sollte das Headerbild lazy geladen werden?

In der Regel nein, wenn es das wichtigste sichtbare Bild im oberen Bereich ist. Lazy Loading eignet sich eher für Bilder weiter unten auf der Seite.

Soll ich Text direkt ins Headerbild schreiben?

Besser nicht für wichtige Inhalte. Überschriften und zentrale Aussagen sollten als echter HTML-Text eingebunden werden, damit sie für Suchmaschinen, Screenreader und mobile Geräte besser zugänglich sind.

Warum sieht mein Headerbild mobil anders aus?

Breite Bilder werden auf kleinen Bildschirmen oft zugeschnitten oder anders skaliert. Prüfen Sie deshalb immer die mobile Ansicht und wählen Sie ein Motiv mit wichtigem Inhalt in der Bildmitte.