Visuelle Inhalte sind entscheidend für ansprechende Dokumentation und Blogbeiträge. Studien zeigen, dass Leser sich Informationen mit 65% höherer Wahrscheinlichkeit merken, wenn sie mit relevanten Bildern kombiniert werden. Dieser Leitfaden zeigt Ihnen alles, was Sie über die Arbeit mit Bildern in Markdown wissen müssen, von der einfachen Einfügung bis hin zu fortgeschrittenen Formatierungstechniken.
Markdown selbst ist eine einfache und benutzerfreundliche Auszeichnungssprache, die zur Formatierung fast jedes Dokuments verwendet werden kann. Wenn Sie neu bei Markdown sind, beginnen Sie am besten mit The Markdown Guide.
Nehmen wir an, dass sich die benötigten Bilder im Ordner images befinden:
├─ images
└─ picture.jpg
└─ picture-2.jpg
└─ picture-three.jpg
├─ README.md👉 Pro-Tipp: Beachten Sie, dass das Bild möglicherweise nicht im gerenderten Dokument angezeigt wird, wenn der Dateiname Klammern oder andere Sonderzeichen enthält. Wenn Sie wissen möchten, wie Sie Dateien für Webprojekte richtig benennen, schauen Sie sich diese Richtlinien für Dateinamen in Webprojekten an.
Wie fügt man also ein Bild aus einer lokalen Datei in Markdown ein? Die erste Möglichkeit, ein lokales Bild in ein Markdown-Dokument einzufügen, ist die folgende Syntax:
👉 Pro-Tipp: Verwenden Sie immer Vorwärtsschrägstriche (/) in Pfaden, auch auf Windows-Systemen, um die Kompatibilität zwischen Plattformen sicherzustellen. Der Text in eckigen Klammern (“Bildbeschreibung”) ist der sogenannte Alternative Text, der aus folgenden Gründen wichtig ist:
Der Teil in Klammern ist der Pfad zur Datei. Beachten Sie den ersten / vor images. Ohne dieses Symbol wird Ihr Dokument möglicherweise auf Ihrem Computer normal angezeigt, aber sobald es auf einen Server im Internet hochgeladen wird, wird es möglicherweise nicht mehr angezeigt. Dies ist einer der Hauptgründe dafür.
Die zweite Möglichkeit, ein lokales Bild in Markdown anzuzeigen, ist die Verwendung des image-Tags im Textkörper Ihres Dokuments:
<image src="/images/picture.jpg" alt="Bildbeschreibung">Einer der Vorteile dieser Methode ist, dass Sie auf diese Weise zusätzliche Bildsteuerungsfunktionen verwenden können. Die Einzelheiten hängen von der Ressource ab, auf der Sie das Dokument veröffentlichen.
Beide Methoden führen zum gewünschten Ergebnis, die Wahl liegt bei Ihnen.
Wie fügt man ein Bild aus einem Link in Markdown ein? Wenn Sie ein Bild einfügen möchten, das irgendwo im Internet gehostet wird, verwenden Sie einfach einen Link zum Bild:
oder
<image src="https://picsum.photos/800/600" alt="Bildbeschreibung">Wenn Sie mit der Maus über dieses Bild fahren, sehen Sie den alternativen Text.
Effektiver Alt-Text
Die effektive Gestaltung von Alt-Text verbessert die Zugänglichkeit und SEO. Vergleichen Sie diese Beispiele:
Schlechter Alt-Text: 
Guter Alt-Text: 
Für komplexe Bilder verwenden Sie ARIA Labels (HTML Method):
<img
src="/images/complex-diagram.jpg"
alt="Grundlegende Beschreibung"
aria-label="Detaillierte Beschreibung des Diagramms und seiner Bedeutung"
>HTML-Methode (Empfohlen)
Für präzise Kontrolle über die Abmessungen:
<img src="/images/picture.jpg" alt="Bildbeschreibung" width="500" height="300">Markdown-Native Größenänderung
Einige Markdown-Prozessoren (wie GitHub) unterstützen Inline-Größenänderung, überprüfen Sie die Kompatibilität:
Oder nur Breite:
Die Unterstützung dieser Syntax variiert je nach Markdown-Prozessor, überprüfen Sie daher die Dokumentation Ihrer Plattform.
Best Practices für Bildoptimierung
Bildunterschriften sind ein wichtiger Teil von Bildern im Markdown-Dokument, da sie dem Leser zusätzliche Informationen liefern. Wie fügt man also eine Bildunterschrift in Markdown hinzu? Um eine Bildunterschrift mit Markdown-Syntax hinzuzufügen, fügen Sie einfach den Text in Anführungszeichen ein, getrennt durch ein Leerzeichen:
Oder mit HTML können Sie das figcaption-Attribut innerhalb von figure setzen:
<figure>
<img src="/images/picture.jpg" width="800" height="600" alt="Bildbeschreibung">
<figcaption>Text unter dem Bild</figcaption>
</figure>Manchmal müssen Sie einen Rahmen um ein Bild herum hinzufügen. Zum Beispiel, wenn das Bild und die Seite den gleichen Hintergrund haben und das Bild visuell getrennt werden muss. Ein Bild im Markdown-Format hat keine Möglichkeit, Designstile hinzuzufügen, daher ist dies hier nicht möglich.
Sie können versuchen, dem img-Tag ein spezielles Attribut hinzuzufügen, wie im folgenden Code:
<img src="/images/picture.jpg" border="5px solid red" />Aber leider wird das auch nicht funktionieren. Der Rahmen wird nicht angezeigt. Wie fügt man also einen Rahmen zu einem Bild in Markdown hinzu? Es gibt eine Lösung und zwar eine recht ungewöhnliche. Gefunden auf StackOverflow. Sie müssen lediglich den image-Tag mit einem anderen umgeben - kbd:
<kbd>
<img src="/images/picture.jpg" alt="Bildbeschreibung" />
</kbd>Auch wenn es kein schlechter Trick ist, ist er für meinen Geschmack schlecht sichtbar und eher seltsam. Es gibt einen besseren Weg, einen Rahmen um ein Bild in Markdown hinzuzufügen. Sie können Inline-Styling verwenden (aber CSS-Unterstützung ist erforderlich). Dies gibt Ihnen eine viel größere Auswahl an Optionen und mehr Kontrolle über das Aussehen.
<figure>
<img
src="https://picsum.photos/800/600"
width="800" height="600"
alt="Bildbeschreibung"
style="border: 2px solid red; border-radius: 5px; padding: 5px;">
<figcaption>Text unter dem Bild</figcaption>
</figure>oder das funktioniert auch:
<img
src="/images/picture.jpg"
width="800" height="600"
alt="Bildbeschreibung"
style="border: 2px solid red; border-radius: 5px; padding: 5px;"
>Um Bilder in Markdown anklickbar zu machen, können Sie die Standardkonstruktion verwenden:
[](https://denshub.com)Wenn Sie auf dieses Bild klicken, wird der Den’s Hub Blog in einem neuen Fenster geöffnet.
Um eine noch bessere mobile Erfahrung zu bieten, können Sie mehrere Kopien Ihres Bildes in verschiedenen Größen erstellen und Folgendes verwenden:
<img
src="/images/picture.jpg"
srcset="/images/picture-300.jpg 300w,
/images/picture-600.jpg 600w,
/images/picture-900.jpg 900w"
sizes="(max-width: 600px) 300px,
(max-width: 900px) 600px,
900px"
alt="Bildbeschreibung"
>Denken Sie daran, dass Markdown zwar für Einfachheit konzipiert wurde, Sie aber immer auf HTML zurückgreifen können, wenn Sie mehr Kontrolle über die Bildpräsentation benötigen. Der Schlüssel liegt darin, das richtige Gleichgewicht zwischen Wartbarkeit und Funktional.
😎
Eine Mail, sobald ein neuer Beitrag erscheint.
