Imágenes en Markdown

Markdown permite insertar imágenes fácilmente usando una sintaxis similar a la de los enlaces.

Sintaxis Básica

![Texto alternativo](ruta/imagen.png)

• Texto alternativo: Descripción de la imagen (importante para accesibilidad y SEO).
• ruta/imagen.png: Ruta relativa o URL absoluta de la imagen.

Visualización Renderizada:

Añadir Título a la Imagen

Puedes añadir un título opcional entre comillas después de la URL:

![Logo de Markdown](https://www.markdownlang.com/static/images/logo.png "Logo de Markdown")

Visualización Renderizada:

Imágenes como Enlaces

Haz clic en la imagen para abrir un enlace:

[![Texto alternativo](ruta/imagen.png)](https://ejemplo.com)

Imágenes Locales y Remotas

• Locales: ![Alt](./imagenes/foto.jpg)
• Remotas: ![Alt](https://sitio.com/foto.jpg)

Ajustar Tamaño de Imágenes (HTML)

Markdown estándar no permite cambiar el tamaño, pero puedes usar HTML:

<img src="ruta/imagen.png" alt="Texto alternativo" width="200" height="100">

Buenas Prácticas

• Usa texto alternativo descriptivo.
• Optimiza el tamaño de las imágenes para carga rápida.
• Usa rutas relativas para imágenes locales.
• Usa HTTPS para imágenes externas.

Errores Comunes

1. Olvidar el signo de exclamación

[Alt](imagen.png)

Esto crea un enlace, no una imagen.

2. Ruta incorrecta

![Alt](imagenes/foto.png)

Verifica que la ruta sea correcta.

3. No cerrar el paréntesis

![Alt](imagen.png

Falta el paréntesis de cierre.

Sintaxis Relacionada

• Enlaces - Sintaxis de enlaces
• Listas - Listas ordenadas y desordenadas
• Énfasis - Negrita y cursiva

Práctica

1. Inserta una imagen local y una remota.
2. Añade un título a una imagen.
3. Haz que una imagen sea un enlace.