Softonic

Markdown-Bildgenerator

Schritt 1 / 3
Weiter

Die Bildsyntax von Markdown, ![alt](src "title"), ist schnell falsch geschrieben: eine Klammer vergessen, den Alt-Text weggelassen oder sie mit der Link-Syntax verwechselt, und schon zeigt Ihr Dokument einen kaputten Platzhalter an. Dieser Generator nimmt die Bild-URL, den Alt-Text, einen optionalen Titel und ein optionales Linkziel entgegen und gibt sowohl die Inline- als auch die Referenz-Variante des Markdowns aus, sodass Sie einfach die passende in Ihr Dokument einfügen können.

So erzeugen Sie die Markdown-Bildsyntax

  1. 1

    Bild-URL einfügen

    Absolute URL (https://...) oder relativer Pfad (/images/hero.png).

  2. 2

    Alt-Text schreiben

    Was das Bild zeigt, in einem Satz. Für die Barrierefreiheit erforderlich.

  3. 3

    Titel hinzufügen (optional)

    Wird in den meisten Renderern beim Überfahren mit der Maus angezeigt.

  4. 4

    In einen Link einbetten (optional)

    Geben Sie eine URL an, um das Bild anklickbar zu machen.

  5. 5

    Snippet kopieren

    Sie erhalten die Inline-Ausgabe `![alt](src)` oder den Referenzstil `![alt][ref]`.

Die vier Syntaxvarianten

Inline, ohne Titel:

![Hauptbild des Produkts](/images/hero.png)

Inline, mit Titel:

![Hauptbild](/images/hero.png "Hauptbild, aufgenommen im Oktober 2026")

Anklickbares Bild (Bild in einen Link eingebettet):

[![Hauptbild](/images/hero.png)](https://example.com/buy)

Referenzstil (hält lange URLs aus dem Absatz heraus):

![Hauptbild][hero]

[hero]: /images/hero.png "Hauptbild, aufgenommen im Oktober 2026"

Der Alt-Text zählt

  • Barrierefreiheit. Screenreader lesen den Alt-Text vor; ein leerer Alt-Text bedeutet, dass das Bild für sehbehinderte Nutzer praktisch unsichtbar ist.
  • SEO. Suchmaschinen erschließen über den Alt-Text den Bildinhalt. Ein fehlender Alt-Text schadet dem Traffic aus der Bildersuche.
  • Elegantes Ausweichen. Lädt das Bild nicht, ist der Alt-Text das, was die Nutzer sehen.

Guter und schlechter Alt-Text

Motiv Guter Alt-Text Schlechter Alt-Text
Produktfoto “Rote Keramiktasse auf einem Holztisch, Henkel links” “Bild einer Tasse”
Screenshot “Anmeldeseite mit Feldern für E-Mail, Passwort und SSO-Schaltflächen” “screenshot.png”
Dekorativ "" (leerer Alt-Text für reine Dekoration) “dekoratives Bild”
Infografik “Balkendiagramm: Umsatz stieg von 1 Mio. € im Jahr 2023 auf 3 Mio. € im Jahr 2026” “Balkendiagramm”

Stolperfallen

  • Beginnen Sie den Alt-Text nicht mit “Bild von”, Screenreader kündigen ihn ohnehin schon als Bild an.
  • Absolute vs. relative Pfade. Relative Pfade brechen, wenn das Dokument außerhalb seines Ordners gerendert wird (z. B. in der Vorschau von GitHub). Verwenden Sie im Zweifel absolute Pfade.
  • Leerzeichen in URLs brauchen eine URL-Kodierung: %20 statt eines Leerzeichens, sonst wird das Bild nicht geladen.

Häufig gestellte Fragen

Nicht in reinem Markdown. Die meisten Renderer (GFM, Docusaurus, MkDocs) greifen für die Größenangabe auf rohes HTML zurück, <img src="..." width="400" alt="...">. Einige Dialekte unterstützen ![alt](url =400x), das ist aber nicht überall verfügbar.

Der Alt-Text wird Screenreadern vorgelesen und angezeigt, wenn das Bild nicht lädt. Der Titel ist der Tooltip, der beim Überfahren mit der Maus erscheint, meist optional und auf Touch-Geräten ignoriert.

Wenn das Bild mehrfach vorkommt oder wenn die URL lang ist und den Absatz überfrachtet. Der Referenzstil hält den Fließtext lesbar und macht URL-Änderungen zu einer einzigen Bearbeitung.

Ja, ein Bild in einen Link zu verschachteln ([![alt](img)](url)) ist Standard-CommonMark. Die gerenderte Ausgabe ist ein Hyperlink, der ein <img> umschließt.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Farbrad-Explorer

Erforschen Sie das Farbrad interaktiv. Rotieren Sie Harmonien, vergleichen Sie HSL mit RYB, erkennen Sie komplementäre und triadische Paare in Echtzeit.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Regex-Spickzettel

Eine durchsuchbare Referenz für reguläre Ausdrücke in JavaScript, PCRE2/PHP, Python re und .NET. Vergleichen Sie Tokens, enginespezifische Syntax, Anker, Gruppen, Lookarounds und Flags.

Tool in anderen Sprachen verfügbar