Cómo el peso de las imágenes afecta la velocidad de tu sitio (y qué hacer al respecto)

Si tu sitio se siente lento, las imágenes son el primer lugar donde hay que mirar. En la mayoría de los sitios web representan más peso total de la página que todo el resto de los recursos combinados — HTML, CSS y JavaScript incluidos. Eso también las convierte en lo que más impacto tiene arreglar, ya que un puñado de imágenes bien comprimidas pueden recortar segundos de carga que una docena de ajustes de código no lograrían.

Dónde las imágenes realmente afectan: Core Web Vitals

Los Core Web Vitals de Google son las métricas de velocidad que influyen en el ranking de búsqueda, y las imágenes afectan directamente a dos de las tres:

• Largest Contentful Paint (LCP): cuánto tarda en renderizarse el elemento visible más grande de la página. En la mayoría de los sitios, ese elemento es una imagen — un banner principal, la foto de un producto, la imagen de cabecera de un artículo. Una imagen pesada y sin optimizar es una de las causas individuales más comunes de un mal puntaje de LCP.
• Cumulative Layout Shift (CLS): cuánto se mueve el contenido mientras la página carga. Esto no tiene que ver directamente con el peso del archivo, sino con imágenes que cargan sin tener su tamaño reservado de antemano, lo cual hace que el resto de la página se corra apenas aparecen.

Si alguna vez pasaste una página por PageSpeed Insights o Lighthouse y viste "Largest Contentful Paint" marcado en rojo, hay una buena probabilidad de que una imagen sea la razón.

Qué es lo que realmente marca la diferencia

En orden aproximado de impacto:

1. Comprimir antes de subir, no después. Una foto directo de un teléfono o una cámara suele pesar entre 3 y 10 MB. La misma imagen, bien comprimida, puede quedar en unos cientos de KB sin diferencia visible al tamaño normal de visualización. Este solo paso suele representar la mayor ganancia.
2. Servir las imágenes al tamaño en el que realmente se muestran. Una foto de 4000px de ancho mostrada en una columna de blog de 600px no hace más que desperdiciar ancho de banda — el navegador descarga los 4000px completos de datos solo para achicarla visualmente. Conviene redimensionar a algo cercano al tamaño real de visualización antes de subirla.
3. Usar un formato moderno. WebP ya es seguro de usar en todos lados hoy y típicamente pesa 25-35% menos que un JPG equivalente con la misma calidad visual. AVIF puede ser todavía más liviano donde esté soportado. (Cubrimos las diferencias en WebP vs JPG vs PNG vs AVIF.)
4. Reservar espacio para las imágenes antes de que carguen. Definir un ancho y alto explícitos (o un aspect-ratio) en las etiquetas de imagen le permite al navegador asignar el espacio correcto de inmediato, en vez de mover el diseño de la página cuando la imagen llega — esto es lo que realmente arregla el CLS.
5. Cargar de forma diferida (lazy-load) lo que está debajo del pliegue. Las imágenes que el visitante todavía no vio no necesitan cargar de inmediato. La mayoría de los navegadores modernos soportan esto con un solo atributo HTML (loading="lazy"), sin herramientas adicionales.

Los pasos 1 a 3 tienen que ver con el peso del archivo. Los pasos 4 y 5 tienen que ver con cómo maneja el navegador ese peso mientras la página carga. Ambos importan, pero si solo se puede hacer una cosa hoy, es comprimir bien las imágenes — es el que mejor relación tiene entre esfuerzo e impacto de los cinco.

Cómo saber en qué situación está un sitio

Antes de adivinar, hay que medir. PageSpeed Insights (la herramienta de Google, construida sobre Lighthouse) muestra el LCP y el CLS reales de cualquier URL pública, y señala específicamente qué imágenes son las que más perjudican. Es gratis, toma unos 30 segundos, y dice exactamente dónde enfocar el esfuerzo en vez de optimizar a ciegas.

Hacer bien la parte de la compresión

El error más común no es saltarse la compresión — es usar una herramienta que sube las imágenes a un servidor ajeno para procesarlas, lo cual es más lento, y significa que una copia del contenido (posiblemente todavía no publicado) queda guardada en algún lugar fuera de control mientras se procesa.

img-compress comprime y convierte entre JPG, PNG, WebP y AVIF directo en el navegador — los pasos 1 y 3 de la lista de arriba, hechos localmente. Nada se sube a ningún lado, así que es igual de rápido para una sola imagen de cabecera que para todo un lote de fotos de producto antes de lanzar un sitio. (Redimensionar al tamaño de visualización correcto, el paso 2, sigue siendo algo para hacer en el editor de imágenes o el CMS antes de llegar a este punto.)