Zwei Bilder nebeneinander in Markdown anzeigen

In technischen Dokumenten und Geschäftsunterlagen bietet die nebeneinandere Bildanzeige zahlreiche wichtige Vorteile:

• Vergleichende Analyse: Vorher/Nachher-Vergleiche, Versionsunterschiede und A/B-Test-Ergebnisse klar darstellen
• Platzeffizienz: Vertikalen Speicherplatz sparen und kompakte Dokumentenstruktur beibehalten
• Visuelle Wirkung: Verwandte Bilder gruppieren, um die Aufmerksamkeit der Leser zu erfassen
• Professionelle Verbesserung: Dokumentenqualität und Glaubwürdigkeit durch organisiertes Layout verbessern

1. UI/UX-Design: Mockup-Vergleiche und Unterschiede in Benutzerflows anzeigen
2. Datenvisualisierung: Diagrammvergleiche und Trendanalyse-Ergebnisse darstellen
3. Produktdemos: Funktionsvorher/Nachher-Vergleiche und Versionsunterschiede klar anzeigen
4. Technische Dokumentation: Setup-Bildschirm-Schritte und Code-Ausführungsergebnisse parallel anzeigen

<div style="display:flex; gap:20px; align-items:center; justify-content:center; background:#f8f9fa; padding:16px; border-radius:8px;">
  
  <figure style="margin:0; text-align:center;">
    <img src="before-screenshot.png" style="width:50%; max-width:400px; height:auto; border:1px solid #e0e0e0; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,0.1);" alt="Interface vor Optimierung">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">Abbildung 1: Interface vor Optimierung</figcaption>
  </figure>
  
  <figure style="margin:0; text-align:center;">
    <img src="after-screenshot.png" style="width:50%; max-width:400px; height:auto; border:1px solid #e0e0e0; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,0.1);" alt="Interface nach Optimierung">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">Abbildung 2: Interface nach Optimierung</figcaption>
  </figure>
</div>

Kernvorteile:

• Responsives Design: Passt sich automatisch an die Bildschirmgröße an
• Präzise Kontrolle: Detaillierte Einstellungen für Abstände, Ausrichtung, Hintergrund und Rahmen möglich
• Barrierefreiheit: Bietet semantische Struktur mit figure/figcaption-Tags
• Plattformübergreifende Kompatibilität: Funktioniert mit fast allen Markdown-Renderern

![Interface vor Optimierung](before-ui.png){width=45%} ![Interface nach Optimierung](after-ui.png){width=45%}

*Abbildung 1 und Abbildung 2: Benutzeroberflächen-Optimierungsvergleich*

Funktionen:

• Prägnante Schreibweise: Erreicht maximale Wirkung mit minimaler Notation
• Plattformunterstützung: Funktioniert in Engines wie Obsidian, Hugo, Jekyll usw.
• Einfache Wartung: Keine HTML-Tags erforderlich, bewahrt die Einfachheit von Markdown

```{r layout-comparison, fig.show='hold', fig.width=8, fig.height=5, out.width='45%', fig.cap=c('Plot vor Optimierung', 'Plot nach Optimierung')}
library(ggplot2)

# Datenaufbereitung
before_data <- data.frame(x = 1:10, y = rnorm(10, mean = 5, sd = 2))
after_data <- data.frame(x = 1:10, y = rnorm(10, mean = 7, sd = 1))

# Plot-Erstellung
p1 <- ggplot(before_data, aes(x, y)) + geom_line(color = "red") + theme_minimal() + ggtitle("Vor Optimierung")
p2 <- ggplot(after_data, aes(x, y)) + geom_line(color = "green") + theme_minimal() + ggtitle("Nach Optimierung")

# Nebeneinander-Anzeige
gridExtra::grid.arrange(p1, p2, ncol = 2)
```

Professionelle Funktionen:

• Automatisches Layout: fig.show='hold' ordnet automatisch nebeneinander an
• Konsistente Größe: out.width-Parameter für präzise Breitenkontrolle
• Beschriftungsverwaltung: fig.cap für das Setzen einzelner Beschriftungen

