En la mayoría de sitios, las imágenes son el factor único más importante en las puntuaciones de Core Web Vitals. Suelen ser el elemento visible más grande, la causa más común de saltos de diseño y un motivo frecuente de bloqueo del hilo principal. Esta guía recorre todas las palancas relacionadas con imágenes para mantener LCP, CLS e INP en verde.
Las tres métricas, en breve
- LCP (Largest Contentful Paint): cuándo termina de pintarse el elemento visible más grande. Objetivo: ≤ 2,5 s.
- CLS (Cumulative Layout Shift): cuánto salta el contenido visible mientras carga. Objetivo: ≤ 0,1.
- INP (Interaction to Next Paint): qué tan rápida se siente una interacción. Objetivo: ≤ 200 ms. Reemplazó a FID en 2024.
Las tres dependen de imágenes. Vamos a las tácticas.
1. Que la imagen LCP cargue la primera
En la mayoría de landing pages, el LCP es una imagen hero. Tres victorias rápidas:
- Precárgala. Añade
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">en<head>. - Pon
fetchpriority="high"también directamente en la etiqueta<img>. - Nunca pongas
loading="lazy"en la imagen LCP. Es uno de los avisos más frecuentes de Lighthouse.
2. Usa un formato moderno
Pasar de JPG/PNG a WebP o AVIF reduce mucho el peso con la misma calidad visual. Esto va directo al LCP. Usa <picture> para mantener un fallback JPG en clientes muy antiguos:
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/24picture/hero.jpg" alt="..." width="1920" height="1080">
</picture>Convierte PNG en segundos con nuestra herramienta PNG → WebP.
3. Comprime con cabeza
La calidad 80 para JPG/WebP es el punto dulce para fotos: indistinguible de calidad 95, pero la mitad de tamaño. Para gráficos, prefiere WebP sin pérdida o PNG comprimido. Reduce peso de un clic con nuestro compresor (todo en el navegador, los archivos no salen de tu equipo).
4. Siempre indica width y height
La medida más importante para el CLS. width y height no son píxeles de layout — los navegadores modernos los usan para reservar el espacio con la relación de aspecto antes de cargar la imagen:
<img src="/24picture/hero.webp" width="1920" height="1080" alt="...">Combinado con CSS max-width: 100%; height: auto;, la imagen escala sin saltos.
5. Usa srcset para tamaños responsivos
Servir 4K a un móvil de 360 px es desperdicio. Con srcset + sizes cada dispositivo descarga lo justo:
<img
src="/24picture/hero-1280.webp"
srcset="/hero-640.webp 640w, /hero-1280.webp 1280w, /hero-1920.webp 1920w"
sizes="(max-width: 768px) 100vw, 1280px"
alt="..." width="1920" height="1080">¿Necesitas redimensionar lotes? Prueba nuestra herramienta de redimensionado.
6. Carga diferida bajo el pliegue
Pon loading="lazy" en cada <img> bajo la primera vista. El navegador solo las descarga al acercarse al scroll. Libera ancho de banda y CPU para el LCP y mejora indirectamente el INP.
Excepción: la imagen LCP y todo lo que precargues no deben usar loading="lazy".
7. Decodificación asíncrona
decoding="async" en imágenes no críticas permite decodificar fuera del hilo principal y protege el INP en scroll y taps.
8. Cuidado con sprites SVG y fuentes
Si usas sprites o SVG grandes, pásalos por un optimizador. Nuestro optimizador SVG suele recortar bastante peso y reduce el parseo, lo que ayuda al INP en páginas con muchas interacciones.
9. Carruseles que no salten
Reserva un contenedor de altura fija. Si las diapositivas tienen distintas relaciones de aspecto, normalízalas con object-fit: cover. Los carruseles que se redimensionan al cargar nuevas slides son un gran generador de CLS.
10. Caché agresiva
Pon Cache-Control: public, max-age=31536000, immutable en imágenes con nombre con hash. Los visitantes recurrentes pasarán LCP perfecto.
Lista de auditoría rápida
- LCP precargada con
fetchpriority=high✓ - WebP/AVIF con fallback ✓
- Calidad 80 o equivalente ✓
- width y height en cada imagen ✓
srcset+sizesen hero y contenido ✓loading=lazy+decoding=asyncbajo el pliegue ✓- SVG optimizados ✓
- Cabeceras de caché largas ✓
Consejo: la mayoría de fallos de LCP que vemos vienen de una sola imagen hero gigante. Conviértela, ponle dimensiones y precárgala — la puntuación sube antes de tocar nada más.
Conclusión
Core Web Vitals no es magia. Las imágenes dominan las métricas y casi todas las correcciones son una línea de HTML o un paso por un conversor. Acierta con la hero, pon dimensiones en todas y aplica carga diferida abajo: pasarás.
¿Necesitas un punto de partida? Pasa la hero por nuestro compresor, conviértela con PNG → WebP y verás caer el LCP.
