Markdown-Bildsyntax 2026: Komplettes Cheatsheet für GitHub, Notion, HackMD und Obsidian
Keine Zeit für lange Texte? Drei Kernaussagen
- Die Basissyntax
funktioniert überall - Die Art, Bildgrößen anzupassen, unterscheidet sich pro Plattform — das ist die häufigste Stolperfalle
- Das Bild muss ein öffentlich zugänglicher Direktlink sein — Google-Drive-Freigabelinks funktionieren nicht
Für alle Details:
Basissyntax — plattformübergreifend
Alternativtext: Wird angezeigt, wenn das Bild nicht lädt, und vorgelesen von ScreenreadernURL: Ein direkt abrufbarer Bild-Direktlink, nicht eine Webseite, die das Bild enthält
Mit Titel (erscheint beim Hover):
Referenz-Syntax (für wiederverwendete Bilder):
![Alt][logo]
[logo]: https://example.com/bild.png "Titel"
Bildgröße pro Plattform anpassen
Das ist die häufigste Fehlerquelle. Fünf große Plattformen, fünf Vorgehensweisen:
| Plattform | Größen-Syntax | Beispiel |
|---|---|---|
| GitHub | Nur via HTML | <img src="url" width="300"> |
| HackMD | =BxH nach URL |
 |
