Softonic

Generador de Imágenes Markdown

Paso 1 / 3
Siguiente

La sintaxis de imagen de Markdown, ![alt](src "title"), es fácil de escribir mal: se te escapa un corchete, olvidas el texto alternativo o la confundes con la sintaxis de enlace y tu documento acaba mostrando un marcador roto. Este generador toma la URL de la imagen, el texto alternativo, un título opcional y un destino de enlace opcional, y produce tanto el Markdown en línea como el de estilo de referencia para que pegues el que mejor encaje en tu documento.

Cómo generar la sintaxis de imagen de Markdown

  1. 1

    Pega la URL de la imagen

    URL absoluta (https://...) o ruta relativa (/images/hero.png).

  2. 2

    Escribe el texto alternativo

    Lo que muestra la imagen, en una frase. Imprescindible para la accesibilidad.

  3. 3

    Añade un título (opcional)

    Se muestra al pasar el ratón en la mayoría de los renderizadores.

  4. 4

    Envuélvela en un enlace (opcional)

    Indica una URL para que la imagen se pueda pulsar.

  5. 5

    Copia el fragmento

    Obtén la salida en línea `![alt](src)` o el estilo de referencia `![alt][ref]`.

Las cuatro variantes de sintaxis

En línea, sin título:

![Imagen principal del producto](/images/hero.png)

En línea, con título:

![Imagen principal](/images/hero.png "Imagen principal tomada en octubre de 2026")

Imagen enlazable (imagen envuelta en un enlace):

[![Imagen principal](/images/hero.png)](https://example.com/buy)

Estilo de referencia (mantiene las URL largas fuera del párrafo):

![Imagen principal][hero]

[hero]: /images/hero.png "Imagen principal tomada en octubre de 2026"

El texto alternativo importa

  • Accesibilidad. Los lectores de pantalla anuncian el texto alternativo; un alt vacío hace que la imagen sea prácticamente invisible para una persona con discapacidad visual.
  • SEO. Los motores de búsqueda usan el texto alternativo para entender el contenido de la imagen. La falta de alt perjudica el tráfico desde la búsqueda de imágenes.
  • Degradación elegante. Si la imagen no carga, el texto alternativo es lo que ven los usuarios.

Texto alternativo bueno y malo

Intención Buen alt Mal alt
Foto de producto “Taza de cerámica roja sobre un escritorio de madera, asa a la izquierda” “Imagen de una taza”
Captura de pantalla “Página de inicio de sesión con correo, contraseña y botones de SSO” “screenshot.png”
Decorativa "" (alt vacío para pura decoración) “imagen decorativa”
Infografía “Gráfico de barras: los ingresos crecieron de 1 M€ en 2023 a 3 M€ en 2026” “gráfico de barras”

Errores frecuentes

  • No empieces el alt con “Imagen de”, los lectores de pantalla ya lo anuncian como una imagen.
  • Rutas absolutas frente a relativas. Las rutas relativas se rompen cuando el documento se renderiza fuera de su carpeta (por ejemplo, en la vista previa de GitHub). Usa rutas absolutas ante la duda.
  • Los espacios en las URL necesitan codificación: %20 en lugar de un espacio, o la imagen no cargará.

Preguntas frecuentes

No en Markdown puro. La mayoría de los renderizadores (GFM, Docusaurus, MkDocs) recurren al HTML sin procesar para el tamaño, <img src="..." width="400" alt="...">. Algunos dialectos admiten ![alt](url =400x), pero no es universal.

El alt es el texto que anuncian los lectores de pantalla y que se muestra si la imagen falla. El título es la información sobre herramientas que aparece al pasar el ratón: suele ser opcional y se ignora en dispositivos táctiles.

Cuando la imagen aparece varias veces o cuando la URL es larga y recarga el párrafo. El estilo de referencia mantiene el texto legible y hace que cambiar la URL sea una única edición.

Sí, anidar una imagen dentro de un enlace ([![alt](img)](url)) es CommonMark estándar. La salida renderizada es un hiperenlace que envuelve un <img>.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Generador de EditorConfig

Genera un archivo .editorconfig con tu estilo y tamaño de indentación, fin de línea, charset y reglas de espacios para un formato consistente en IDEs y editores.

Herramienta disponible en otros idiomas