<div style="display:flex; flex-wrap:wrap; gap:clamp(12px, 2vw, 24px); justify-content:center;">
  
  <div style="flex:1 1 300px; min-width:0;">
    <img src="mobile-view.png" style="width:100%; height:auto; object-fit:contain;">
    
    <p style="text-align:center; margin-top:8px; font-size:clamp(12px, 1.5vw, 14px);">Mobile Ansicht</p>
  </div>
  
  <div style="flex:1 1 300px; min-width:0;">
    <img src="desktop-view.png" style="width:100%; height:auto; object-fit:contain;">
    
    <p style="text-align:center; margin-top:8px; font-size:clamp(12px, 1.5vw, 14px);">Desktop Ansicht</p>
  </div>
</div>

<div role="group" aria-label="Schnittstellen-Vergleichsbilder">
  
  <figure role="img" aria-labelledby="fig1-caption">
    <img src="before.png" alt="Überladene Schnittstelle vor der Optimierung" style="width:48%;">
    
    <figcaption id="fig1-caption">Abbildung 1: Vor der Optimierung - Informationen sind dicht</figcaption>
  </figure>
  
  <figure role="img" aria-labelledby="fig2-caption">
    <img src="after.png" alt="Organisierte Schnittstelle nach der Optimierung" style="width:48%;">
    
    <figcaption id="fig2-caption">Abbildung 2: Nach der Optimierung - Informationen sind organisiert und die Lesbarkeit verbessert</figcaption>
  </figure>
</div>

1. Layout-Preset-Vergleich:

   • Deck-Modus: Für Präsentationen, großzügige Ränder
   • Mobile-Modus: Hochformat-Layout, Social-Media-orientiert
   • Focus-Modus: Inhaltsbetonung, geeignet für Vergleiche

2. Farbthemen-Optimierung:

   • Heller Hintergrund: Geschäftsdokumente, Berichte
   • Dunkler Hintergrund: Demonstrationen, Präsentationen
   • Markenfarben: Marketing-Materialien

/* Benutzerdefinierte Stilbeispiele */
.image-comparison-container {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.comparison-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.comparison-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

• PNG: Hohe Qualität und Universalität, geeignet für alle Plattformen
• SVG: Vektorgrafiken, verlustfreie Skalierung, perfekt für technische Dokumente
• WebP: Modernes Format mit kleinerer Dateigröße, web-orientiert

### Neues Feature-Dashboard
<div style="display:flex; gap:20px; margin:20px 0;">
  
  <div style="flex:1;">
    <h4>Altes Dashboard</h4>
    <img src="old-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Altes Dashboard-Interface">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>Informationen verstreut</li>
      <li>Unklare Navigation</li>
      <li>Langsame Reaktion</li>
    </ul>
  </div>
  
  <div style="flex:1;">
    <h4>Neues Dashboard</h4>
    <img src="new-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Neues Dashboard-Interface">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>Wichtige Informationen auf einen Blick</li>
      <li>Intuitive Navigation</li>
      <li>Echtzeit-Updates</li>
    </ul>
  </div>
</div>

### Q4 2024 Leistungsanalyse
<div style="display:flex; gap:24px; align-items:flex-start;">
  
  <div style="flex:1;">
    <h4>Umsatzentwicklung</h4>
    <img src="revenue-trend.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Umsatzentwicklungs-Diagramm">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      120%ige Steigerung im Jahresvergleich erreicht
    </p>
  </div>
  
  <div style="flex:1;">
    <h4>Marktanteil</h4>
    <img src="market-share.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Marktanteil-Kreisdiagramm">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      35% Marktanteil gesichert
    </p>
  </div>
</div>

1. Bildverzerrungsproblem:

   • Ursache: Bilder mit unterschiedlichen Seitenverhältnissen werden zwangsweise auf dieselbe Größe gebracht
   • Lösung: object-fit: contain; verwenden, um Proportionen beizubehalten

2. Mobile-Anzeigeprobleme:

   • Ursache: Feste Breiten verwenden
   • Lösung: flex-wrap: wrap; mit min-width kombinieren

3. Ladegeschwindigkeitsprobleme:

   • Ursache: Große Bilddateien direkt verwenden
   • Lösung: Bilder optimieren und geeignete Formate wählen

## Barrierefreiheits-Checkliste
✅ Angemessene alt-Attribute für jedes Bild gesetzt
✅ Farbkontrast-Verhältnis erfüllt WCAG-Standards (4,5:1 oder höher)
✅ Beschreibungen für Screenreader bereitgestellt
✅ Tastaturnavigation möglich
✅ Inhalt im Hochkontrastmodus lesbar
✅ Anzeige funktioniert problemlos bei 200% Bildschirmlupe