Markdown zu Bild für Social Media: Größen, Themes und ein wiederholbarer Workflow
Ein langer technischer Beitrag scheitert oft daran, dass der Leser durch eine Textwand scrollen muss. Verwandelst du den schärfsten Teil davon in ein Bild, bekommt diese Aussage eine zweite Chance: Sie wird zu einer Karte, die man lesen, speichern und weiterleiten kann. Die Frage ist, wie man das konstant hinbekommt, ohne jedes Mal ein Designwerkzeug zu öffnen.
Der Workflow in diesem Leitfaden beginnt mit einer Markdown-Quelle und erzeugt ein veröffentlichungsfertiges Bild. Du wählst eine Leinwand, ein lesbares Theme, schreibst Alt-Text und verwendest denselben Prozess für den nächsten Beitrag. Die Beispiele verwenden MarkdownToImage und wurden am 3. August 2026 gegen die API-Dokumentation geprüft.
Ein Bild zahlt sich aus, wenn die Nachricht auf einen Bildschirm passt, von einer Formatierung profitiert, die ein Textbeitrag plattmacht, oder als eigenständige Datei geteilt werden muss. Code, Tabellen und Checklisten sind die klarsten Fälle: Sie bleiben in einem Bild lesbar und verlieren diese Lesbarkeit in einem Klartextbeitrag.
Klartext ist meist die bessere Wahl, wenn der Inhalt lang ist, bearbeitet werden muss oder durchsuchbar und kopierbar sein muss. Verwandle keinen ganzen Artikel in ein Bild. Verwandle den Teil, der einen zweiten Blick verdient, und verlinke zurück zum vollständigen Beitrag.
Behalte die Quellnachricht in Markdown und rendere Varianten für verschiedene Kanäle, anstatt jedes Bild von Hand zu zeichnen. Eine Quelle kann zu einer breiten LinkedIn-Karte, einem quadratischen Beitrag und einem schmalen Update mit verschiedenen Leinwänden und Themes werden.
Das lohnt sich, weil die Alternative schlecht skaliert. Drei separate Bilddateien zu bearbeiten bedeutet drei Gelegenheiten für einen Tippfehler, und eine Textänderung sechs Wochen später bedeutet, alle drei zu finden und neu zu machen. Wenn die Quelle Markdown ist, änderst du eine Zeile und exportierst neu.
Bewahre diese Quelle neben deinen anderen Inhalten auf, nicht in einem Designwerkzeug. Eine kurze .md-Datei im selben Repository wie deine Dokumentation reicht aus und gibt dir kostenlos eine Versionshistorie: Wenn jemand fragt, warum die Karte letzten Monat etwas anderes sagte, liegt die Antwort im Commit-Log.
Deshalb beginnt der Workflow mit einem kleinen Markdown-Block. Halte die Nachricht kurz, verwende eine Überschrift und lass den Renderer die Typografie handhaben.
Dieses Markdown ist klein genug, um die Typografie zu überprüfen, bevor du echten Inhalt verwendest:
# Deployment complete
Environment: **production**
- [x] Database migrated
- [x] Health checks passing
- [ ] Post-deploy review
`status: healthy`
Füge es in MarkdownToImage ein, wähle eine 1200-Pixel-breite Leinwand und exportiere. Die gerenderte Karte ist die Basislinie für jede andere Variante.
Verwende eine absichtlich kleine Testdatei wie diese für deinen ersten Render, anstatt echten Inhalt. Sie trainiert die Elemente, die am häufigsten brechen — fetter Text, Aufgabenlisten, Inline-Code — während sie kurz genug bleibt, damit du ein Abstands- oder Kontrastproblem auf einen Blick erkennst. Sobald die Testdatei so rendert, wie du es willst, tausche die echte Nachricht ein und behalte dieselben Einstellungen.
Der Generator bietet drei Steuerelemente, die die Ausgabe formen: Breite, Qualität und das Ausgabeformat.
width legt die Renderbreite in Pixeln fest, von 200 bis 2560, mit einem Standard von 800. quality ist der Geräteskalierungsfaktor von 1.0 bis 3.0, mit einem Standard von 2.0. Die effektive Pixelhöhe folgt dem Seitenverhältnis deines Inhalts, sodass eine 1200 Pixel breite Karte scharfen Text auf den meisten Social-Media-Feeds beibehält.
Eine 1200-Pixel-Leinwand ist ein sicherer Ausgangspunkt: Sie ist breit genug, um auf hochauflösenden Displays scharf zu bleiben, und schmal genug, um die Zeilenlänge lesbar zu halten. Für einen LinkedIn-Beitrag mit Link empfiehlt die Plattform ein Verhältnis von 1,91:1, etwa 1200 x 627 Pixel, und Bilder breiter als 200 Pixel. Halte das Quell-Markdown schmal, damit der Renderer keine zu breite Tabelle erstellt.
Der format-Parameter unterstützt PNG, JPEG, WebP oder PDF. PNG hält Code und Diagramme scharf; verwende es für Social-Media-Karten.
Wähle ein Theme mit genug Kontrast für den Feed, nicht nur für einen hellen Editor. Helle Themes lesen sich gut auf weißen Apps; dunkle Themes stechen in Dark-Mode-Feeds heraus. Das Theme beeinflusst die gesamte Karte, während der Code-Stil nur umzäunte Codeblöcke beeinflusst.
Die beiden Einstellungen sind unabhängig, was leicht falsch gemacht wird: Ein dunkles Theme gepaart mit einem hellen Code-Stil erzeugt eine Karte mit einem hellen Rechteck, das aus der Mitte gestanzt ist. Wähle den Code-Stil, nachdem du das Theme gewählt hast, und überprüfe, dass umzäunte Blöcke in der Karte sitzen, anstatt gegen sie zu kämpfen.
Fixiere das Theme nach Namen in deinen Notizen oder deinem Skript, anstatt dich darauf zu verlassen, was der Editor zuletzt verwendet hat. Ein Kartensatz verliert seine visuelle Kohärenz in dem Moment, in dem ein Bild mit einer anderen Palette rendert, und genau diese Art von Drift wird nicht bemerkt, bis die Bilder nebeneinander im Feed sind.
Zeige das gerenderte Bild in seiner tatsächlichen Anzeigebreite an, bevor du postest. Eine Karte, die in einem Vorschaufenster gut aussieht, kann schwer lesbar werden, wenn sie im Feed verkleinert wird.
Zerlege einen langen Beitrag in einen Thread von Karten, eine Idee pro Karte. Jede Karte sollte für sich funktionieren, weil Leute Karten in falscher Reihenfolge sehen werden.
Eine praktische Aufteilung ist eine Überschrift, ein Hauptpunkt und eine kurze Checkliste pro Karte. Behalte dasselbe Theme und dieselbe Breite über den Thread hinweg, damit die Karten sich wie ein Set anfühlen.
Widerstehe dem Drang, einen Satz über zwei Karten fortzusetzen. Threads werden einzeln geteilt, und eine Karte, die mitten im Gedanken beginnt, liest sich als kaputt, wenn sie allein erscheint. Wenn eine Idee wirklich mehr Platz braucht als eine Karte erlaubt, ist das ein Signal, dass sie in den verlinkten Artikel gehört.
Drei bis fünf Karten sind ein praktikabler Bereich für die meisten Threads. Darüber hinaus macht der Leser die Arbeit, einen Artikel zu lesen, ohne den Vorteil, ihn überfliegen zu können, und die Bilder hören auf, ihren Platz zu verdienen.
Alt-Text ist sowohl für Barrierefreiheit als auch für die Suche wichtig. Beschreibe, was das Bild zeigt, einschließlich des Textes, den es enthält, ohne die gesamte Beschriftung zu wiederholen.
Schreibe Alt-Text, als wäre das Bild nicht da. Wenn die Karte "Deployment complete — all checks passing" sagt, könnte der Alt-Text für ein allgemeines Publikum "Eine dunkel themisierte Markdown-Karte, die eine Deployment-Checkliste zeigt, zwei abgeschlossene Schritte und einer ausstehend" sein. Das ist nützlicher als "Bild der Checkliste" und weniger redundant als die gesamte Markdown-Quelle wörtlich zu kopieren.
Plattformen begrenzen, wie viel Alt-Text du hinzufügen kannst. Auf X (Twitter) akzeptiert das Bildbeschreibungsfeld bis zu 1.000 Zeichen pro Bild. Diese Zahl basiert auf X's öffentlicher Hilfedokumentation; die Hilfeseiten waren am 3. August 2026 nicht maschinenlesbar, also überprüfe das aktuelle Limit, bevor du dich in einer Vorlage darauf verlässt. LinkedIns Hilfe gibt kein separates Alt-Text-Limit für Standard-Bildbeiträge an.
Halte Alt-Text kürzer als das Plattformlimit erlaubt. Eine Beschreibung, die das gesamte Zeichenbudget füllt, ist nicht nützlicher — sie ist schwerer zu verarbeiten und riskiert Kürzung in einigen Pipelines für Hilfstechnologien. Ziele auf ein oder zwei Sätze ab, die dem Leser sagen, was er vom Bild lernen würde, dann höre auf.
Wenn du viele Bilder renderst, werden dieselben Parameter zu einem Skript. Die Markdown to Image API akzeptiert eine POST-Anfrage mit einem Bearer-Token und gibt im URL-Modus eine temporäre URL zurück, die 24 Stunden aufbewahrt wird, oder rohe Bilddaten im Binärmodus. Lade das Ergebnis prompt herunter; die temporäre URL ist kein permanenter Speicher.
Eine minimale Anfrage setzt dieselbe Breite, Qualität und dasselbe Theme, das du im Editor gewählt hast:
{
"markdown": "# Weekly update\n\n- Faster exports\n- Clearer reports\n- One repeatable workflow",
"format": "png",
"width": 1200,
"quality": 2,
"theme": "github-dark",
"mode": "url"
}
Der vollständige Integrationsleitfaden deckt cURL, Node.js, Python und n8n ab: Markdown to Image API: Generate PNGs with cURL, Node.js, Python, and n8n.
- Zeige das Bild in seiner tatsächlichen Anzeigebreite an.
- Bestätige, dass die Nachricht auf einen Bildschirm passt, ohne abgeschnittene Zeilen.
- Überprüfe den Kontrast in hellen und dunklen Themes.
- Füge Alt-Text hinzu, der das Bild beschreibt, nicht nur die Beschriftung.
- Bestätige, dass Theme und Breite zum Rest des Sets passen.
- Überprüfe, dass die längste Zeile und jede Tabelle ohne horizontale Enge passen.
- Behalte die Markdown-Quelle in der Versionskontrolle.
- Exportiere neu, wenn sich der Inhalt ändert; bearbeite keinen Text innerhalb einer Bitmap.
Der letzte Punkt ist es wert, klar ausgesprochen zu werden: Sobald du Text direkt in einem PNG patchst, haben sich das Bild und seine Markdown-Quelle auseinander entwickelt, und jede zukünftige Bearbeitung verschärft das Problem. Neuexport dauert Sekunden und hält die Quelle maßgeblich.
Was ist die beste Bildgröße für Social Media? Es gibt keine einzelne beste Größe, aber eine 1200-Pixel-breite Leinwand ist ein praktischer Standard: Sie bleibt auf hochauflösenden Displays scharf und hält die Zeilenlänge lesbar. Für einen LinkedIn-Beitrag mit Link empfiehlt die Plattform ein Verhältnis von 1,91:1 um 1200 x 627 Pixel.
Kann ich einen langen Artikel in ein Bild verwandeln? Du kannst, aber du solltest normalerweise nicht. Teile ihn in einen Thread von Karten mit einer Idee pro Karte auf.
Wie viel Alt-Text kann ich hinzufügen? Auf X (Twitter) akzeptiert das Bildbeschreibungsfeld bis zu 1.000 Zeichen pro Bild, basierend auf X's öffentlicher Hilfedokumentation. Überprüfe das aktuelle Limit, bevor du dich darauf verlässt.
Hat MarkdownToImage eine API? Ja. Die API akzeptiert eine POST-Anfrage mit einem Bearer-Token und unterstützt PNG-, JPEG-, WebP- oder PDF-Ausgabe. Siehe die API-Dokumentation und den Integrationsleitfaden.
Wie halte ich Karten konsistent? Verwende dasselbe Theme, denselben Code-Stil und dieselbe Breite über das Set hinweg und behalte die Markdown-Quelle in der Versionskontrolle.
Plattformleitlinien geprüft am 3. August 2026: X-Bildbeschreibungen und LinkedIn-Spezifikationen für benutzerdefinierte Bilder. Die MarkdownToImage-Parameter stimmen mit der API-Dokumentation überein.
Plattform-Bildspezifikationen und Alt-Text-Limits ändern sich ohne Vorankündigung. Überprüfe die beiden Plattform-Links oben erneut, bevor du eine bestimmte Zahl in eine Vorlage oder eine automatisierte Pipeline einbaust.
Verwandle jetzt eine Markdown-Quelle in ein veröffentlichungsfertiges Bild: MarkdownToImage öffnen, dein nächstes Update einfügen und als 1200-Pixel-breite Karte exportieren.