| Notion | Drag in UI, keine Syntax | Nach Upload mit Maus ziehen |
| Obsidian | ` | Breite` im Alt |
| Typora | HTML oder Zoom-Style | <img src="url" style="zoom:50%"> |
GitHub
GitHubs Markdown-Renderer akzeptiert keine Größen-Syntax in Markdown. Nur HTML:
<img src="https://example.com/bild.png" width="400" alt="Beschreibung">
GitHub erlaubt width, height, align — aber nicht style (aus Sicherheitsgründen gefiltert).
HackMD
HackMD nutzt eine Eigenerweiterung:
Nur Breite, Höhe automatisch:
Diese Syntax funktioniert nur in HackMD, anderswo bleibt sie wirkungslos.
Obsidian
Obsidian packt die Größe in den Alt-Text:
Wiki-Style für interne Bilder:
![[bild.png|300]]
Notion
Notion importiert Markdown-Bilder, Größenanpassung aber nur in der UI — keine Syntax. Wichtig zu wissen: Notion re-uploadet externe Bilder auf die eigene AWS-basierte CDN (prod-files-secure.s3.us-west-2.amazonaws.com). Das Herkunfts-Asset kann also nicht mehr aktualisiert werden, ohne das Notion-Bild neu einzufügen.
Hosting-Support pro Plattform
Nicht jeder Bildlink funktioniert überall. Ergebnisse aus dem Test:
| Quelle | GitHub | HackMD | Notion | Obsidian | Typora |
|---|---|---|---|---|---|
| Image-Host-Direktlink (lpic.cc, ImgBB) | Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert |
| GitHub-Repo-Bild | Funktioniert | Funktioniert | Funktioniert | Setup nötig | Funktioniert |
| Google-Drive-Freigabelink | Kein Render | Kein Render | Wird neu hochgeladen | Instabil | Kein Render |
| Dropbox-Freigabelink | Kein Render | Kein Render | Wird neu hochgeladen | Instabil | Kein Render |
| Base64-inline | Ja | Ja | Nein | Ja | Ja |
Kernaussage: Google-Drive- und Dropbox-Freigabelinks sind keine Bild-Direktlinks. Die meisten Markdown-Plattformen rendern sie nicht. Für Markdown-Einbettung brauchen Sie einen Host, der echte Direktlinks liefert.
Hotlinking-Politik
Hotlinking bedeutet, ein Bild von einem fremden Server direkt in der eigenen Seite einzubinden. Manche Hosts blockieren Hotlinking, um Bandbreite zu sparen.
| Dienst | Hotlinking erlaubt | Anmerkung |
|---|---|---|
| Image-Hosts (lpic.cc, ImgBB) | Ja | Kernfeature |
| GitHub Repo | Ja, mit Limit | Hohe Zugriffsraten werden gedrosselt |
| Imgur | Teilweise | Zugriffsbeschränkungen in manchen Regionen |
| WordPress.com | Nein | Referer-Check |
| Die meisten Webseiten | Nein | Blockiert externe Requests |
Best Practices für technisches Schreiben
Alt-Text ist Pflicht, nicht Kür
<!-- Schlecht -->
<!-- Gut -->
Alt-Text erfüllt drei Funktionen:
- Fallback, wenn das Bild nicht lädt
- Vorlesen durch Screenreader (BITV 2.0 in Deutschland gesetzlich gefordert für behördennahe Seiten)
- SEO — Suchmaschinen nutzen Alt-Texte, um Bildinhalte zu verstehen
Dateinamen sind Dokumentation
<!-- Schlecht -->
Screenshot 2026-03-15 at 14.32.05.png
IMG_4521.jpg
<!-- Gut -->
github-actions-workflow-konfiguration.png
npm-install-erfolgreiche-ausgabe.png
Ein guter Dateiname hilft Ihnen, das Bild auch nach sechs Monaten noch zu identifizieren. Und Suchmaschinen lesen sie mit.
Formatwahl
- Screenshots, UI-Elemente: PNG (scharfer Text)
- Fotos, komplexe Bilder: WebP oder JPEG (kleinere Datei)
- Icons, Logos, Diagramme: SVG (skalierbar ohne Verlust)
- Bewegte Darstellung: GIF oder WebP-Animation (unter 5 MB halten)
Vor dem Upload komprimieren
Egal welches Format — vor dem Upload komprimieren:
- Squoosh (squoosh.app) — Google-Tool, Browser-basiert
- TinyPNG (tinypng.com) — Batch-Kompression für PNG/JPEG
- ImageOptim (macOS) — verlustfrei, Drag & Drop
Cross-Platform-Strategie
Wenn Ihr Markdown-Dokument auf mehreren Plattformen funktionieren soll:
- Standard-Syntax: Nur
, keine plattformspezifischen Größen-Tags - Bildgröße vor Upload festlegen: Breite 600–800 px, nicht via Syntax steuern
- Zuverlässige Host-Quelle: Image-Host-Direktlinks (z. B. lpic.cc ohne Registrierung), keine Google-Drive-/Dropbox-Links
- Robuste Formate: PNG oder WebP, nicht BMP, TIFF oder AVIF (letzteres Plattform-abhängig)
Ehrliche Einschränkung: lpic.cc bietet keine serverseitige Größenanpassung oder On-the-fly-Transformationen. Wer API-basierte Batch-Uploads oder dynamische Größenverarbeitung braucht, greift zu Cloudinary oder Imgur-API (in Regionen ohne Sperre).
Deutsche Schreibwerkzeuge
Für die DACH-Tech-Szene sind einige plattformspezifische Details relevant:
- Obsidian ist in Deutschland in der Privacy-Community sehr beliebt — Notes lokal, keine Cloud-Pflicht. Die Vault-Syntax
![[bild.png]]ist Standard. - HackMD wird vom CCC und mehreren deutschen Forschungseinrichtungen intensiv genutzt. Die
=BxH-Syntax taucht regelmäßig in CCC-Kongressnotizen auf. - Hedgedoc (Fork von CodiMD, dem HackMD-Vorgänger) läuft auf vielen selbstgehosteten Instanzen — die Markdown-Syntax ist nahezu identisch mit HackMD.
- Logseq — ähnlich Obsidian, in der deutschen Knowledge-Management-Community verbreitet, nutzt Block-basierte Markdown-Struktur.
FAQ
Kann Markdown Bilder zentrieren?
Standard-Markdown: Nein. GitHub-Workaround via HTML: <p align="center"><img src="url" width="400"></p>. HackMD unterstützt {:center}. Notion und Obsidian über UI-Handling.
Kann ich lokale Bilder in Markdown verwenden?
Ja, via relativer Pfad: . Funktioniert in lokalen Editoren (Typora, Obsidian, VS Code). Für Web-Publishing muss das Bild zu einem öffentlichen Host hochgeladen werden.
Mein Bild erscheint nicht in GitHub README — warum?
Drei häufige Gründe: (1) URL ist keine Direktlink-URL, (2) Image-Host blockiert GitHub-Hotlinking, (3) relativer Pfad zeigt nicht auf gültigen Repository-Dateipfad.
Funktioniert HackMDs =300x auf anderen Plattformen?
Nein. HackMD-spezifische Erweiterung. GitHub, Notion, Obsidian, Typora ignorieren das und zeigen das Bild in Originalgröße. Für Cross-Platform: Größe vor Upload festlegen oder HTML-<img> mit width-Attribut verwenden (GitHub und HackMD akzeptieren beides).
Was unterscheidet Direktlink von Freigabelink?
Direktlink (Direct Link) zeigt direkt auf die Bilddatei — typische Endung .jpg, .png, .webp. Browser öffnet den Link und zeigt direkt das Bild. Freigabelink (Share Link) zeigt auf eine Webseite, die das Bild enthält (etwa die Google-Drive-Preview-Seite). Markdown braucht Direktlinks zum Rendern.
Gibt es DSGVO-Überlegungen beim Bild-Embedding via Markdown?
Ja. Wenn Sie Markdown-Inhalte mit externen Bild-URLs veröffentlichen, wird bei jedem Besucher-Seitenaufruf eine HTTP-Anfrage an den Host geschickt — inklusive IP-Adresse. Das ist eine Drittland-Übermittlung, wenn der Host in den USA sitzt. Für Blogs mit deutschem Publikum: EU-gehosteten Host wählen, oder die Bilder auf den eigenen Webserver laden.