Español ▾
Free, Fast & Secure Online Tools
Si tu web carga lento, lo más probable es que las imágenes sean las culpables. En la mayoría de páginas web, las imágenes representan entre el 50% y el 80% del peso total de los datos transferidos. Entender cómo las imágenes impactan en la velocidad —y qué puedes hacer al respecto— es una de las habilidades más valiosas para cualquier webmaster, desarrollador o dueño de un negocio online.
Según los datos de HTTP Archive, el peso medio de una página web en 2024 es de aproximadamente 2,5 MB en escritorio. De ese total:
El impacto de las imágenes en el tiempo de carga es, por tanto, desproporcionadamente grande.
El LCP mide el tiempo que tarda en renderizarse el elemento más grande visible en el viewport inicial. En la mayoría de páginas, ese elemento es una imagen: el banner principal, la foto de portada de un artículo o la imagen destacada de un producto. Un LCP lento es directamente consecuencia de una imagen de portada pesada o mal optimizada.
Google considera un LCP bueno si es inferior a 2,5 segundos. Una imagen de portada de 3 MB puede elevarlo fácilmente a 5–8 segundos en conexiones móviles.
El FCP mide cuándo aparece el primer contenido visible. Si hay imágenes críticas en la parte superior de la página que bloquean el renderizado, el FCP se resiente.
Las imágenes sin dimensiones definidas provocan saltos de diseño (layout shift) mientras se cargan. El navegador no sabe cuánto espacio reservar, y cuando carga la imagen, empuja el contenido hacia abajo. Definir siempre los atributos width y height en las etiquetas <img> elimina este problema.
Puedes medir el impacto de las imágenes en tu web con estas herramientas gratuitas:
Migra a WebP como formato estándar. Consigue archivos un 25–35% más pequeños que JPG con calidad equivalente. Para imágenes de máxima prioridad, considera AVIF.
Exporta siempre la imagen al ancho máximo en que se mostrará (multiplicado por 2 para pantallas Retina). Una imagen mostrada a 600 px no necesita tener 3000 px de ancho.
Usa el atributo nativo loading="lazy" en todas las imágenes que estén fuera del viewport inicial. El navegador solo cargará esas imágenes cuando el usuario se aproxime a ellas:
<img src="imagen.webp" alt="Descripción" loading="lazy" width="800" height="600">La imagen principal de la página (banner, foto de portada) es la que más impacta en el LCP. Para ella:
fetchpriority="high" para indicar al navegador que la priorice<link rel="preload"> en el <head>Sirve imágenes de tamaño diferente según el dispositivo con el atributo srcset. Un usuario de móvil con pantalla de 390 px no necesita descargar una imagen de 1920 px.
Las redes de distribución de contenidos (CDN) almacenan copias de tus imágenes en servidores repartidos por todo el mundo. Cada usuario descarga las imágenes desde el nodo más cercano, reduciendo la latencia de forma significativa.
Añadir los atributos de dimensión a todas las imágenes elimina el layout shift y mejora el CLS:
<img src="producto.webp" alt="Zapatillas running" width="800" height="800">La velocidad de carga no es solo una métrica técnica. Sus consecuencias son directas y medibles:
Las imágenes son el principal cuello de botella de velocidad en la mayoría de webs, pero también son el área donde las mejoras son más fáciles de implementar y más impactantes. Usar el formato correcto, redimensionar adecuadamente, activar lazy loading y apoyarse en un CDN son medidas que cualquiera puede aplicar y que producen resultados inmediatos en velocidad, SEO y experiencia de usuario.
Hazlo en tu navegador, sin que el archivo salga de tu equipo: Herramientas de imagen