Guía con Imágenes
Guía: Cómo Usar Imágenes en Starlight
Section titled “Guía: Cómo Usar Imágenes en Starlight”Esta guía demuestra cómo agregar imágenes a tu documentación.
Método 1: Imágenes desde public/
Section titled “Método 1: Imágenes desde public/”Las imágenes en public/ son accesibles directamente:
Método 2: Imágenes con ruta relativa
Section titled “Método 2: Imágenes con ruta relativa”Para imágenes en src/assets/:
Método 3: Imágenes con ancho personalizado
Section titled “Método 3: Imágenes con ancho personalizado”Usando HTML para control total:
<img src="/logo-prisma.png" alt="Logo Prisma" width="200" />Consejos
Section titled “Consejos”Capturas de Pantalla Paso a Paso
Section titled “Capturas de Pantalla Paso a Paso”Paso 1: Preparar la imagen
Section titled “Paso 1: Preparar la imagen”- Captura la pantalla usando tu herramienta preferida
- Guarda la imagen en
public/images/con un nombre descriptivo - Referencia la imagen en tu markdown
Paso 2: Insertar en el documento
Section titled “Paso 2: Insertar en el documento”Usa la sintaxis de markdown:
Paso 3: Ajustar tamaño si es necesario
Section titled “Paso 3: Ajustar tamaño si es necesario”Si la imagen es muy grande, usa HTML:
<img src="/images/screenshot-large.png" alt="Screenshot" width="800" />Formatos recomendados
Section titled “Formatos recomendados”| Tipo de contenido | Formato recomendado | Razón |
|---|---|---|
| Capturas de pantalla | PNG | Sin pérdida de calidad |
| Fotografías | JPG | Menor tamaño de archivo |
| Íconos simples | SVG | Escalable sin pérdida |
| Animaciones | GIF | Soportado universalmente |
Organización de archivos
Section titled “Organización de archivos”Mantén tus imágenes organizadas en subcarpetas:
public/images/├── screenshots/│ ├── dashboard-principal.png│ └── configuracion-usuario.png├── icons/│ ├── check.svg│ └── warning.svg└── tutorial/ ├── paso-1.png ├── paso-2.png └── paso-3.png