Markdown permite insertar imágenes de forma muy sencilla, reutilizando casi la misma sintaxis de los enlaces, pero con un signo de exclamación (!) delante.

9.1 Sintaxis básica

La forma general es:

![texto alternativo](ruta)

• !: indica que es una imagen.
• [texto alternativo]: descripción de la imagen (importante para accesibilidad y cuando la imagen no se carga).
• (ruta): la URL o la ruta al archivo de la imagen.

Ejemplo:

![Logo de Markdown](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)

Renderizado:

9.2 Texto alternativo (alt text)

El texto alternativo tiene dos propósitos principales:

• Accesibilidad: lectores de pantalla lo leen en lugar de la imagen.
• Fallback: aparece si la imagen no se puede cargar.

Ejemplo con error de URL:

![Imagen de ejemplo](https://ruta-no-existe.com/ejemplo.png)

Renderizado (fallido):

👉 El usuario verá el texto “Imagen de ejemplo” en lugar de la imagen.

9.3 Imágenes locales

En proyectos Markdown (por ejemplo, repositorios en GitHub), es común enlazar imágenes almacenadas en el mismo directorio o carpetas internas.

Ejemplo (imagen en la misma carpeta):

![Diagrama del sistema](diagrama.png)

Ejemplo (imagen en carpeta /img):

![Captura de pantalla](img/captura.png)

Ventajas:

• Se mantienen dentro del proyecto.
• Funcionan incluso sin conexión a internet.

Desventajas:

• Aumentan el tamaño del repositorio.
• Si se mueve la carpeta, hay que actualizar las rutas.

9.4 Imágenes remotas

También se pueden usar imágenes alojadas en internet mediante una URL absoluta.

Ejemplo:

![Logo de Python](https://www.python.org/static/community_logos/python-logo.png)

Renderizado:

Ventajas:

• No aumentan el tamaño del proyecto.
• No hace falta incluir archivos adicionales.

Desventajas:

• Dependen de que la URL siga funcionando.
• Necesitan conexión a internet.

9.5 Imágenes con título

Al igual que los enlaces, las imágenes pueden tener un título opcional (tooltip) entre comillas:

![Logo de GitHub](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png "Logo oficial de GitHub")

Renderizado:

9.6 Imágenes clicables (enlaces + imágenes)

Podemos anidar una imagen dentro de un enlace:

[![Logo de Wikipedia](https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png)](https://www.wikipedia.org)

Renderizado (al hacer clic abre Wikipedia):

9.7 Buenas prácticas

• Usar siempre texto alternativo descriptivo, no imagen1.png.
• Preferir imágenes locales para proyectos que deben funcionar offline.
• Preferir imágenes remotas para ejemplos rápidos o cuando no controlamos el almacenamiento.
• Evitar imágenes demasiado pesadas: optimizar en formato PNG o JPG comprimido.
• Mantener organizadas las imágenes en una carpeta (/img, /assets, etc.).
• Usar títulos ("texto") cuando agreguen contexto útil.

9.8 Ejemplo completo

# Ejemplo de imágenes en Markdown

## Imagen remota
![Logo de Markdown](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)

## Imagen local
![Diagrama del sistema](img/diagrama.png)

## Imagen con título
![Logo de GitHub](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png "Logo oficial de GitHub")

## Imagen clicable (enlace + imagen)
[![Logo de Wikipedia](https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png)](https://www.wikipedia.org)

Renderizado:

Ejemplo de imágenes en Markdown

Imagen remota

Imagen local

Imagen con título

Imagen clicable (enlace + imagen)

Conclusión

La sintaxis básica de imágenes es ![texto alternativo](ruta). Se pueden usar imágenes locales (archivos dentro del proyecto) o imágenes remotas (URLs). Markdown también permite añadir títulos y convertir imágenes en enlaces. La clave es mantener un uso organizado, accesible y eficiente de los recursos gráficos.

¿Listo para practicar lo aprendido? Visita el visor de Markdown y pon en práctica los conceptos.