Zwei Bilder nebeneinander in Markdown: Layout und Export
Setze zwei echte Bilder in eine Markdown-Tabelle, erkenne die Grenzen gleicher Spalten und nutze bei wenig Platz ein Layout untereinander.
Bei einem Vorher-nachher-Vergleich sollte sofort klar sein, welches Bild welchen Zustand zeigt. Öffne den Markdown-Konverter, um beide in einem teilbaren Bild zusammenzuführen. Beginne mit abgestimmten Quelldateien und klaren Beschriftungen. Markdown allein bietet keine portable Anweisung dafür, dass jedes Bild exakt die Hälfte der verfügbaren Breite erhält.
Das Beispiel verwendet zwei echte Demonstrationsdateien: eine Checkliste als Entwurf und ihre geprüfte Fassung. Beide haben dieselbe Quellbreite. Eine zweispaltige GFM-Tabelle hält die Beschriftungen über den zugehörigen Bildern und richtet beide Zellen mittig aus.
# Before and after review
| Before | After |
|:--:|:--:|
|  |  |
Both images use the same source width.
Dies ist der gerenderte Vergleich, kein Werbecover. Er passt in einen Prüfvermerk, in dem beide Zustände gemeinsam betrachtet werden sollen. Beschriftungen und Bildbeschreibungen unterscheiden die Rollen unabhängig von der Farbe.
Tabellen sind eine GFM-Erweiterung. Die Ausrichtungszeile bestimmt die Zellenausrichtung und garantiert keine gleich breiten Spalten. Bildmaße, Inhalt und Renderer-Stile beeinflussen das Layout weiterhin. Prüfe deshalb vor dem Export die Vorschau im vorgesehenen Renderer.
Schneide die Bilder auf vergleichbare Bereiche zu und halte ihre Proportionen konsistent. Enthält ein Screenshot viel leeren Rand und der andere kaum, wirken die Motive trotz gleich breiter Spalten unterschiedlich groß. Erhalte Details, die für einen fairen Vergleich nötig sind, statt nur für Symmetrie zu beschneiden.
Verwende erreichbare Bildadressen und kontrolliere, ob beide Dateien vor dem Export geladen wurden. Eine Dashboard-Adresse mit Anmeldung kann in deinem Browser funktionieren, ohne für den Renderer erreichbar zu sein. Teile nur erlaubte Inhalte und entferne private Daten bereits aus den Quelldateien.
Ein PNG mit zwei Bildern ist eine feste Komposition. In einer schmalen Spalte werden beide gemeinsam verkleinert; sie können nicht automatisch untereinander rutschen. Prüfe das Bild an der kleinsten vorgesehenen Platzierung. Wird eine Checkliste unleserlich, verwende eine gestapelte Variante oder verlinke die Originale, statt den Text weiter zu verkleinern.
Diese Markdown-Alternative verwendet dieselben Dateien untereinander:
## Before
## After
Eine live gerenderte Markdown-Tabelle kann je nach Renderer umbrechen oder überlaufen. Erwarte nicht das Verhalten einer responsiven Galerie. Erlaubt das Veröffentlichungssystem HTML und CSS, sind weitere Layoutregeln möglich; Unterstützung und Filterung hängen jedoch vom System ab. Behalte eine reine Markdown-Alternative.
Lass Platz für beide Beschriftungen und prüfe die unteren Bildränder in der heruntergeladenen Datei auf Beschnitt. Erkläre den wesentlichen Unterschied im Begleittext und verlinke Originalbilder, wenn feine Details wichtig sind. Der Vergleich unterstützt die Erklärung, ersetzt sie aber nicht.
Erstelle deinen Bildvergleich. Weiter führen die Tipps für Bilder in Markdown und der Leitfaden für lesbare Markdown-Tabellen.