Cómo mostrar dos imágenes en Markdown

En la documentación técnica y documentos comerciales, mostrar imágenes una al lado de otra ofrece numerosos beneficios importantes:

• Análisis comparativo: Presentar claramente comparaciones de productos antes/después, diferencias de versión y resultados de pruebas A/B
• Eficiencia de espacio: Ahorrar espacio vertical mientras se mantiene la estructura compacta del documento
• Impacto visual: Agrupar imágenes relacionadas para captar la atención del lector
• Mejora profesional: Mejorar la calidad y credibilidad del documento a través de un diseño organizado

1. Diseño UI/UX: Mostrar comparaciones de mockups y diferencias en flujos de usuario
2. Visualización de datos: Presentar comparaciones de gráficos y resultados de análisis de tendencias
3. Demos de productos: Mostrar claramente comparaciones de características antes/después y diferencias de versión
4. Documentación técnica: Mostrar pasos de pantalla de configuración y resultados de ejecución de código en paralelo

<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="Interfaz antes de la optimización">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">Figura 1: Interfaz antes de la optimización</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="Interfaz después de la optimización">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">Figura 2: Interfaz después de la optimización</figcaption>
  </figure>
</div>

Ventajas principales:

• Diseño responsivo: Se ajusta automáticamente al tamaño de la pantalla
• Control preciso: Configuraciones detalladas para espaciado, alineación, fondo y bordes
• Accesibilidad: Proporciona estructura semántica con etiquetas figure/figcaption
• Compatibilidad multiplataforma: Funciona con casi todos los renderizadores de Markdown

![Interfaz antes de la optimización](before-ui.png){width=45%} ![Interfaz después de la optimización](after-ui.png){width=45%}

*Figura 1 y Figura 2: Comparación de optimización de interfaz de usuario*

Características:

• Escritura concisa: Logra el máximo efecto con notación mínima
• Soporte de plataforma: Funciona en motores como Obsidian, Hugo, Jekyll, etc.
• Mantenimiento fácil: No se necesitan etiquetas HTML, mantiene la simplicidad de Markdown

```{r layout-comparison, fig.show='hold', fig.width=8, fig.height=5, out.width='45%', fig.cap=c('Gráfico antes de la optimización', 'Gráfico después de la optimización')}
library(ggplot2)

# Preparación de datos
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))

# Creación de gráficos
p1 <- ggplot(before_data, aes(x, y)) + geom_line(color = "red") + theme_minimal() + ggtitle("Antes de la optimización")
p2 <- ggplot(after_data, aes(x, y)) + geom_line(color = "green") + theme_minimal() + ggtitle("Después de la optimización")

# Visualización lado a lado
gridExtra::grid.arrange(p1, p2, ncol = 2)
```

Características profesionales:

• Diseño automático: fig.show='hold' organiza automáticamente la disposición lado a lado
• Tamaño consistente: parámetro out.width para control preciso del ancho
• Gestión de subtítulos: fig.cap para establecer subtítulos individuales

<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);">Vista móvil</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);">Vista de escritorio</p>
  </div>
</div>

<div role="group" aria-label="Imágenes de comparación de interfaz">
  
  <figure role="img" aria-labelledby="fig1-caption">
    <img src="before.png" alt="Interfaz desorganizada antes de la optimización" style="width:48%;">
    
    <figcaption id="fig1-caption">Figura 1: Antes de la optimización - La información está densa</figcaption>
  </figure>
  
  <figure role="img" aria-labelledby="fig2-caption">
    <img src="after.png" alt="Interfaz organizada después de la optimización" style="width:48%;">
    
    <figcaption id="fig2-caption">Figura 2: Después de la optimización - La información está organizada y la legibilidad mejorada</figcaption>
  </figure>
</div>

1. Comparación de presets de diseño:

   • Modo Deck: Para presentaciones, márgenes generosos
   • Modo móvil: Diseño vertical, orientado a redes sociales
   • Modo Focus: Énfasis en contenido, adecuado para comparaciones

2. Optimización de temas de color:

   • Fondo claro: Documentos comerciales, informes
   • Fondo oscuro: Demostraciones, presentaciones
   • Colores de marca: Materiales de marketing

/* Ejemplo de estilo personalizado */
.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: Alta calidad y universalidad, adecuado para todas las plataformas
• SVG: Gráficos vectoriales con escalabilidad infinita, perfecto para documentos técnicos
• WebP: Formato moderno con menor tamaño de archivo, orientado a la web

### Dashboard de nueva función
<div style="display:flex; gap:20px; margin:20px 0;">
  
  <div style="flex:1;">
    <h4>Dashboard antiguo</h4>
    <img src="old-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Interfaz antigua del dashboard">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>Información dispersa</li>
      <li>Navegación poco clara</li>
      <li>Respuesta lenta</li>
    </ul>
  </div>
  
  <div style="flex:1;">
    <h4>Dashboard nuevo</h4>
    <img src="new-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Interfaz nueva del dashboard">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>Información clave de un vistazo</li>
      <li>Navegación intuitiva</li>
      <li>Actualizaciones en tiempo real</li>
    </ul>
  </div>
</div>

### Análisis de rendimiento Q4 2024
<div style="display:flex; gap:24px; align-items:flex-start;">
  
  <div style="flex:1;">
    <h4>Tendencia de ingresos</h4>
    <img src="revenue-trend.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Gráfico de tendencia de ingresos">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      Logrado aumento del 120% año tras año
    </p>
  </div>
  
  <div style="flex:1;">
    <h4>Participación de mercado</h4>
    <img src="market-share.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Gráfico de participación de mercado">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      Asegurado 35% de participación de mercado
    </p>
  </div>
</div>

1. Problema de distorsión de imagen:

   • Causa: Forzar imágenes con diferentes proporciones al mismo tamaño
   • Solución: Usar object-fit: contain; para mantener las proporciones

2. Problemas de visualización móvil:

   • Causa: Usar anchos fijos
   • Solución: Combinar flex-wrap: wrap; con min-width

3. Problemas de velocidad de carga:

   • Causa: Usar archivos de imagen grandes directamente
   • Solución: Optimizar imágenes y elegir formatos apropiados

## Lista de verificación de accesibilidad
✅ Atributos alt apropiados establecidos para cada imagen
✅ Relación de contraste de color cumple con estándares WCAG (4.5:1 o superior)
✅ Descripciones proporcionadas para lectores de pantalla
✅ Navegación por teclado es posible
✅ El contenido es legible en modo de alto contraste
✅ La visualización funciona correctamente al 200% de ampliación de pantalla