Optimizar imágenes para que tu web cargue rápido

Cuando una página tarda en cargar, la primera reacción suele ser culpar al hospedaje. Casi siempre el culpable está más cerca: las imágenes suelen representar entre el 60 % y el 75 % del peso total de una página, y la mayoría se suben tal como salieron de la cámara o del programa de diseño.

1. Sube la imagen del tamaño que se va a ver

Es la corrección que más peso ahorra y la más ignorada. Si el diseño muestra la imagen dentro de un recuadro de 800 píxeles, subir una de 4000 desperdicia el 96 % de los píxeles: el navegador los descarga todos y luego los tira.

Anchuras de referencia: 1600 px para una imagen a todo el ancho, 800 px dentro del texto, 400 px en tarjetas y 150 px en miniaturas. Multiplica por dos si quieres nitidez perfecta en pantallas de alta densidad, pero solo en las imágenes donde el detalle importe.

2. Elige el formato correcto

WebP para casi todo: pesa entre un 25 % y un 35 % menos que JPG con calidad equivalente y lo soportan todos los navegadores actuales. PNG solo cuando necesites transparencia o bordes perfectamente nítidos. SVG para logotipos e iconos, que además escalan sin límite y pesan unos pocos kilobytes.

Convertir un catálogo entero de JPG a WebP con el conversor de imágenes suele recortar un tercio del peso total de la web sin tocar nada más.

3. Comprime con un objetivo, no a ojo

Fija un presupuesto de peso por tipo de imagen y respétalo: 250 KB para la imagen principal, 150 KB para las del contenido, 50 KB para miniaturas. El compresor a un peso máximo ajusta la calidad hasta cumplir el objetivo, que es más práctico que ir probando porcentajes uno por uno.

Un presupuesto total razonable para una página completa: por debajo de 1 MB en móvil. Por encima de 3 MB, la mayoría de visitantes con datos móviles se irán antes de ver el contenido.

4. Carga en diferido lo que no se ve

Las imágenes que están por debajo del primer pantallazo no necesitan descargarse de inmediato. El atributo loading="lazy" las deja para cuando el visitante se acerque a ellas.

Con una excepción importante: la imagen principal no debe ir en diferido. Suele ser el elemento más grande de la primera pantalla, y retrasarla empeora directamente la métrica de carga que mide Google. A esa conviene darle prioridad alta.

5. Reserva el espacio para evitar saltos

Si una imagen no declara sus dimensiones, el navegador no sabe cuánto espacio dejar: pinta el texto, descarga la imagen y empuja todo hacia abajo. Ese salto es molesto y penaliza en las métricas de experiencia.

La solución es indicar siempre width y height en el HTML (o una proporción en CSS). El navegador reserva el hueco exacto desde el principio. Si no recuerdas las dimensiones de una imagen, la calculadora de relación de aspecto te ayuda a calcular la altura que corresponde a la anchura del diseño.

Detalles que suman

• Sirve varios tamaños con srcset para que el móvil no descargue la versión de escritorio.
• Elimina metadatos: recomprimir borra los datos EXIF, que además pueden incluir la ubicación GPS de la foto.
• Cachea a largo plazo: las imágenes casi nunca cambian; un año de caché con nombres versionados es lo habitual.
• Vigila los iconos: cargar una tipografía de iconos completa para usar cuatro símbolos es un despilfarro frecuente.
• Revisa las imágenes de fondo en CSS: no aparecen en el inspector de imágenes y a menudo son las más pesadas.

Cómo comprobar el resultado

Abre las herramientas de desarrollo del navegador, ve a la pestaña de red, filtra por imágenes y ordena por tamaño. Las tres primeras filas te dirán exactamente dónde está el problema. Repite la medición después de optimizar: es la única forma de saber si el trabajo sirvió de algo.

Preguntas frecuentes