Las imágenes son el recurso más pesado y común en la web. Optimizarlas correctamente mejora LCP, CLS y la experiencia general.

Formatos modernos

AVIF: mejor compresión pero codificación lenta. WebP: equilibrio calidad/velocidad. JPEG XL: prometedor pero soporte limitado. Proporciona múltiples formatos con <picture>.

Carga responsive

srcset con diferentes tamaños. sizes para indicar el espacio que ocupa la imagen. El navegador selecciona la imagen óptima.

Lazy loading

loading="lazy" nativo para imágenes fuera del viewport. fetchpriority="high" para la LCP image. Intersection Observer para control granular.

CDN de imágenes

Cloudinary, Imgix, Cloudflare Images. Transformaciones en el edge: redimensionar, recortar, cambiar formato, ajustar calidad automáticamente.