Cómo hacer que las imágenes de tu web carguen más rápido (sin desenfoque)

Por qué importa el peso de las imágenes

Lo más lento de una página suele ser su imagen más grande, y con frecuencia es lo que el navegador mide como Largest Contentful Paint (LCP). Los Core Web Vitals de Google consideran bueno un LCP inferior a 2,5 segundos. Una foto principal de 3 MB en una conexión móvil puede agotar por sí sola todo ese presupuesto.

1. Sirve las imágenes al tamaño con que se muestran

No tiene sentido enviar una foto de 4000 píxeles a un hueco que la muestra con 800 píxeles de ancho. Como regla práctica, una imagen debería tener como mucho el doble de su ancho mostrado, lo que la mantiene nítida en pantallas de alta densidad. Anchos típicos: 1600–2000 px para una imagen principal a todo el ancho, 800–1200 px para las imágenes de un artículo, 300–400 px para las miniaturas.

2. Usa un formato moderno

Los archivos WebP suelen ser un 25–35 % más pequeños que el JPG con calidad similar, y todos los navegadores actuales los admiten. Usa PNG solo donde necesites gráficos sin pérdida o transparencia. Si debes dar soporte a software más antiguo, conserva un JPG de respaldo. Consulta JPG vs PNG vs WebP para los detalles.

3. Comprime a un peso razonable

Estos son objetivos orientativos, no reglas: una imagen principal por debajo de unos 200 KB, las imágenes dentro de los artículos por debajo de unos 100 KB y las miniaturas por debajo de unos 30 KB. Fija el objetivo y deja que la herramienta encuentre la calidad más alta que lo cumpla, en lugar de ir probando con un control.

4. Carga de forma diferida las imágenes que quedan fuera de la pantalla

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

La carga diferida (lazy loading) aplaza las imágenes hasta que el visitante se desplaza cerca de ellas. No apliques esto a la imagen principal de la parte superior de la página: esa debe cargarse de inmediato, porque suele ser el elemento LCP.

5. Establece siempre el ancho y el alto

Con las dimensiones en el HTML, el navegador reserva la cantidad de espacio adecuada antes de que llegue la imagen, así que la página no da saltos mientras carga (ese salto se mide como Cumulative Layout Shift). Un atributo alt descriptivo ayuda a la accesibilidad y a la búsqueda de imágenes.

6. Ofrece varios tamaños con srcset

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

El navegador elige el archivo más pequeño que sea lo bastante nítido para la pantalla del visitante, de modo que un móvil no descarga la versión de escritorio.

Cómo comprobar tu trabajo

Pasa la página por PageSpeed Insights o por Lighthouse en las herramientas para desarrolladores de Chrome. Ambos señalan las imágenes sobredimensionadas y sin optimizar y estiman los bytes exactos que ahorrarías.

Preparar los archivos

1. Convierte la imagen a WebP.
2. Fija el ancho que necesitas en la herramienta de redimensionado, con la proporción bloqueada.
3. Establece un peso máximo y comprueba el resultado con el control antes/después.
4. Exporta un archivo por cada ancho que vayas a usar en srcset.

Trabaja desde el original en cada exportación. Comprimir una copia ya comprimida pierde más calidad que comprimir la fuente una sola vez.

Preguntas frecuentes