Checklist de imágenes para Core Web Vitals

LCP (Largest Contentful Paint)

• La imagen principal está en el HTML como <img>, no insertada por JavaScript.
• Lleva fetchpriority="high" y no lleva loading="lazy".
• Si es un fondo CSS, tiene un <link rel="preload">.
• Se sirve en AVIF (con WebP o JPEG de respaldo en <picture>).
• Sus dimensiones se ajustan al tamaño mostrado, con srcset y sizes.

Detalles en cómo mejorar el LCP.

CLS (Cumulative Layout Shift)

• Todas las imágenes tienen width y height (o aspect-ratio en CSS).
• El CSS usa max-width: 100%; height: auto;.
• Los huecos de anuncios y embebidos tienen altura reservada.

Peso total

• Ninguna imagen supera unos 200 KB salvo causa justificada.
• Las fotos usan formatos con pérdida; las capturas, WebP sin pérdida o PNG optimizado.
• Los logotipos e iconos son SVG cuando es posible.
• Se han eliminado los metadatos EXIF.

Carga diferida

• Las imágenes por debajo del primer pantallazo usan loading="lazy".
• Las primeras 1-4 imágenes visibles no son diferidas.

INP (Interaction to Next Paint)

• Los carruseles y galerías no decodifican imágenes enormes al interactuar.
• Las imágenes llevan decoding="async".

Medición

• PageSpeed Insights: datos reales y de laboratorio por URL.
• Search Console > Core Web Vitals: problemas agrupados por plantilla.
• Chrome DevTools > Rendimiento: para depurar el LCP paso a paso.

Preguntas frecuentes

¿Qué peso máximo debería tener una imagen?

No hay una cifra oficial, pero para una imagen principal 100-200 KB en AVIF o WebP es un objetivo razonable.

¿Las imágenes afectan al INP?

Poco, pero decodificar imágenes muy grandes durante una interacción puede bloquear el hilo principal.