Substack Visuals: Ein Guide über alle Grafiken und Formate auf der Plattform
Bookmark: Alle Bildtypen, alle Maße, alle Positionen.
Bilder, Bilder und noch mehr Bilder.
Auf Substack gibt es einige davon. Und alle haben unterschiedliche Anforderungen und Größen.
Ich glaube, ich kann gar nicht mehr in Stunden ausdrücken, wie viel Zeit ich schon damit verbracht habe, immer wieder aufs Neue alle möglichen Maße zusammenzusuchen und auszuprobieren. Nur, um dann am Ende festzustellen, dass am Handy alles anders aussieht als im Browser. Und zwei Wochen später ist wieder alles hinfällig, wenn Substack mal wieder am Design herumspielt.
Trotzdem. Wer schreibt, will auch, dass es gut aussieht.
Damit dein Profil optisch etwas hermacht, deine Publikation stimmig aussieht und deine Beiträge dem Auge schmecken, nehmen wir heute alles Grafische auseinander und setzen es in einer ordentlichen Übersicht wieder zusammen.
Ein Post, den ich mir selbst bookmarke.
🔎 Springe direkt zum Thema…
Neu hier?
Moin, ich bin Nina. Vor über 14 Jahren habe ich Kochjacke gegen Tastatur getauscht, seitdem sind Texte meine wichtigste Zutat. In der Gastronomie habe ich gelernt: Handwerk und Liebe zum Detail sind der Schlüssel zu einem hervorragenden Ergebnis. Das gilt genauso beim Schreiben. Heute ist Substack mein Dinner Table und du bist eingeladen.
Teil 1: Profil-Grafiken
Auf Substack sind dein Profil und deine Publikation zwei verschiedene Dinge. Dein Profil bist du als Person, deine Publikation ist dein Newsletter als Marke. Warum das wichtig ist? Weil manche Grafiken am Profil hängen und andere an der Publikation, und die landen dann an sehr unterschiedlichen Stellen.
Profilfoto
Substack-Startseite > Profil > Profil bearbeiten
Dein Profilfoto folgt dir überall hin: Es taucht auf deiner Profilseite auf, im Feed neben jeder deiner Notes und Posts, in Kommentaren und als Autoren-Byline unter jedem Beitrag. Also: Überall dort, wo du als Person auf Substack sichtbar bist.
Weil es an vielen Stellen sehr klein dargestellt wird, sollte dein Bild klar erkennbar sein. Freisteller und neutrale Hintergründe funktionieren gut, müssen aber nicht sein.
Empfohlene Maße: Mindestens 400 × 400 px, quadratisch (Anzeige: rund)
Dateitypen: JPG, PNG, WebP, AVIF oder GIF
By the way: Weil GIF als Dateiformat erlaubt ist, kann dein Profilfoto animiert sein. Ein bewegtes Bild fällt im Notes-Feed auf, keine Frage. Ob das ein Eyecatcher oder ein Nerventöter ist, entscheidest du selbst.
Achso, noch etwas: Alle Einstellungen, die ich hier beschreibe, beziehen sich immer auf die Browser-Version von Substack. Die Handy-App ist deutlich eingeschränkter.
Headerbild
Substack-Startseite > Profil > Profil bearbeiten > Branding > Headerbild
Wer dein Substack-Profil aufruft, sieht ganz oben ein breites Header-Bild, ähnlich wie man es von Facebook oder LinkedIn kennt. Das Header‑Bild hat mittlerweile das alte Profilcover abgelöst, das mit dem letzten Design-Update weggefallen ist. Seitdem wird stattdessen die Wortmarke deiner Hauptpublikation oben im Profil angezeigt.
Heißt: Wer eine Wortmarke hochlädt, hat diesen Bereich bereits abgedeckt. Wer keine hat, sieht hier eine leere Fläche. Mehr zur Wortmarke und welche Maße sie braucht, kommt gleich in Teil 2.
Teil 2: Publikations-Grafiken
Während dein Profil an dir als Person hängt, ist die Publikation dein Newsletter als eigenständige Marke. Diese Grafiken erscheinen auf deiner Substack-Website, in deinen E-Mails und überall dort, wo dein Newsletter als Brand auftritt.
Logo
Das Logo ist der visuelle Anker deiner Publikation. Es taucht (je nach Einstellung) in der Navigation deiner Website auf, als Favicon im Browser-Tab, als Icon im Tab Abonnements, in der Chat-Übersicht und überall auf der Plattform, wo dein Publikationsname erscheint.
Weil es oft sehr klein dargestellt wird, gilt eine einfache Regel: Je weniger Details, desto besser. Feine Linien, kleiner Text oder komplexe Formen funktionieren im Miniformat eher nicht.
Empfohlene Maße: Mindestens 256 × 256 px, quadratisch
Dateitypen: JPG, PNG, WebP, AVIF oder GIF
Auch hier ist GIF erlaubt. Ein animiertes Logo ist selten, fällt aber auf. Gleiches Prinzip wie beim Profilfoto — kann funktionieren, kann aber auch nerven.
Wortmarke
Dashboard > Website-Editor > Kopfzeile > Wortmarke
Die Wortmarke ist der ausgeschriebene Name deiner Publikation als gestaltetes Bild — also dein Publikationstitel in einer bestimmten Schrift, einem bestimmten Layout, mit oder ohne grafische Elemente. Sie ersetzt auf deiner Website den schlichten Textschriftzug in der Navigation und gibt deiner Publikation ein eigenständiges visuelles Gesicht.
Sie taucht vor allem an diesen zwei Stellen auf:
In der Navigationsleiste deiner Substack-Website
Als Header-Bild oben auf deiner Profilseite
Wer die Wortmarke einmal sauber gestaltet, hat damit gleich zwei Baustellen auf einmal abgehakt.
Wichtig beim Hochladen: Erst im Website-Editor prüfen, wie die Wortmarke in der Navigation aussieht, bevor du sie final speicherst. Das Verhältnis ist sehr breit, und was in Canva & Co. gut aussieht, kann bei Substack anders wirken.
Empfohlene Maße: Mindestens 1344 × 256 px, Verhältnis 21:4
Dateitypen: JPG oder PNG
Abonnieren-Block
Dashboard > Website-Editor > Startseite > Abonnieren-Block
Mit dem Abonnieren-Block gibt es noch eine weitere Möglichkeit, eine Grafik auf der Publikations-Website einzusetzen. Es geht um den (optionalen) Bereich auf der Startseite, wo – farblich abgesetzt oder eben mit einer Grafik hinterlegt – ein Abonnieren-Button eingefügt werden kann, der je nach Abonnentenstatus unterschiedliche Texte anzeigt.
Bisher habe ich noch niemanden gesehen, der hier tatsächlich ein Bild benutzt. Der Vollständigkeit halber möchte ich die Option aber erwähnen.
Empfohlene Maße: Ein Seitenverhältnis von 4:1 wird empfohlen, zu den Maßen habe ich keine Angaben gefunden, daher orientiere ich mich an denen des E-Mail-Banners: mind. 1100 × 220 px
Dateitypen: JPG oder PNG funktionieren beide.
Willkommensseite (Cover Photo)
Dashboard > Website-Editor > Willkommensseite > Bild
Was in Englischen Publikationen häufig als Cover Photo bezeichnet wird, ist das Bild, das oben auf deiner Willkommensseite angezeigt wird, – direkt über deinem Publikationsnamen und der Beschreibung.
Die Welcome Page ist das Erste, was neue Besucher sehen, wenn sie deine Publikations-URL auf direktem Weg aufrufen. Wer über einen einzelnen Beitrag oder einen geteilten Link landet, kommt an ihr vorbei. Trotzdem ist sie eine der wenigen Stellen auf Substack, wo du mit einem Bild bewusst Stimmung setzen kannst.
Wenn du kein Cover Photo hochlädst, wird an dieser Stelle das Logo angezeigt. Im Website-Editor kannst du zudem einstellen, ob Publikationsname und -Beschreibung hier angezeigt werden sollen.
Empfohlene Maße: Mindestens 600 × 600 px
Dateitypen: JPG, PNG, WebP oder AVIF
Wenn dich interessiert, wie andere ihre Willkommensseite gestalten, findest du sie immer unter dieser Adresse:
So sieht meine aktuell aus:
E-Mail-Banner
Dashboard > Einstellungen > E-Mails > E-Mail-Header und -Footer > Bearbeiten
Alternativ: aus dem Newsletter-Editor heraus oben unter dem Menü unter E-Mail Header / -Footer.
Der E-Mail-Banner erscheint ganz oben in jeder E-Mail, die Substack in deinem Namen verschickt, direkt über dem Titel des jeweiligen Beitrags. Er ist das Erste, was deine Leser sehen, wenn sie deine E-Mail öffnen.
Ob ein Banner sinnvoll ist, hängt vom Stil deines Newsletters ab. Wer einen persönlichen, briefartigen Ton pflegt, kann ihn weglassen. Wer seiner Publikation ein klares Markengesicht geben will, baut ihn ein. Beides funktioniert.
Empfohlene Maße: 1100 × 220 px, darf auch höher sein
Dateitypen: JPG geht, aber PNG mit transparentem Hintergrund wird von Substack empfohlen
Teil 3: Post-Grafiken
Während Profil- und Publikationsgrafiken einmalig eingerichtet werden, entscheidest du bei Post-Grafiken pro Beitrag. Sie bestimmen, wie dein Artikel im Feed, in der Inbox und auf Social Media aussieht.
Social-Media-Vorschau
Newsletter-Editor > Einstellungen > Social-Media-Vorschau
Das Vorschaubild für Social Media ist die Grafik, die Substack automatisch aus deinem Post zieht, wenn du sie nicht gesondert einstellst. In der Regel wird das erste Bild aus dem Post dafür genommen.
Der Name ist etwas verwirrend. Das Social-Media-Vorschaubild ist dein Thumbnail, das im gesamten Substack-Universum für deinen Post verwendet – zum Beispiel im Feed, sobald du den Beitrag veröffentlichst, und auf deiner Publikations-Website. Ebenso erscheint dieses Bild auch, wenn du den Link zum Post auf anderen Social-Media-Kanälen teilst.
Und weil diese Grafik so wichtig ist, wollen wir natürlich nichts dem Zufall überlassen. Ein Bild, das zufällig aus unseren Posts gezogen wird, ist selten die schönste Option. Triff zumindest selbst die Entscheidung, welches Bild verwendet wird, oder investiere etwas Zeit und gestalte eines. Mit Canva, KI & Co. hat ja heute jeder einen Grafikdesign-Praktikanten in der Hosentasche.
Ein wichtiger Hinweis zum Bildausschnitt: Thumbnails werden auf Mobilgeräten und verschiedenen Plattformen anders beschnitten. Wichtige Bildelemente und Text sollten deshalb mittig platziert werden, nicht am Rand. So wird es auch von Substack auf den offiziellen Hilfeseiten empfohlen.
Wer häufiger Bilder mit Gesichtern verwendet, kann im Website-Editor außerdem Smart Cropping bzw. Intelligentes Zuschneiden aktivieren. Substack erkennt dann automatisch das Hauptmotiv und schneidet entsprechend zu. Ehrlich gesagt klappt das aber mal mehr und mal weniger gut.
Dadurch, dass Substack diese Bilder an allen möglichen Stellen und in allen möglichen Größen einsetzt – von Website Grid View bis Handy-Feed – und die Grafiken dabei jeweils anders zuschneidet, gibt es hier kein One Size Fits All. Hier muss man sich eher mit einem Kompromiss abfinden.
Empfohlene Maße: 1456 × 1048 px, Verhältnis 14:10, Minimum 420 × 300 px
Dateitypen: JPG, PNG, WebP, AVIF oder GIF
In-Post-Bilder
In-Post-Bilder erscheinen direkt im Fließtext deines Beitrags, sowohl in der Web-Ansicht als auch in der E-Mail. Was du im Editor siehst, ist also in beiden Fällen dasselbe.
Substack-Artikel sind 730 px breit. Größere Bilder werden automatisch auf diese Breite skaliert, du musst dich also nicht exakt daran halten. Was du im Auge behalten solltest: Die maximale Höhe entspricht der Breite, also Verhältnis 1:1. Alles was höher ist, wird automatisch beschnitten.
Die Bildbreite lässt sich übrigens direkt im Draft anpassen, ohne externes Tool. Einfach auf das Bild klicken und an den Eckpunkten ziehen.
Orientierungswert: 730 px Breite, maximales Verhältnis 1:1
Dateitypen: JPG, PNG, WebP, AVIF oder GIF
Noch ein allgemeiner Hinweis, der für alle Bilder gilt: Unter 10 MB bleiben. Schwere Dateien verlangsamen den Ladevorgang, besonders in der Inbox. Und denk auch an Captions und Alternativtexte für die Barrierefreiheit.
Alle Maße auf einen Blick
Alle Angaben in diesem Artikel basieren auf den offiziellen Substack-Hilfeseiten sowie einer Handvoll englischsprachiger Artikel, mit denen ich meine eigenen Notizen abgeglichen habe. Weil Substack sein Design aber regelmäßig anpasst, können sich einzelne Werte ändern. Ich halte diesen Artikel aktuell, so gut es geht.
Für alle, die nicht jedes Mal den ganzen Artikel durchlesen wollen: Hier sind alle Bildtypen, Maße und Dateiformate noch einmal in einer kompakten Übersicht. PNG ist in den meisten Fällen der sicherste Dateityp, weil er überall funktioniert und transparente Hintergründe unterstützt.
TELL ME: Welche Grafik auf deiner Publikation hast du zuletzt geändert?
Bevor du gehst…
Startest du gerade erst deine Reise auf Substack? Dann ist das hier für dich. 👇
Im Substack-Starterkit zeige ich dir Schritt für Schritt, wie du deinen Newsletter aufsetzt, deine ersten Subscriber gewinnst und von Anfang an die richtigen Weichen stellst. Kein Rätselraten, kein Technik-Stress, keine stundenlange Recherche.
Das" blöde" an deinen building Artikeln: ich habe danach immer viel zu tun
Das Gute: ich habe eine Anleitung und weiß was zu tun ist 😊
Vielen Dank dafür 🪷
Danke Dir habe schon einiges umgesetzt, anderes muss ich noch finden, jedenfalls in der App, vielleicht sieht es am Desktop änderst aus. Jedenfalls ein gute Anleitung ganz im KLARTEXT-Stil 🤣🤣🤣. Ist aber von Nina Klose Danke Dir dafür