Por qué las imágenes son el problema nº1 de velocidad

En la mayoría de las webs de pyme, las imágenes pesan más que todo lo demás junto. Una portada con tres fotos de 2 MB cada una son 6 MB que el visitante tiene que descargar antes de ver la página completa. Optimizarlas es la mejora de velocidad con más impacto y menos esfuerzo.

Las tres cosas que hay que hacer

1. Redimensionar al tamaño real

El error más común: subir una foto de 4000 px de ancho para mostrarla en un espacio de 800 px. El navegador descarga los 4000 px y luego la encoge. Solución: antes de subirla, redúcela al ancho máximo en el que se va a ver (normalmente 1600–2000 px para una imagen a todo lo ancho, menos para las pequeñas).

2. Comprimir

Una foto sin comprimir guarda mucha más información de la que el ojo nota en pantalla. Comprimirla al 75–85% de calidad reduce el peso a la mitad o menos sin diferencia visible. Herramientas gratis: Squoosh, TinyPNG, o el propio optimizador de tu plataforma.

3. Usar formato moderno

FormatoCuándoPeso relativo
WebPCasi todo hoy. Soportado por todos los navegadores actuales.~30% menos que JPG
AVIFAún mejor, soporte casi total. Ideal para fotos grandes.~50% menos que JPG
JPGFotos, como respaldoreferencia
PNGSolo logos e íconos con transparencia o bordes nítidospesado para fotos
SVGLogos e iconos vectorialesmínimo
Objetivo de peso. Una imagen a todo lo ancho: menos de 200 KB. Una imagen de contenido normal: menos de 100 KB. Un icono o logo: unos pocos KB. Si tus imágenes pesan mucho más, ahí está tu problema de velocidad.

Lazy loading (carga diferida)

Las imágenes que están más abajo, fuera de la pantalla inicial, no hace falta cargarlas hasta que el usuario baje. Eso es el lazy loading: se activa con loading="lazy" en la etiqueta de la imagen. La mayoría de plataformas lo hacen solo.

Excepción importante: la imagen principal de la cabecera (la que determina el LCP) no debe llevar lazy. Esa la quieres cargar cuanto antes, con fetchpriority="high".

Dimensiones para evitar los saltos

Pon siempre width y height (o aspect-ratio) en las etiquetas de imagen. Así el navegador reserva el espacio y el contenido no salta cuando la imagen carga —es la causa nº1 del CLS—.

En WordPress

  • Un plugin de optimización (tipo ShortPixel, Imagify, EWWW) que comprima y convierta a WebP automáticamente al subir.
  • WordPress ya genera varios tamaños de cada imagen y sirve el adecuado según la pantalla.
  • Aun así, sube las fotos ya redimensionadas: el plugin comprime, pero no puede adivinar a qué tamaño las vas a mostrar.
Cómo lo hacemos en ClikRank. Toda web que entregamos sirve las imágenes en WebP/AVIF, redimensionadas, con dimensiones declaradas y lazy loading donde toca. Es la mitad del trabajo de velocidad. Si tu web va lenta, escríbenos.

Preguntas frecuentes

¿Pierdo calidad al comprimir?

A niveles del 75–85% no se nota en pantalla, y ganas mucha velocidad. Por debajo del 60% sí empieza a verse. Prueba con una imagen y compara.

¿WebP se ve en todos los navegadores?

Sí, todos los navegadores actuales lo soportan desde hace años. Para los muy antiguos, lo habitual es servir un JPG de respaldo, cosa que las plataformas y plugins hacen solos.

Tengo cientos de imágenes viejas pesadas. ¿Las cambio una a una?

No: un plugin de optimización procesa toda la biblioteca de golpe. En un sitio a medida se hace con un script. Es una tarea de una vez que suele bajar mucho el peso total del sitio.