Por qué las imágenes son el problema principal de performance
En promedio, las imágenes representan el 50-60% del peso total de una página web. Una foto tomada con un celular moderno puede pesar 4-8MB. Sin optimización, esa imagen puede destruir el LCP y hacer que el sitio se sienta lento incluso con buen hosting.
Los formatos modernos: WebP y AVIF
WebP: desarrollado por Google, tiene soporte en todos los browsers modernos. Comprime imágenes entre un 25% y 35% mejor que JPEG sin pérdida visible de calidad. Es el mínimo que deberías estar usando hoy.
AVIF: más nuevo y más eficiente. Comprime entre un 50% y 60% mejor que JPEG. El soporte de browsers ya es amplio. La estrategia recomendada es ofrecer AVIF con fallback a WebP y JPEG usando la etiqueta picture.
Responsive images: entregar el tamaño correcto
No tiene sentido cargar una imagen de 1920px en un celular con pantalla de 400px. El atributo srcset permite especificar múltiples versiones de la imagen para que el navegador elija la más apropiada. Usá versiones de 400w, 800w y 1200w para servir el tamaño correcto según el dispositivo.
Lazy loading: no cargar lo que no se ve
El atributo loading='lazy' hace que las imágenes fuera del viewport inicial no se carguen hasta que el usuario se acerque. Una línea de código que puede mejorar significativamente el tiempo de carga inicial. Nunca uses lazy loading en la imagen hero: esa debe cargarse de inmediato.
Dimensiones siempre definidas
Definir siempre los atributos width y height en las imágenes evita el CLS. Sin dimensiones, el navegador no sabe cuánto espacio reservar y el contenido salta cuando la imagen carga, impactando directamente en Core Web Vitals.
Herramientas para optimizar imágenes
Squoosh (squoosh.app) para optimización manual con preview en tiempo real. ImageMagick para procesamiento en batch. En WordPress, plugins como ShortPixel o Imagify automatizan el proceso. En proyectos custom, la librería Sharp para Node.js es la más rápida.