Las imágenes son el recurso más pesado en la mayoría de sitios web. Optimizarlas mejora drásticamente LCP y la experiencia general.

Formatos modernos

WebP: soporte universal, compresión 30% mejor que JPEG. AVIF: hasta 50% mejor que JPEG, pero mayor coste de codificación. JPEG XL: prometedor pero soporte limitado.

Imágenes responsive

<picture> con <source> para formatos múltiples. srcset y sizes para diferentes resoluciones. El navegador selecciona la imagen óptima según la pantalla.

Lazy loading

loading="lazy" para imágenes fuera del viewport inicial. fetchpriority="high" para la LCP image. Intersection Observer para carga programática.

CDN de imágenes

Servicios como Cloudinary, Imgix, o Cloudflare Images redimensionan y optimizan automáticamente. Transformaciones en el edge: formato, calidad, dimensiones.