Optimizar imágenes para tu web

En una página web media, las imágenes son entre el 60 % y el 75 % del peso total. Optimizarlas es, con diferencia, lo que más mejora la velocidad por unidad de esfuerzo. Este es el orden correcto —de mayor a menor impacto— y los tres primeros pasos los haces aquí mismo.

1. Ajustar las dimensiones (el que más ahorra)

El peso crece con el cuadrado del ancho. Una foto de 4000 px mostrada en un contenedor de 1000 px tiene dieciséis veces más píxeles de los necesarios. Antes de tocar nada más, mira en qué ancho real se muestra la imagen y redúcela a eso (o al doble, si quieres que se vea nítida en pantallas de alta densidad).

2. Elegir el formato

WebP para todo, salvo excepciones. Pesa entre un 25 % y un 35 % menos que un JPG equivalente, admite transparencia como el PNG y lo entienden todos los navegadores desde 2020. Reserva el JPG para cuando el destino no admita WebP, y el PNG para cuando necesites una copia sin pérdida.

3. Ajustar la calidad

Entre 75 % y 85 % para fotografías: por debajo empiezan a verse bloques en los degradados, y por encima estás pagando kilobytes que nadie percibe. Para capturas y gráficos con texto, sube al 90 %.

4. Servirlas bien (esto ya en tu código)

La optimización del archivo es la mitad del trabajo. La otra mitad es cómo lo entrega la página:

<img src="foto.webp"
     width="1200" height="800"
     alt="Descripción real de la imagen"
     loading="lazy"
     decoding="async">

• width y height: son obligatorios en la práctica. Sin ellos el navegador no sabe cuánto espacio reservar y el contenido «salta» al cargar, que es exactamente lo que mide el CLS de los Core Web Vitals.
• loading="lazy": en todas las imágenes menos la principal. La de arriba debe cargarse cuanto antes.
• La imagen de cabecera suele ser el elemento que Google mide como LCP. Esa es la que más merece la pena optimizar: precárgala y no le pongas lazy.

Cuánto se gana, en la práctica

Una página con diez fotos de móvil sin tocar pesa unos 25 MB y tarda una eternidad en una conexión móvil. Las mismas diez imágenes a 1200 px y WebP al 80 % suman menos de 1,5 MB. No es un ajuste fino: es la diferencia entre una web que se usa y una que se abandona antes de cargar.