Cómo optimizar imágenes para que tu web cargue más rápido (Core Web Vitals)

Según los informes anuales del estado de la web (como el HTTP Archive), las imágenes representan de media entre el 40% y el 50% del peso total de una página. Es, con diferencia, el recurso con más margen de optimización en la mayoría de sitios. Esta guía cubre las técnicas que más impacto tienen, ordenadas de mayor a menor prioridad.

1. Elige el formato correcto

El primer ahorro, y el más fácil de conseguir, es el formato. Convertir fotografías de JPG a WebP reduce el peso entre un 25% y un 34% sin pérdida de calidad perceptible; convertir gráficos, logos o capturas de PNG a WebP puede ahorrar hasta un 80% en algunos casos. Si tu web todavía sirve imágenes en JPG o PNG, este es el cambio con mejor relación esfuerzo-resultado que puedes hacer hoy mismo.

2. No sirvas imágenes más grandes de lo necesario

Es habitual subir una foto de 4000×3000 píxeles directamente desde una cámara o móvil para mostrarla en un espacio de 800×600 en la web. El navegador la descarga entera y la reescala visualmente, desperdiciando ancho de banda. Antes de subir una imagen, redimensiónala al tamaño máximo real al que se va a mostrar (o al doble, si quieres cubrir pantallas de alta densidad como Retina).

3. Ajusta la calidad de compresión

No hace falta usar siempre el 100% de calidad. Para la mayoría de fotografías web, un valor de calidad entre el 75% y el 85% es visualmente indistinguible del original pero reduce notablemente el peso del archivo. Solo en casos donde la imagen se va a ampliar mucho (zoom de producto, por ejemplo) tiene sentido subir la calidad por encima del 90%.

4. Usa carga diferida (lazy loading)

Añadir el atributo loading="lazy" a las etiquetas <img> que están fuera de la primera pantalla (below the fold) evita que el navegador las descargue hasta que el usuario esté a punto de verlas. Es una línea de código con impacto directo en el tiempo de carga inicial.

5. Reserva el espacio con width y height

Especificar los atributos width y height (o su equivalente en CSS con aspect-ratio) permite al navegador reservar el espacio de la imagen antes de que termine de descargarse, evitando saltos de layout. Esto afecta directamente a la métrica CLS (Cumulative Layout Shift) de Core Web Vitals.

6. Cuida especialmente la imagen LCP

La métrica LCP (Largest Contentful Paint) mide cuánto tarda en aparecer el elemento más grande visible al cargar la página, que en la mayoría de sitios es una imagen (una foto de cabecera, un banner, la imagen destacada de un artículo). Esa imagen concreta nunca debería llevar loading="lazy" —se necesita cuanto antes—, y conviene que esté en el formato más ligero posible (WebP) y con el tamaño ya optimizado.

Herramientas para medir el peso real de tus imágenes

Antes de optimizar conviene saber dónde estás perdiendo tiempo de carga. Las herramientas más útiles y gratuitas son PageSpeed Insights (de Google, analiza una URL pública y da una puntuación junto con recomendaciones concretas), Lighthouse (integrado en las herramientas de desarrollador de Chrome, útil también en local o en desarrollo), y la pestaña "Network" del propio navegador, que muestra el peso y tiempo de descarga de cada imagen individual al cargar la página.

Imágenes responsive: sirve el tamaño correcto según el dispositivo

Además de optimizar cada imagen individualmente, puedes servir distintos tamaños según el dispositivo del visitante usando el atributo srcset:

<img
  src="producto-800.webp"
  srcset="producto-400.webp 400w, producto-800.webp 800w, producto-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Nombre del producto" />

Con esto, un móvil descarga la versión de 400 px en lugar de la de 1200 px pensada para escritorio, ahorrando datos y tiempo de carga sin que tengas que mantener versiones separadas de la página.

Errores comunes al optimizar imágenes

• Comprimir en exceso: bajar la calidad por debajo del 60-65% suele introducir artefactos visibles (sobre todo en fotografías con cielos, piel o degradados suaves) sin un ahorro de peso proporcional.
• Olvidar la imagen LCP: aplicar loading="lazy" a la imagen principal de la primera pantalla retrasa precisamente la métrica que más se quiere mejorar.
• No comprobar el resultado en un dispositivo real: las diferencias de compresión a veces solo se notan en pantallas de alta densidad; conviene revisar en un móvil real antes de dar por bueno un nivel de calidad.
• Subir directamente la foto de la cámara sin redimensionar: es, con diferencia, la causa más habitual de páginas lentas en sitios gestionados sin un flujo de optimización establecido.

Resumen del proceso recomendado

1. Redimensiona la imagen al tamaño real que necesitas.
2. Conviértela a WebP con una calidad entre 75% y 85%.
3. Añade width, height y, si está fuera de la primera pantalla, loading="lazy".
4. Vuelve a medir con PageSpeed Insights o Lighthouse para confirmar la mejora.

El paso de conversión a WebP puedes hacerlo gratis y por lotes (hasta 10 imágenes a la vez) en convertidorwebp.com, ajustando la calidad con un control deslizante antes de descargar.