Markdown a imagen para redes sociales: tamaños, temas y un flujo repetible
Una publicación técnica larga suele fracasar porque el lector tiene que desplazarse por un muro de texto. Convertir la parte más contundente en una imagen le da a esa idea una segunda oportunidad: se convierte en una tarjeta que la gente puede leer, guardar y compartir. La pregunta es cómo hacerlo de forma consistente sin abrir una herramienta de diseño cada vez.
El flujo de esta guía parte de una fuente Markdown y produce una imagen lista para publicar. Elegirás un lienzo, un tema legible, escribirás texto alternativo y reutilizarás el mismo proceso en la siguiente publicación. Los ejemplos usan MarkdownToImage y se verificaron con su documentación de la API el 3 de agosto de 2026.
Una imagen compensa cuando el mensaje cabe en una pantalla, se beneficia de un formato que una publicación de texto aplana, o necesita compartirse como archivo independiente. El código, las tablas y las listas de verificación son los casos más claros: siguen siendo legibles en una imagen y pierden esa legibilidad en una publicación de texto plano.
El texto plano suele ser la mejor opción cuando el contenido es largo, requiere edición, o debe poder buscarse y copiarse. No conviertas un artículo entero en una imagen. Convierte la parte que merece una segunda mirada y enlaza de vuelta a la publicación completa.
Mantén el mensaje fuente en Markdown y renderiza variantes para distintos canales en lugar de dibujar cada imagen a mano. Una fuente puede convertirse en una tarjeta ancha de LinkedIn, una publicación cuadrada y una actualización estrecha con distintos lienzos y temas.
Esto importa porque la alternativa escala mal. Editar tres archivos de imagen separados significa tres oportunidades de introducir una errata, y un cambio de texto seis semanas después significa encontrar y rehacer los tres. Cuando la fuente es Markdown, corriges una línea y reexportas.
Guarda esa fuente junto a tu otro contenido, no en una herramienta de diseño. Un archivo .md corto en el mismo repositorio que tu documentación es suficiente, y te da historial de versiones gratis: cuando alguien pregunte por qué la tarjeta del mes pasado decía algo distinto, la respuesta está en el registro de commits.
Por eso el flujo empieza con un bloque Markdown pequeño. Mantén el mensaje corto, usa un encabezado y deja que el renderizador se encargue de la tipografía.
Este Markdown es lo bastante pequeño para verificar la tipografía antes de usar contenido real:
# Deployment complete
Environment: **production**
- [x] Database migrated
- [x] Health checks passing
- [ ] Post-deploy review
`status: healthy`
Pégalo en MarkdownToImage, elige un lienzo de 1200 píxeles de ancho y exporta. La tarjeta renderizada es la línea base para cualquier otra variante.
Usa un ejemplo deliberadamente pequeño como este para tu primer render, en lugar de contenido real. Ejercita los elementos que más se rompen — texto en negrita, listas de tareas, código en línea — y sigue siendo lo bastante corto para detectar un problema de espaciado o contraste de un vistazo. Cuando el ejemplo se renderice como quieres, cambia al mensaje real y mantén los mismos ajustes.
El generador expone tres controles que dan forma a la salida: ancho, calidad y el formato de salida.
width fija el ancho de render en píxeles, de 200 a 2560, con 800 por defecto. quality es el factor de escala del dispositivo de 1.0 a 3.0, con 2.0 por defecto. La altura efectiva en píxeles sigue la relación de aspecto de tu contenido, así que una tarjeta de 1200 píxeles de ancho da texto nítido en la mayoría de feeds sociales.
Un lienzo de 1200 píxeles es un punto de partida seguro: es lo bastante ancho para mantenerse nítido en pantallas de alta densidad y lo bastante estrecho para que la longitud de línea siga siendo legible. Para una publicación de LinkedIn con enlace, la plataforma recomienda una relación de 1,91:1, alrededor de 1200 x 627 píxeles, e imágenes de más de 200 píxeles de ancho. Mantén el Markdown fuente estrecho para que el renderizador no cree una tabla demasiado ancha.
El parámetro format admite PNG, JPEG, WebP o PDF. PNG mantiene nítidos el código y los diagramas; úsalo para tarjetas sociales.
Elige un tema con suficiente contraste para el feed, no solo para un editor claro. Los temas claros se leen bien en apps blancas; los oscuros destacan en feeds en modo oscuro. El tema afecta a toda la tarjeta, mientras que el estilo de código solo afecta a los bloques de código delimitados.
Los dos ajustes son independientes, y eso es fácil de equivocar: un tema oscuro con un estilo de código claro produce una tarjeta con un rectángulo brillante recortado en el centro. Elige el estilo de código después del tema, y comprueba que los bloques delimitados encajen dentro de la tarjeta en lugar de pelearse con ella.
Fija el tema por nombre en tus notas o en tu script en lugar de confiar en el que el editor usó la última vez. Un conjunto de tarjetas pierde su coherencia visual en cuanto una imagen se renderiza con otra paleta, y esa es justo la clase de desviación que pasa desapercibida hasta que las imágenes aparecen juntas en un feed.
Previsualiza la imagen renderizada a su ancho real de visualización antes de publicar. Una tarjeta que se ve bien en un panel de vista previa puede volverse difícil de leer al reducirse en el feed.
Divide una publicación larga en un hilo de tarjetas, una idea por tarjeta. Cada tarjeta debe funcionar por sí sola, porque la gente verá las tarjetas en desorden.
Una división práctica es un encabezado, un punto clave y una lista corta por tarjeta. Mantén el mismo tema y ancho en todo el hilo para que las tarjetas se sientan como un conjunto.
Resiste el impulso de continuar una frase entre dos tarjetas. Los hilos se comparten de una imagen en una imagen, y una tarjeta que empieza a media idea se lee como rota cuando aparece sola. Si una idea de verdad necesita más espacio del que permite una tarjeta, es señal de que pertenece al artículo enlazado.
De tres a cinco tarjetas es un rango viable para la mayoría de hilos. Más allá de eso, el lector hace el trabajo de leer un artículo sin la ventaja de poder escanearlo, y las imágenes dejan de ganarse su sitio.
El texto alternativo importa tanto para la accesibilidad como para la búsqueda. Describe lo que muestra la imagen, incluido el texto que contiene, sin repetir el pie entero.
Escribe el texto alternativo como si la imagen no estuviera. Si la tarjeta dice "Deployment complete — all checks passing", el texto alternativo para un público general podría ser "Una tarjeta Markdown de tema oscuro que muestra una lista de despliegue con dos pasos completados y uno pendiente". Eso es más útil que "imagen de una lista" y menos redundante que copiar todo el Markdown palabra por palabra.
Las plataformas limitan cuánto texto alternativo puedes añadir. En X (Twitter), el campo de descripción de imagen acepta hasta 1.000 caracteres por imagen. Esa cifra se basa en la documentación de ayuda pública de X; las páginas de ayuda no eran legibles por máquina el 3 de agosto de 2026, así que verifica el límite actual antes de fiarte de él en una plantilla. La ayuda de LinkedIn no indica un límite separado de texto alternativo para publicaciones de imagen estándar.
Mantén el texto alternativo más corto de lo que permite el límite de la plataforma. Una descripción que llena todo el presupuesto de caracteres no es más útil: es más difícil de procesar y se arriesga a truncarse en algunas cadenas de tecnología asistiva. Apunta a una o dos frases que digan al lector qué aprendería de la imagen, y para ahí.
Cuando renderizas muchas imágenes, los mismos parámetros se convierten en un script. La Markdown to Image API acepta una petición POST con un token Bearer y devuelve una URL temporal que se conserva 24 horas en modo URL, o datos de imagen en bruto en modo binario. Descarga el resultado enseguida; la URL temporal no es almacenamiento permanente.
Una petición mínima fija el mismo ancho, calidad y tema que elegiste en el editor:
{
"markdown": "# Weekly update\n\n- Faster exports\n- Clearer reports\n- One repeatable workflow",
"format": "png",
"width": 1200,
"quality": 2,
"theme": "github-dark",
"mode": "url"
}
La guía de integración completa cubre cURL, Node.js, Python y n8n: Markdown to Image API: Generate PNGs with cURL, Node.js, Python, and n8n.
- Previsualiza la imagen a su ancho real de visualización.
- Confirma que el mensaje cabe en una pantalla sin líneas cortadas.
- Comprueba el contraste en temas claros y oscuros.
- Añade texto alternativo que describa la imagen, no solo el pie.
- Confirma que el tema y el ancho coinciden con el resto del conjunto.
- Comprueba que la línea más larga y cualquier tabla caben sin agobio horizontal.
- Mantén la fuente Markdown en control de versiones.
- Reexporta cuando cambie el contenido; no edites texto dentro de un mapa de bits.
El último punto merece decirse sin rodeos: en cuanto parcheas texto directamente dentro de un PNG, la imagen y su fuente Markdown se han bifurcado, y cada edición futura agrava el problema. Reexportar lleva segundos y mantiene la fuente como referencia.
¿Cuál es el mejor tamaño de imagen para redes sociales? No hay un único tamaño mejor, pero un lienzo de 1200 píxeles de ancho es un valor por defecto práctico: se mantiene nítido en pantallas de alta densidad y conserva la longitud de línea legible. Para una publicación de LinkedIn con enlace, la plataforma recomienda una relación de 1,91:1 alrededor de 1200 x 627 píxeles.
¿Puedo convertir un artículo largo en una imagen? Puedes, pero normalmente no deberías. Divídelo en un hilo de tarjetas con una idea por tarjeta.
¿Cuánto texto alternativo puedo añadir? En X (Twitter), el campo de descripción de imagen acepta hasta 1.000 caracteres por imagen, según la documentación de ayuda pública de X. Verifica el límite actual antes de fiarte de él.
¿MarkdownToImage tiene API? Sí. La API acepta una petición POST con un token Bearer y admite salida PNG, JPEG, WebP o PDF. Consulta la documentación de la API y la guía de integración.
¿Cómo mantengo las tarjetas consistentes? Usa el mismo tema, estilo de código y ancho en todo el conjunto, y mantén la fuente Markdown en control de versiones.
Directrices de plataforma verificadas el 3 de agosto de 2026: descripciones de imagen de X y especificaciones de imagen personalizada de LinkedIn. Los parámetros de MarkdownToImage coinciden con la documentación de la API.
Las especificaciones de imagen de las plataformas y los límites de texto alternativo cambian sin aviso. Vuelve a comprobar los dos enlaces de plataforma de arriba antes de fijar cualquier cifra concreta en una plantilla o en una cadena automatizada.
Convierte ya una fuente Markdown en una imagen lista para publicar: abre MarkdownToImage, pega tu próxima actualización y expórtala como tarjeta de 1200 píxeles de ancho.