So fügst du in Markdown ein Bild ein:Ausrufezeichen, Alt-Text, Pfad.

Die Syntax

![Alt text](path/to/image.png "Optional title")

• Der Alt-Text in den eckigen Klammern beschreibt das Bild für Screenreader und wird angezeigt, wenn das Bild nicht geladen werden kann. Schreibe, was das Bild zeigt, nicht „Bild“.
• Der Pfad steht in runden Klammern. Enthält er Leerzeichen, schreibe sie als %20 oder setze den Pfad in spitze Klammern.
• Der Titel ist optionaler Text in Anführungszeichen, meist als Tooltip beim Darüberfahren zu sehen.

Die Referenzschreibweise funktioniert ebenfalls und hält lange Adressen aus dem Text heraus:

![Logo][logo]

[logo]: https://example.com/logo.png "DotMD logo"

Relative Pfade und wo die Datei liegt

Ein Pfad ohne Schema ist relativ zur Markdown-Datei, nicht dazu, wo du die App geöffnet hast. Bei dieser Dateistruktur

docs/
  spec.md
  assets/
    flow.png

lautet das Bild in spec.md ![Flow](assets/flow.png). Von einer Datei einen Ordner höher schreibst du docs/assets/flow.png, von einem Ordner darunter ../assets/flow.png. Auf GitHub ist ein Pfad, der mit / beginnt, relativ zum Stammverzeichnis des Repositorys. Lege Bilder neben das Dokument in einen assets-Ordner, damit mit dem Ordner auch die Bilder umziehen.

Bilddateinamen unterscheiden auf Linux-Servern Groß- und Kleinschreibung, obwohl ein Mac sie ignoriert. Das ist ein häufiger Grund, warum ein Bild lokal funktioniert und online nicht.

So legst du die Bildgröße fest

Markdown selbst kennt keine Größe. Nimm ein HTML-img-Tag mit einer Breite; die Höhe folgt den Proportionen:

<img src="assets/screen.png" alt="Settings window" width="400">

Breite und Höhe sind in Pixeln, und ein Prozentwert wie width="50%" funktioniert in den meisten Apps. GitHub unterstützt dieses Tag in READMEs und Kommentaren. Manche Apps akzeptieren auch eine Größe im Alt-Text, etwa ![Screenshot|400](assets/screen.png). Diese Form stammt aus Obsidian, und DotMD liest sie, andere Apps zeigen das |400 aber als Teil des Alt-Texts an. Nimm daher für eine Datei, die überall funktionieren muss, das HTML-Tag. In einer Tabellenzelle muss ein senkrechter Strich als \| geschrieben werden.

Ausrichtung und Beschriftungen

Ausrichtung und Beschriftungen sind ebenfalls HTML. Um ein Bild zu zentrieren, setze es mit align in einen Absatz:

<p align="center">
  <img src="assets/logo.png" alt="Logo" width="200">
</p>

Für eine Beschriftung nimm eine figure mit einer figcaption:

<figure>
  <img src="assets/flow.png" alt="Request flow" width="500">
  <figcaption>Figure 1. The request flow.</figcaption>
</figure>

Nicht jede App behält diese Tags; GitHub tut es meistens, und DotMD zeigt beide. Brauchst du eine Beschriftung, die überall funktioniert, setze stattdessen eine kursive Zeile unter das Bild: *Figure 1. The request flow.*.

Ein anklickbares Bild und weitere Tricks

Setze das Bild in einen Link, damit es anklickbar wird:

[![Build status](https://example.com/badge.svg)](https://example.com/builds)

So entstehen die Badges am Anfang einer README. Um im Dunkelmodus ein anderes Bild zu zeigen, nimm ein picture-Element mit <source media="(prefers-color-scheme: dark)">, wo die App das unterstützt.

Alt-Text, Dateigröße und Formate

Schreibe den Alt-Text so, als beschriebst du das Bild am Telefon: Settings window with the Sync option turned on sagt mehr als screenshot. Lass bei einem rein dekorativen Bild die Klammern leer, damit ein Screenreader es überspringt.

Nimm PNG für Screenshots und Diagramme, JPEG für Fotos, SVG für Logos und Strichzeichnungen und halte die Dateien klein: Ein Screenshot mit 6 MB bremst eine README und ein Repository. Die meisten Apps zeigen animierte GIFs genauso wie jedes andere Bild.

Warum das Bild nicht angezeigt wird

• Der Pfad ist falsch. Prüfe ihn vom Ordner der Markdown-Datei aus und achte auf die Schreibweise des Dateinamens.
• Ein fehlendes Ausrufezeichen. Ohne es erhältst du einen Link, kein Bild.
• Ein Leerzeichen im Pfad, das nicht maskiert ist.
• Eine lokale Datei auf einer Online-Seite. Ein Pfad zu einer Datei auf deiner Festplatte funktioniert nur auf deiner Festplatte.
• Ein blockiertes Bild aus dem Web. Manche Apps laden Bilder aus dem Web erst, wenn du es erlaubst.

Um zu sehen, wie ein Bild aussieht, öffne die Datei in einem Reader, der Pfade relativ zum Dokument auflöst. DotMD tut das: Bilder werden höchstens so breit wie die Textspalte angezeigt, das HTML-Breiten-Tag wird beachtet, und ein im Editor eingefügter Screenshot wird in einem assets-Ordner neben der Datei gespeichert. Lesen ist kostenlos.

Fragen zu Bildern in Markdown

Weitere Fragen