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.
Empieza en Markdown to Cards para crear una serie de tarjetas. Esta guía conserva una fuente Markdown editable y explica longitud, ancho, tema, texto alternativo y publicación repetible. El renderizado por script se detalla en la documentación de API.
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`
Pega esta demostración en Markdown to Cards y revisa la vista previa. Las dos tareas completadas y la revisión pendiente son datos de ejemplo, no un despliegue real. Comprueba jerarquía, espaciado y contraste del código en línea antes de sustituir el texto.
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 es el ancho lógico de renderizado, entre 200 y 2560 píxeles. quality es un factor de escala de dispositivo de 1 a 3, no calidad de compresión JPEG. Aumentarlo añade píxeles, pero no acorta tarjetas ni arregla texto ilegible. La altura depende del contenido; el ancho no garantiza una proporción concreta.
Prueba un ancho lógico de 1200 como punto de partida editorial y revisa las dimensiones exportadas y la vista previa de publicación. Es un ajuste de ejemplo, no una norma universal. Reduce las tablas anchas y divide los textos largos en lugar de encogerlo todo.
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.
Abre Markdown to Cards, organiza una idea por tarjeta y revisa todas antes de exportar. Comprueba las primeras y últimas líneas: si un título queda en una tarjeta y su explicación en otra, edita el reparto. Mantén ancho, tema y estilo de código.
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.
Los controles y límites del texto alternativo varían por plataforma y tipo de publicación. Consulta la ayuda enlazada y confirma en el editor que la descripción se guarda. Incluye también instrucciones y enlaces esenciales en el texto accesible de la publicación.
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.
Editar texto directamente en un PNG separa la imagen de su fuente Markdown. Actualiza la fuente y vuelve a exportar para que la siguiente revisión parta del mismo texto.
¿Qué tamaño uso? Empieza con un ancho lógico legible, como 1200, revisa las dimensiones y la vista previa de destino. Confirma los requisitos actuales del tipo de publicación antes de guardar un ajuste.
¿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.
¿Qué longitud debe tener el texto alternativo? La necesaria para transmitir el mensaje. Verifica el límite actual y la descripción guardada; conserva en texto la información importante.
¿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.
Antes de publicar, consulta la ayuda actual: descripciones de imágenes de X y especificaciones de LinkedIn. Los parámetros de renderizado figuran en la documentación de 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.