Imágenes Markdown

Las imágenes hacen que tu contenido sea más atractivo y ayudan a ilustrar tus puntos. Markdown proporciona sintaxis simple para agregar imágenes, aunque a veces necesitarás HTML para características más avanzadas.

Sintaxis Básica de Imágenes

La sintaxis básica para imágenes en Markdown es similar a los enlaces, pero con un signo de exclamación al principio: 

![Texto alternativo](url-imagen.jpg)
![Imagen local](./imagenes/foto.jpg)
![Imagen externa](https://example.com/imagen.jpg)

Imágenes con Títulos

Puedes agregar títulos que aparecen cuando los usuarios pasan el cursor sobre la imagen: 

![Texto alternativo](imagen.jpg "Título de la imagen")

Mejores Prácticas de Texto Alternativo

El texto alternativo es crucial para accesibilidad y SEO:

1. Ser Descriptivo

❌ No útil: 

![Imagen](foto.jpg)
![Foto](pic.png)

✅ Descriptivo: 

![Mujer programando en una laptop en una cafetería](programando-cafe.jpg)
![Gráfico de barras mostrando aumento de ventas de 2020 a 2024](grafico-ventas.png)

2. Mantenerlo Conciso

❌ Demasiado largo: 

![Esta es una descripción realmente larga de una imagen que muestra a una persona sentada en una computadora en lo que parece ser un entorno de oficina moderno con paredes blancas y ventanas grandes](oficina.jpg)

✅ Conciso: 

![Persona trabajando en computadora en oficina moderna](oficina.jpg)

3. No Incluir "Imagen de" o "Foto de"

❌ Redundante: 

![Imagen de un perro jugando en el parque](perro.jpg)

✅ Directo: 

![Perro jugando en el parque](perro.jpg)

Imágenes de Estilo de Referencia

Como los enlaces, puedes usar sintaxis de estilo de referencia para imágenes: 

![Texto alternativo][referencia-imagen]  

[referencia-imagen]: imagen.jpg "Título opcional"

Ejemplo

Aquí está nuestro logo: ![Logo de la Empresa][logo]

Y aquí hay una captura de pantalla: ![Captura de Pantalla de la App][captura]

[logo]: /imagenes/logo.png "Logo de Mi Empresa"
[captura]: /imagenes/app.png "Captura de Pantalla del Dashboard de la App"

Rutas de Imágenes y URLs

Imágenes Locales

![Imagen local](./imagenes/foto.jpg)
![Ruta relativa](../assets/icono.png)
![Ruta absoluta](/public/imagenes/banner.jpg)

Imágenes Externas

![Imagen externa](https://example.com/imagen.jpg)
![Foto de Unsplash](https://images.unsplash.com/photo-123/foto.jpg)

Patrones Comunes

Imagen con Leyenda

![Reunión del equipo en sala de conferencias](reunion.jpg)
*Figura 1: Reunión semanal del equipo discutiendo hitos del proyecto*

Imágenes de Antes/Después

## Antes
![Diseño antiguo del sitio web](diseño-antiguo.png)

## Después
![Nuevo diseño del sitio web](diseño-nuevo.png)

Instrucciones Paso a Paso

1. Haz clic en el ícono de configuración
   ![Ícono de configuración en la esquina superior derecha](icono-configuracion.png)

2. Selecciona "Configuración de Cuenta"
   ![Opción del menú de configuración de cuenta](menu-cuenta.png)

3. Actualiza tu información de perfil
   ![Formulario de perfil con campos editables](formulario-perfil.png)

Galería de Imágenes

## Capturas de Pantalla del Proyecto

![Página de inicio](inicio.png) ![Dashboard](dashboard.png) ![Configuración](configuracion.png)

Solución de Problemas de Imágenes

Problemas Comunes

  1. Imagen no se muestra: Verifica la ruta del archivo y el nombre del archivo

  2. Ícono de imagen rota: Verifica que la URL de la imagen sea accesible
  3. Imagen demasiado grande: Redimensiona o comprime la imagen
  4. Formato incorrecto: Asegúrate de que el navegador soporte el formato de imagen

Probar Imágenes

  • •
    Vista previa en tu editor de Markdown

  • •
    Verifica en diferentes navegadores
  • •
    Verifica en dispositivos móviles
  • •
    Prueba con conexiones de internet lentas

Técnicas Avanzadas

Enlaces de Imagen

Combina imágenes con enlaces: 

[![Haz clic para ver más grande](miniatura.jpg)](tamaño-completo.jpg)

¡Las imágenes son una forma poderosa de mejorar tus documentos Markdown. Úsalas reflexivamente para apoyar tu contenido y mejorar la experiencia del usuario!

¿Necesitas enfatizar texto en tu contenido? Aprende sobre formato de tachado a continuación.