Dos imágenes en paralelo en Markdown: composición y exportación
Coloca dos imágenes reales en una tabla Markdown, entiende por qué las columnas no siempre son iguales y apílalas cuando falte espacio.
Una comparación de antes y después necesita dos imágenes que se distingan sin adivinar cuál es cada una. Abre el conversor Markdown para crear una sola imagen fácil de compartir. Empieza por fuentes equivalentes y etiquetas claras: Markdown no ofrece por sí solo una instrucción portátil que garantice exactamente media anchura para cada imagen.
El ejemplo usa dos archivos reales de demostración: una lista en borrador y su versión revisada. Ambos tienen el mismo ancho de origen. Una tabla GFM de dos columnas coloca cada etiqueta sobre su imagen y centra las dos celdas.
# Before and after review
| Before | After |
|:--:|:--:|
|  |  |
Both images use the same source width.
Este es el resultado renderizado, no una portada promocional. Úsalo en una nota de revisión donde haga falta comparar ambos estados a la vez. Las etiquetas y las descripciones distinguen las funciones sin depender solo del color.
Las tablas son una extensión GFM. La fila de alineación controla la posición del contenido, no garantiza columnas del mismo ancho. Las dimensiones de las imágenes, el contenido y los estilos del renderizador siguen influyendo. Revisa la vista previa en el entorno previsto antes de exportar.
Recorta regiones comparables y mantén proporciones coherentes. Si una captura tiene un margen vacío grande y la otra está muy recortada, las columnas iguales no harán que los elementos parezcan del mismo tamaño. Conserva los detalles necesarios para comparar con justicia en lugar de recortarlos solo por simetría.
Usa direcciones accesibles y comprueba que se cargan ambas imágenes antes de exportar. Una dirección de panel que exige iniciar sesión puede funcionar en tu navegador sin estar disponible para el renderizador. Comparte solo imágenes autorizadas y elimina primero los datos privados de las fuentes.
Un PNG con dos imágenes es una composición fija. En una columna estrecha ambas se reducen juntas; no pueden colocarse automáticamente una debajo de otra. Comprueba la ubicación más pequeña que vayas a usar. Si una lista deja de leerse, publica una versión vertical o enlaza los originales en lugar de comprimir más el texto.
Esta alternativa Markdown apila los mismos archivos:
## Before
## After
Una tabla Markdown en una página puede reajustarse o desbordarse según el renderizador; no presupongas que funciona como una galería adaptable. Si el sistema permite HTML y CSS, ofrecen más control, pero su compatibilidad y filtrado dependen del sistema. Conserva una alternativa en Markdown simple.
Deja espacio para ambas etiquetas y comprueba que el archivo descargado no corta los bordes inferiores. Explica el cambio relevante en el texto cercano y añade enlaces a los originales si hay que inspeccionar detalles. La comparación es un apoyo visual, no sustituye la explicación.
Crea tu comparación de dos imágenes. Continúa con las buenas prácticas para imágenes en Markdown o la guía de tablas Markdown legibles.