Guía

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

Las imágenes son la mitad del peso de una web media. Cuatro decisiones, ningún rediseño, y la página baja entre un 40 % y un 70 %.

En una web media, las imágenes son entre el 50 % y el 70 % de todo lo que el navegador descarga. Si tu página va lenta, casi siempre la culpa está ahí y no en el código. La buena noticia es que arreglarlo no requiere ser desarrollador: cuatro decisiones bien tomadas se llevan la mayor parte del problema.

1. Sirve el tamaño que realmente se muestra

El error número uno es subir la foto tal como salió de la cámara. Una imagen de 4032 px de ancho mostrada en una columna de 760 px descarga cinco veces más datos de los necesarios. Antes de subir nada, mira el ancho real del hueco donde va la imagen y redimensiona a ese ancho, o al doble si quieres que se vea nítida en pantallas de alta densidad.

Referencias que funcionan bien en la mayoría de plantillas:

• Imagen a todo el ancho (hero): 1920 px.
• Imagen dentro de un artículo: 1280 px.
• Tarjeta o listado: 800 px.
• Miniatura: 400 px.
• Avatar: 200 px.

2. Usa WebP

A igualdad de calidad percibida, WebP pesa entre un 25 % y un 35 % menos que JPG. Lo entienden todos los navegadores en uso hoy. Convertir las imágenes de un sitio a WebP es, con diferencia, la mejora de mejor relación esfuerzo/resultado que existe: no cambias el diseño, no tocas el código y la página baja de peso un tercio.

Si tu gestor de contenidos no convierte solo, puedes convertir por lotes a WebP antes de subir.

3. Carga diferida para lo que no se ve

Las imágenes que están por debajo del primer pantallazo no necesitan descargarse hasta que el visitante llegue a ellas. Basta con añadir un atributo a la etiqueta:

<img src="foto.webp" alt="…" loading="lazy" decoding="async">

Con una excepción importante: la imagen principal del primer pantallazo NO debe llevar loading="lazy". Esa es justo la que quieres que llegue cuanto antes, porque normalmente es la que mide Google como Largest Contentful Paint. A esa ponle fetchpriority="high".

4. Reserva el espacio para que la página no salte

Si una imagen no declara sus dimensiones, el navegador no sabe cuánto sitio dejarle y el contenido salta cuando termina de cargar. Ese salto se mide (Cumulative Layout Shift) y penaliza. La solución es de una línea: pon siempre width y height en la etiqueta, con los valores reales del archivo. El CSS puede seguir escalando la imagen; lo que importa es que el navegador conozca la proporción desde el primer momento.

Las tres métricas que Google mira

Un flujo de trabajo que puedes repetir

1. Junta todas las imágenes que vas a subir en una carpeta.
2. Redimensiona por lotes al ancho que toque según la tabla de arriba.
3. Conviértelas a WebP con calidad 78–82.
4. Renómbralas con palabras descriptivas y guiones: zapatilla-running-azul.webp, no IMG_4821.webp. El nombre del archivo es una señal real para la búsqueda de imágenes.
5. Súbelas y escribe un alt que describa la imagen para quien no puede verla. No es relleno de palabras clave: es accesibilidad, y de paso posiciona.

Los pasos 2 y 3 se hacen de una sola pasada en el compresor: eliges tamaño máximo, formato de salida WebP y calidad, sueltas las treinta imágenes y descargas el ZIP.

Cuánto se puede esperar

En sitios reales, aplicar estos cuatro puntos suele dejar la página entre un 40 % y un 70 % más ligera. Una portada que pesaba 4 MB baja a 1,2 MB, y el tiempo hasta que se ve algo cae a la mitad en conexiones móviles. No hace falta rediseñar nada: es puro trabajo de preparación de archivos.