Featured Images richtig positionieren

Wie große Bilder oben auf Artikeln nicht nur besser aussehen, sondern auch die Leserquote erhöhen. Mit praktischen Größenangaben.

7 min Anfänger März 2026

Laptop-Bildschirm zeigt Blog-Layout mit Featured-Image und Leseanzeige oben

Warum das erste Bild so wichtig ist

Das Featured Image ist dein erstes Hallo zum Leser. Es’s nicht nur eine Deko — es’s die Einladung, die entscheidet, ob jemand weiterliest oder weggeht. Studien zeigen: Artikel mit großem Bild oben werden um etwa 30 Prozent häufiger geklickt und gelesen. Das ist kein Zufall.

Wir zeigen dir die genauen Größen, Abstände und Platzierungen, die funktionieren. Nicht irgendwelche Best Practices — sondern konkrete Zahlen, die du direkt umsetzen kannst.

Desktop-Ansicht eines Blogartikels mit großem Featured Image und Textblock darunter

Die richtigen Größenangaben

Zu klein wirkt das Bild verloren. Zu groß und der Text verschwindet. Es gibt eine goldene Mitte.

Desktop-Breite

1200px–1400px optimal

Passt perfekt in die meisten Content-Wrapper. Auf 1920px-Monitoren gibt’s noch Whitespace, aber das ist okay.

Höhe

400px–600px

600px ist das Maximum. Danach scrollt der User zu lange, bis er Text sieht. 450px ist unser Sweet Spot.

Mobile

Full Width, 250px–300px Höhe

Nicht kürzer als 250px — wirkt sonst gequetscht. Bei 300px hat man noch eine gute Bildwirkung im Phone.

Grafische Darstellung von Blog-Bild-Dimensionen: 1200x450px auf Desktop, vollbreit auf Mobile

Beispiel eines Artikels mit Bild unmittelbar unter der Headline, guter Abstand zum Text

Wo gehört das Bild hin?

Immer direkt unter der Headline. Punkt. Keine Ausnahmen. Der Grund: Der Blick springt zuerst auf den Titel, dann sofort auf das nächste visuelle Element — das sollte dein Bild sein.

Zwischen Headline und Bild brauchst du maximal 10–15px Abstand. Dann folgt das Bild, und darunter kommt der Lead-Paragraph mit mindestens 20–30px Abstand zum Bild. Das schafft eine klare Struktur.

Wichtig: Das Bild sollte nicht in einer Sidebar oder rechts neben Text stehen. Warum? Weil Mobile-User dein Layout anders sehen. Das Bild wandert nach unten und der Text ist plötzlich oben — unpraktisch.

Best Practices, die wirklich funktionieren

1. Relevantes Bild wählen

Das Bild sollte den Artikel visuell zusammenfassen. Generische Stock-Fotos bringen nix. Wenn du über “Blog-Layout” schreibst, brauchst du ein Bild, das das zeigt — einen echten Blog mit echtem Layout. Nicht eine Person, die in den Computer starrt.

Beispiel eines relevanten Featured Images für einen Blog-Artikel über Web-Design

Vergleich: Schmales Bild wirkt unwichtig, breites Bild wirkt professionell

2. Nutze die volle Breite

Das Bild sollte die komplette verfügbare Breite deines Content-Bereichs nutzen. Wenn dein Container 1200px breit ist, sollte das Bild auch 1200px sein. Ein 800px-Bild in einem 1200px-Container sieht dünn aus — als hätte der Autor nicht mitgedacht.

3. Padding und Abstände

Rund um dein Bild brauchst du Luft. 20–40px Abstand zum Text darunter, 10–15px zum Titel oben. Das macht das Bild zur Komponente statt zu etwas, das irgendwo reingeqetscht wurde. Auf Mobile kannst du großzügiger sein — da haben die Nutzer eh weniger Bildschirm.

Beispiel korrekter Abstände: Featured Image mit Whitespace oben und unten

“Ein großes, relevantes Bild oben auf einem Artikel erhöht nicht nur die Click-Through-Rate — es erhöht auch die Zeit, die der User auf der Seite verbringt. Das Bild schafft sofort Kontext. Der Leser weiß: Hier geht’s um das, was ich sehen kann.”
— Erkenntnisse aus Content-Performance-Daten, 2025

Responsive Design: Featured Image passt sich perfekt auf allen Bildschirmgrößen an

Responsive Bilder — Das Pflichtprogramm

Dein Bild muss auf allen Geräten funktionieren. Das heißt nicht, dass du einfach die gleiche Größe verwendest. Auf Desktop: 1200x450px. Auf Tablet: 100% Breite, 350px Höhe. Auf Mobile: 100% Breite, 250px Höhe.

Moderne HTML/CSS macht das mit einer Zeile: max-width: 100%; height: auto; Das’s alles. Dann skaliert das Bild automatisch.

Wichtig: Achte auf das Seitenverhältnis. 16:9 ist sicher, 3:2 auch. Quadratische Bilder (1:1) wirken auf Desktop merkwürdig. Und noch wichtiger: Nutze object-fit: cover; damit das Bild nicht verzerrt wird.

Zusammengefasst

Featured Images sind kein Luxus — sie’re eine Notwendigkeit. Nutze die richtigen Größen (1200–1400px breit, 450px hoch), platziere das Bild direkt unter dem Titel und achte auf gutes Spacing. Responsive? Nicht vergessen. Ein gutes Featured Image kostet dich 5 Minuten Zeit und bringt dir spürbar mehr Leser. Das ist ein gutes Investment.

Hinweis

Die in diesem Artikel genannten Größenangaben und Best Practices basieren auf häufig verwendeten Standards und Best Practices im Web-Design. Die optimalen Dimensionen können je nach deinem spezifischen Design, deiner Zielgruppe und deinen Zielen variieren. Wir empfehlen, deine Metriken zu überwachen und deine Featured Images entsprechend anzupassen. Nicht jede Website ist gleich — teste, was für dich funktioniert.