Ein Bild kann auf deiner Seite perfekt aussehen und trotzdem in sozialen Netzwerken oder in der Suche versagen. Der Grund ist einfach: jede Platzierung hat eine andere Box. Manche sind breit, manche quadratisch, und viele schneiden das Zentrum ohne Vorwarnung ab.
Die meisten Plattformen zeigen dein Bild nicht vollständig. Sie skalieren es, schneiden es auf ein festes Seitenverhältnis zu und fügen manchmal Abstand, Overlays oder abgerundete Ecken hinzu. Ein breites Hero-Banner kann zu einem unordentlichen Thumbnail werden, bei dem das Motiv abgeschnitten ist und Text unlesbar wird.
Dein „Post-Bild“ erscheint normalerweise an mehreren Stellen:
Selbst innerhalb sozialer Netzwerke unterscheiden sich die Regeln. Open-Graph-Vorschauen tendieren zu einem breiten Rechteck, während andere Platzierungen ein quadratisches oder ein kürzeres Bild zeigen können. Sitzt dein Motiv an der Seite, kann der automatische Zuschnitt es halbiert anzeigen.
Stell dir ein Hero-Bild vor: eine Person links, eine kurze Überschrift rechts und ein sauberer Hintergrund. Vollformat funktioniert es. Als kleines quadratisches Thumbnail wird aus der Person nur noch eine Schulter, die Überschrift verschwindet, und das Bild wird zu einem unscharfen Farbfleck. Leute scrollen weiter, weil sie nicht erkennen können, worum es geht.
Deshalb sind Bildvarianten wichtig. „Varianten“ bedeutet eine kleine Auswahl Versionen desselben Motivs, jede in der passenden Größe und mit passendem Zuschnitt für eine bestimmte Verwendung. Das Ziel ist nicht, dutzende Dateien zu erstellen. Es geht darum, das zu schützen, was das Bild funktionieren lässt:
Wenn du Varianten im Voraus planst, sparst du dir später Ärger mit überraschenden Zuschnitten, und jede Platzierung hat eine faire Chance, den Klick zu bekommen.
Ein Bild ist nicht nur Dekoration. Es ist Vorschau, Thumbnail, Feature-Card und manchmal Lesehilfe zugleich. Jede Stelle hat andere Zuschnitte, Overlays und Anzeigegrößen.
Open-Graph-Vorschauen sind das, was Leute sehen, wenn deine Seite in Messaging-Apps und vielen Social-Feeds geteilt wird. Die Vorschaubox erzwingt oft ein festes Seitenverhältnis, also schneiden Plattformen dein Bild, wenn es zu hoch oder zu breit ist.
Gestalte für einen sauberen Mittelbereich: ein klares Motiv, optional kurzer Text und genug Abstand, damit kleine Randabschitte das wichtigste Detail nicht entfernen.
Twitter/X-Layouts können Teile des Bildes abdecken, besonders in der Nähe der Ränder. Eckdetails verschwinden schnell und dünne Linien am unteren Rand sehen auf Mobilgeräten schnell unordentlich aus.
Denke in Begriffen einer „Safe-Zone“ statt eines perfekten Rand-zu-Rand-Zuschnitts. Halte Gesichter, Produkte und wichtigen Text weg von den Ecken und näher zur Mitte.
Such-Thumbnails sind klein und leicht zu übersehen. Sie belohnen einfache Formen, starken Kontrast und ein deutliches Motiv. Ein aufwendiges Hero-Banner kann auf deiner Seite großartig aussehen, als Thumbnail aber visuelles Rauschen werden.
Ein Thumbnail-Zuschnitt funktioniert am besten, wenn er auf Wiedererkennung statt auf Details baut. Wenn man es nicht in einer Sekunde versteht, ist es zu breit, zu überladen oder zu textlastig.
Inline-Bilder sollten ihren Platz verdienen. Nutze sie, um zu erklären, zu vergleichen oder ein Beispiel zu zeigen, nicht nur um Leerraum zu füllen.
Eine einfache Regel: Wenn das Entfernen des Bildes das Verständnis des Lesers nicht verändert, gehört es wahrscheinlich nicht hinein.
Dein Featured Image ist der erste Eindruck in Vorschauen und Thumbnails. Inline-Bilder dienen der Klarheit beim Lesen. Sie benötigen oft unterschiedliche Zuschnitte: Featured Images sollten kräftig und einfach sein, Inline-Bilder dürfen detailreicher und enger am Inhalt orientiert sein.
Bevor du etwas exportierst, lege dein Standard-Set fest. Das spart Zeit und sorgt für Konsistenz bei Open Graph, Twitter/X, Suchvorschauen und deinen Seiten.
Beginne mit einer Master-Quelldatei, die du unberührt lässt. Mach sie groß genug, damit Zuschnitte ohne Weichzeichnung möglich sind. Eine praktische Basis ist ein Master, der an der kürzesten Seite mindestens 2000 px hat.
Wähle anschließend eine kleine Anzahl von Seitenverhältnissen, die du immer exportierst. Verfolge nicht jede Spezial-Regel einer Plattform. Ein verlässliches Set deckt in der Regel ab:
Dann entscheide, wie du den Master für jedes Verhältnis anpasst:
Wenn deine Bilder Text enthalten, ist „Neu komponieren“ oft die einzige Methode, die über verschiedene Größen funktioniert.
Schließlich, lege ein Namensschema fest, dem du ohne Nachdenken folgen kannst. Halte es konsistent, damit dein CMS, Template oder Workflow zuverlässig das richtige Asset wählt und du die Performance pro Variante später vergleichen kannst.
Beginne mit einem Masterbild, das so groß und sauber wie möglich ist. Kläre vor dem Skalieren, worum es im Bild wirklich geht: das Hauptmotiv, wichtigen Text (falls vorhanden) und die Stimmung. Wenn das Motiv nicht auf einen Blick klar ist, wird auch Skalieren das nicht lösen.
Mach zuerst die breite Social-Variante. Hier zählen Open Graph-Bildgrößen am meisten, weil Plattformen unterschiedlich zuschneiden und Vorschauen oft kleiner angezeigt werden als erwartet. Halte das Motiv zentriert und lass eine Safe-Zone an den Rändern.
Erstelle die Twitter/X-Version. Teste sie klein auf dem Bildschirm. Sitzt Text oder ein wichtiges Detail in der Nähe der unteren Ecken, verschiebe es nach innen oder entferne es.
Baue ein quadratisches Thumbnail. Thumbnails bestrafen überladene Hintergründe. Schneide enger, vergrößere das Motiv und entferne dünne Details. Wenn du Text verwenden musst, beschränke dich auf wenige Worte.
Exportiere das In-Article-Bild. Dieses sollte den Lesefluss unterstützen. Halte die Breite angenehm, vermeide winzige eingebrannte Bildunterschriften und sorge dafür, dass es sich nicht wie eine Anzeige zwischen Absätzen anfühlt.
Prüfe die Exporte anschließend in realen Größen: Phone-Feed, Desktop-Vorschau und in deiner Artikelspalte. Die meisten „sah in Photoshop gut aus“-Probleme fallen sofort auf, wenn du das tust.
Beim Zuschnitt verlieren gute Bilder oft Klicks. Ein Zuschnitt, der vollformat stimmig wirkt, kann als Thumbnail verwirren. Das Ziel ist klar: auf einen Blick sollten Leute wissen, was sie sehen.
Starte bei der kleinsten Platzierung, die dir wichtig ist (oft ein SERP-Thumbnail oder eine kleine Social-Vorschau). Wenn das Motiv dort nicht sofort erkennbar ist, ist der Zuschnitt zu breit oder das Motiv zu klein.
Plattformen schneiden unvorhersehbar, und manche fügen UI-Overlays hinzu. Gib dir Rand, damit Stirnen, Produktkanten oder Schlüsselobjekte nicht abgeschnitten werden.
Ein praktisches Vorgehen, das auf vielen Platzierungen funktioniert:
Kleiner Text in Bildern ist eine häufige Falle. Er kann auf deinem Monitor lesbar sein und nach Skalierung und Kompression zu unleserlichem Rauschen werden.
Wenn du Text nutzt, halte ihn kurz und fett, mit starkem Kontrast und ausreichendem Abstand. Exportiere nach Möglichkeit auch eine textfreie Variante für kleine Platzierungen.
Unruhige Texturen (Gras, Glitzer, feine Muster) zerfallen bei Kompression oft zu klobigen Artefakten. Saubere Hintergründe halten Kanten scharf und das Motiv klarer.
Beispiel: Du hast ein Hero-Foto einer Person, die ein Smartphone mit Dashboard hält. Für ein Thumbnail schneide dichter auf Gesicht und Telefon, vereinfache den Hintergrund und verlasse dich nicht auf winzige Details auf dem Bildschirm. Wenn du ein Label brauchst, reserviere es für größere Social-Karten und halte es kurz.
Dasselbe Bild kann auf deiner Seite scharf aussehen und beim Teilen verschwommen oder schwer erscheinen. Formate, Kompression und einfache Metadaten entscheiden oft, ob eine Vorschau klickt oder ignoriert wird.
JPEG ist in der Regel am besten für Fotos und Verläufe, weil es Dateien klein hält. PNG ist besser für Grafiken mit Text, Logos oder flachen Farben, aber die Dateigrößen können schnell steigen. WebP und AVIF liefern oft bessere Qualität bei kleineren Größen, aber ein Fallback ist sinnvoll für Orte ohne Unterstützung.
Kompression ist nicht universell. Ein kleines Thumbnail kann aggressive Kompression vertragen, weil es klein angezeigt wird. Eine große Social-Vorschau braucht mehr Sorgfalt, da Artefakte um Gesichter und Text auffallen.
Als einfache Faustregel, komprimiere nach der kleinsten realen Ansicht:
Konsistenz schafft Wiedererkennung. Halte Farbe, Kontrast und allgemeinen Stil in Posts ähnlich, damit deine Bilder in Feeds und Listen zusammengehören.
Auch die Basics sauber zu halten hilft:
Wenn das konsistent ist, verbringst du weniger Zeit beim Suchen von Assets und mehr Zeit damit, zu testen, was die CTR wirklich verbessert.
Der größte Fehler ist, ein „Master-Bild“ zu erstellen und jede Plattform automatisch zuschneiden zu lassen. Was als breiter Blog-Header funktioniert, kann im quadratischen Thumbnail zufällig zentriert oder im Social-Preview abgeschnitten werden.
Over-Design ist ein weiterer stiller Killer. Große Logos, lange Überschriften und winzige Badges sehen auf dem Desktop gut aus, werden auf dem Telefon aber zu einem unscharfen Brei.
Qualität leidet auch, wenn du zu klein exportierst und später hochskalierst. Hochskalieren macht Kanten weich und Gesichter matschig. Starte mit einem großen Master und skaliere pro Variante herunter.
Stil-Inkonsistenzen sind ebenfalls wichtig. Wenn deine Open-Graph-Vorschau hell und sauber ist, aber dein Twitter/X-Zuschnitt dunkler mit anderen Farben, wirkt das uneinheitlich. Halte Fotobehandlung und Layout-Regeln über dein Set hinweg gleich.
Und überspringe nie die mobilen Checks. Ein Bild, das auf dem Desktop ausgewogen wirkt, kann auf Mobilgeräten wichtige Details hinter UI-Overlays verbergen.
Kurz bevor du auf Veröffentlichen klickst:
Mach einen finalen Reality-Check: Öffne den Artikel auf Handy und Desktop, scrolle einmal und achte auf Unstimmigkeiten. Wenn das Bild aus den falschen Gründen auffällt (zu hell, zu hoch, unlesbar, winziges Motiv), passe zuerst den Zuschnitt an, dann die Kompression.
Stell dir einen Beitrag vor, der ein neues Feature ankündigt. Dein Hero zeigt eine Person links mit einem Laptop, rechts ein Produktscreenshot. Vollbreite sieht es großartig aus. Wird es überall wiederverwendet, zerbricht es.
Beginne mit einem sauberen Master (hochauflösend, kein eingebackener Text). Erstelle dann vier Varianten mit gezielten Zuschnitten:
Beim breiten Open-Graph-Zuschnitt: zentriere nicht standardmäßig den Screenshot. Halte das Gesicht der Person und den wichtigen Produktbereich in der Safe-Zone (etwa die mittleren 70 %). Ist der Laptopbildschirm geneigt, schneide enger, sodass das Haupt-UI-Feld in einer kleinen Vorschau noch lesbar bleibt.
Beim quadratischen Thumbnail lass winzige UI-Details weg. Thumbnails leben von Wiedererkennung, nicht Erklärung. Schneide auf das Gesicht plus eine markante Produktform (z. B. ein Diagramm oder eine Überschriftenfläche). Wenn der Screenshot zentral ist, erwäge einen unscharfen Foto-Hintergrund mit einem scharfen UI-Block.
Für die In-Article-Version gilt: Klarheit vor Drama. Wähle einen ruhigeren Zuschnitt, reduziere Hintergrundunruhe und halte die Helligkeit so, dass der Screenshot auf einer weißen Seite lesbar bleibt.
Behandle Bildvarianten wie Überschriften. Messen, anpassen und behalten, was funktioniert.
Fange mit Seiten an, die bereits Impressionen, aber wenige Klicks haben. Wenn eine Seite rankt, aber geringe CTR hat, liegt das oft an einer zu dunklen, zu überladenen oder ungünstig zugeschnittenen Vorschau.
Halte Tests klein. Eine Änderung nach der anderen reicht zum Lernen:
Wenn du in großem Maßstab veröffentlichst, hilft es, das Variantenset zu standardisieren und jedes Mal gleich zu generieren. Ein Tool wie GENERATED kann wiederholbare Variantenerstellung (inklusive Skalierung und Feinschliff) übernehmen und zeigen, welche Visuals unterperformen, sodass du weißt, wo du als Nächstes testen solltest.
Erstelle eine kleine Auswahl absichtlich gewählter Varianten. Ein praktischer Standard ist eine breite Social-Vorschau für Open Graph, eine 16:9-Option, ein quadratisches Thumbnail, ein höheres 4:5-Zuschnitt für mobile Feeds und eine In-Article-Größe, die zu deiner Inhalts-Spaltenbreite passt.
Beginne mit deiner kleinsten echten Platzierung (häufig ein SERP-Thumbnail oder eine kleine Feed-Vorschau) und stelle sicher, dass das Motiv dort sofort erkennbar ist. Baue dann den breiten Open-Graph-Zuschnitt und halte wichtige Details innerhalb einer zentralen Safe-Zone, damit unvorhersehbare Platform-Crops sie nicht abschneiden.
Verwende ein großes, unverändertes Master-Bild, sodass jede Variante ein Herunterskalieren ist, kein Hochskalieren. Eine solide Basis ist mindestens 2000 px an der kürzesten Seite, damit du verschiedene Seitenverhältnisse zuschneiden kannst, ohne dass das Bild weich wird.
Open-Graph-Vorschauen bevorzugen oft ein breites Rechteck, und Plattformen können dein Bild an ihr festes Verhältnis anpassen. Designe um einen klaren Mittelbereich, halte wichtige Elemente weg von den Rändern und verlasse dich nicht auf winzige Details, die die Kompression nicht überstehen.
Gehe davon aus, dass Teile des Bildes in der Nähe der Ränder von UI-Elementen überdeckt oder auf verschiedenen Geräten unterschiedlich beschnitten werden können. Halte Gesichter, Logos und Text weg von den Ecken und teste die Karte in kleinen Größen, damit du Probleme erkennst, die in der Vollansicht nicht sichtbar sind.
Mach das Thumbnail zur Frage der Wiedererkennung, nicht der Details. Schneide enger zu, vergrößere das Hauptmotiv, vereinfache den Hintergrund und vermeide lange Texte; wenn du Worte brauchst, dann nur ein paar fette mit hohem Kontrast.
Ja. Besonders wenn du Texte im Bild verwendest. Eine textfreie Variante ist sicherer für Thumbnails und unvorhersehbare Zuschnitte, während eine Text-Version für größere Social-Karten funktioniert, wo der Text lesbar bleibt.
Schneide, wenn du Platz hast und das Motiv zentriert bleibt, ohne Bedeutung zu verlieren. Pad, wenn nichts abgeschnitten werden darf (z. B. ein Logo oder enge Produktaufnahmen). Re-komponiere, wenn du mehrere Elemente oder Text hast, die über verschiedene Größen hinweg lesbar bleiben müssen.
Verwende JPEG für Fotos und Verläufe, um Dateigrößen gering zu halten. PNG ist besser für Grafiken mit Text, Logos oder flachen Farben, aber die Dateien werden schnell größer. WebP und AVIF liefern oft bessere Qualität bei kleineren Größen, doch ein kompatibler Fallback ist weiterhin sinnvoll.
Prüfe das Bild in echten Größen auf dem Telefon-Feed, in der Desktop-Vorschau und innerhalb deines tatsächlichen Artikel-Layouts. Wenn das Motiv als Thumbnail nicht klar erkennbar ist, wichtige Elemente zu nah an den Rändern liegen oder Kompression sichtbare Blockartefakte erzeugt, korrigiere zuerst den Zuschnitt und passe dann die Kompression an.
