Imágenes WebP y Core Web Vitals: cómo hacer tu web más rápida

Las imágenes suelen ser lo que más pesa en una web. Cómo convertirlas a WebP, servir el tamaño justo y mejorar las métricas que Google usa para medir la experiencia.

2 min de lecturaSolprisoft

En la mayoría de webs que revisamos, las imágenes son más de la mitad del peso de la página. Arreglarlas es la mejora de velocidad más barata que existe, y Google la tiene en cuenta.

Las Core Web Vitals en dos minutos

Son las tres métricas con las que Google mide la experiencia real de los usuarios:

  • LCP (Largest Contentful Paint): cuánto tarda en verse lo más grande de la pantalla. Bueno: 2,5 segundos o menos.
  • INP (Interaction to Next Paint): cuánto tarda la página en responder a un toque o clic. Bueno: 200 milisegundos o menos.
  • CLS (Cumulative Layout Shift): cuánto se mueve el contenido mientras carga. Bueno: 0,1 o menos.

Las imágenes afectan sobre todo al LCP y al CLS.

1. Usa WebP (o AVIF)

WebP ofrece la misma calidad visual que JPEG o PNG con bastante menos peso, y todos los navegadores actuales lo admiten. En esta misma web, las capturas de nuestros proyectos pasaron de PNG de más de un megabyte a WebP de entre 40 y 100 kilobytes.

2. Sirve el tamaño justo

Una foto de 3000 píxeles mostrada en un hueco de 400 obliga al móvil a descargar siete veces más de lo necesario. Genera varias versiones y deja que el navegador elija con srcset y sizes:

<img src="foto.webp" srcset="foto-800.webp 800w, foto.webp 1600w" sizes="(max-width: 640px) 100vw, 800px" alt="…">

3. Indica ancho y alto

Poner width y height en cada imagen permite al navegador reservar su hueco antes de descargarla, y el texto no salta. Es la forma más sencilla de mejorar el CLS.

4. Carga diferida, pero no en la primera pantalla

loading="lazy" retrasa las imágenes que están más abajo hasta que el usuario se acerca a ellas. No la uses en la imagen principal de arriba: ahí conviene lo contrario, fetchpriority="high", para que llegue antes y mejore el LCP.

5. Comprime con criterio

Una calidad de 75 a 82 en WebP suele ser invisible a simple vista y ahorra mucho. Revisa siempre caras, degradados y texto dentro de la imagen, que es donde se notan los fallos.

Cómo medirlo

PageSpeed Insights muestra tus Core Web Vitals con datos reales de usuarios, si tu web tiene tráfico suficiente, y con una prueba de laboratorio. Mide antes y después de cada cambio.

Si tu web es para un negocio local, la velocidad en el móvil es aún más importante: lo explicamos en web para taxistas.