Guía de optimización de imágenes

Optimización de imágenes en Astro

Este blog está configurado con el servicio de imágenes de Cloudflare para optimización automática. Además, incluye componentes personalizados para generar imágenes en formatos WebP y AVIF con múltiples tamaños responsive.

Componentes disponibles

1. OptimizedImage (un solo formato)

Para cuando necesitas un formato específico optimizado:

---
import OptimizedImage from '../components/OptimizedImage.astro';
import miImagen from '../assets/mi-imagen.jpg';
---

<OptimizedImage
  src={miImagen}
  alt="Descripción de la imagen"
  widths={[640, 768, 1024, 1280]}
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
  format="webp"
  quality={85}
/>

2. ResponsivePicture (múltiples formatos)

Para máxima compatibilidad y optimización (recomendado):

---
import ResponsivePicture from '../components/ResponsivePicture.astro';
import miImagen from '../assets/mi-imagen.jpg';
---

<ResponsivePicture
  src={miImagen}
  alt="Descripción de la imagen"
  widths={[640, 768, 1024, 1280, 1536]}
  sizes="(max-width: 640px) 100vw, 1200px"
  formats={['avif', 'webp']}
  fallbackFormat="jpg"
  quality={80}
/>

Configuración del blog

Formatos soportados

AVIF: Mejor compresión (~50% más pequeño que JPG)
WebP: Excelente soporte y compresión (~30% más pequeño que JPG)
PNG: Para imágenes con transparencia
JPG: Fallback universal

Tamaños responsive generados

El blog genera automáticamente imágenes en estos tamaños:

640px (móviles pequeños)
768px (móviles grandes/tablets)
1024px (tablets/pantallas pequeñas)
1280px (laptops)
1536px (pantallas grandes)
1920px (pantallas muy grandes/4K)

Opciones de configuración

Propiedad	Valor por defecto	Descripción
`widths`	`[640, 768, 1024, 1280, 1536, 1920]`	Tamaños a generar
`sizes`	Ver código	Media queries para el navegador
`formats`	`['avif', 'webp']`	Formatos a generar (Picture)
`format`	`'webp'`	Formato único (Image)
`quality`	`80`	Calidad de compresión (1-100)
`loading`	`'lazy'`	Carga diferida
`decoding`	`'async'`	Decodificación asíncrona

Ejemplo completo

---
import ResponsivePicture from '../components/ResponsivePicture.astro';
import foto from '../assets/foto.jpg';
---

<article>
  <ResponsivePicture
    src={foto}
    alt="Foto de ejemplo optimizada"
    widths={[640, 1024, 1536]}
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px"
    formats={['avif', 'webp']}
    quality={85}
    loading="lazy"
    class="mi-imagen"
  />
</article>

<style>
  .mi-imagen {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
</style>

Beneficios de esta configuración

🚀 Rendimiento: AVIF puede reducir el tamaño hasta 50% vs JPG
📱 Responsive: El navegador descarga solo el tamaño necesario
🌐 Compatibilidad: Fallback automático a formatos soportados
⚡ Lazy loading: Las imágenes cargan solo al entrar en viewport
🎨 Calidad: Control fino de compresión por formato

Notas importantes

Las imágenes deben importarse desde src/assets/ o public/
Usa loading="eager" para imágenes críticas (LCP)
El formato AVIF puede tardar más en generarse durante el build
Cloudflare optimiza automáticamente las imágenes en producción

¡El blog está optimizado para cargar imágenes rápidamente en cualquier dispositivo!