Contenido multimedia en el blog
Contenido multimedia en el blog
El blog de Prometheus admite una amplia gama de contenido multimedia incrustado. Este artículo demuestra cada tipo y cómo se renderiza dentro del área de contenido.
Fotografía rasterizada
Las fotografías estándar y las imágenes rasterizadas se optimizan automáticamente con Astro — se convierten a formatos modernos (AVIF, WebP) y se sirven en múltiples tamaños para carga responsive.

Las imágenes rasterizadas funcionan bien para fotografías, capturas de pantalla y cualquier contenido con gradientes de color complejos. Astro las procesa en tiempo de compilación, por lo que no hay sobrecarga en tiempo de ejecución.
Gráficos vectoriales
Las imágenes SVG son ideales para diagramas, iconos e ilustraciones técnicas. Se escalan a cualquier tamaño sin perder calidad y tienen tamaños de archivo diminutos.
Las imágenes vectoriales son particularmente útiles para:
- Diagramas de arquitectura — como el de arriba
- Diagramas de flujo y árboles de decisión
- Iconos y recursos de marca
- Visualizaciones de datos y gráficos
Video
El video incrustado permite tutoriales, demos y narración visual. El reproductor admite controles estándar — reproducir, pausar, volumen, pantalla completa.
Los archivos de video se sirven como recursos estáticos desde el directorio public/. Para producción, considera un CDN o streaming adaptativo para archivos más grandes.
Audio
Los embeds de audio son útiles para podcasts, muestras musicales o narración. El reproductor nativo del navegador proporciona controles de reproducción.
Los archivos de audio siguen la misma estrategia de servicio que el video — recursos estáticos con reproducción nativa del navegador.
Mejores prácticas para medios
Al agregar medios a los artículos, ten en cuenta estas pautas:
- Imágenes: Colócalas en la carpeta
assets/del artículo — Astro las optimiza automáticamente - Gráficos vectoriales: Usa SVG para diagramas e ilustraciones
- Video: Mantén los archivos pequeños o usa hosting externo para contenido más largo
- Audio: Proporciona subtítulos o transcripciones para la accesibilidad
- Texto alternativo: Siempre describe el contenido visual para lectores de pantalla