Por qué su sitio web es lento: una lista de verificación de optimización de imágenes para 2026
Ejecute su sitio web a través de Google PageSpeed Insights ahora mismo. Adelante, abre una nueva pestaña y hazlo. Si su puntuación de rendimiento es inferior a 80, es muy probable que la principal recomendación sea sobre imágenes. Las imágenes no optimizadas son el principal factor que contribuye a la lentitud de los sitios web: constantemente representan más peso de página que JavaScript, CSS, fuentes y HTML combinados. La buena noticia es que la optimización de imágenes también es la solución de rendimiento más sencilla. Sin cambios de código, sin reconfiguración del servidor, sin depuración. Simplemente imágenes más inteligentes.
Las imágenes son el problema número uno del peso de la página
Según los datos de HTTP Archive, las imágenes representan aproximadamente el 42% del peso total promedio de una página web. La página web mediana tiene aproximadamente 2,3 MB, y aproximadamente 1 MB de esa cantidad son imágenes. Pero esa es la media: los sitios mal optimizados suelen ofrecer entre 5 y 15 MB de imágenes por página. Cada megabyte adicional agrega aproximadamente entre 1 y 2 segundos de tiempo de carga en una conexión móvil típica. Una página de 10 MB tarda entre 8 y 12 segundos en cargarse completamente en 4G y la mayoría de los visitantes la abandonan después de 3 segundos.
El problema casi siempre es una de dos cosas: imágenes que tienen dimensiones demasiado grandes (que muestran una imagen de 4000 px en un contenedor de 800 px) o imágenes que no están lo suficientemente comprimidas (que se guardan con una calidad del 100 % cuando el 80 % es visualmente idéntica). A menudo son ambas cosas.
Elemento 1 de la lista de verificación: publicar imágenes del tamaño adecuado
Esta es la optimización única de mayor impacto. Si su CSS muestra una imagen de 800 píxeles de ancho, el archivo de imagen debe tener alrededor de 800 píxeles de ancho, no 4000 píxeles. Servir imágenes de gran tamaño desperdicia ancho de banda en píxeles que el navegador desecha. Abra las herramientas de desarrollo de su navegador, inspeccione sus imágenes y compare el tamaño mostrado con el tamaño natural (del archivo). Si el tamaño natural es más del doble del tamaño mostrado, estás desperdiciando datos.
Para diseños responsivos donde la imagen puede mostrarse en diferentes tamaños en diferentes pantallas, use el atributo srcset para proporcionar múltiples tamaños de imagen. El navegador elige el mejor para la pantalla del visitante. Un enfoque común: proporcione imágenes de 400 px, 800 px, 1200 px y 1600 px de ancho. Crea estas variantes de tamaño desde su original y deje que el navegador elija.
Elemento 2 de la lista de verificación: utilizar formatos de próxima generación
Si todavía ofrece solo archivos JPEG y PNG en 2026, dejará entre un 25% y un 50% de ahorro potencial en el tamaño de los archivos. WebP tiene compatibilidad con navegadores casi universal (más del 97 % a nivel mundial) y produce archivos entre un 25 y un 35 % más pequeños que JPEG con la misma calidad. AVIF logra una compresión aún mejor (aproximadamente un 50 % más pequeña que JPEG) y la compatibilidad del navegador ahora supera el 92 %.
La implementación es sencilla: convierte tus imágenes a WebP (o AVIF si su plataforma lo admite). Para obtener la máxima compatibilidad, utilice el elemento de imagen HTML para ofrecer AVIF a los navegadores que lo admitan, WebP como respaldo y JPEG como respaldo final. La mayoría de las plataformas CMS modernas y los generadores de sitios estáticos tienen complementos o funciones integradas para manejar esto automáticamente.
Elemento 3 de la lista de verificación: implementar carga diferida
La carga diferida difiere la carga de imágenes que se encuentran debajo de la ventana visible. El navegador del visitante solo descarga imágenes a medida que se desplaza cerca de ellas, en lugar de cargar todas las imágenes de la página a la vez. Esto mejora drásticamente el tiempo de carga inicial de la página, especialmente en páginas con muchas imágenes, como portafolios, galerías o publicaciones de blogs largas. En HTML, es tan simple como agregar cargando="perezoso" a tus etiquetas img. La mayoría de las plataformas CMS ahora hacen esto de forma predeterminada.
Advertencia importante: no cargue de forma diferida imágenes que sean visibles en la ventana gráfica inicial (en la mitad superior de la página). Su imagen principal, su logotipo y cualquier imagen visible sin desplazarse deberían cargarse inmediatamente. La carga diferida en realidad perjudica tu puntuación LCP porque retrasa la representación del contenido visual más importante.
Elemento 4 de la lista de verificación: comprimir con el nivel de calidad adecuado
La mayoría de las imágenes en la web se pueden comprimir a una calidad del 75-85% sin ninguna pérdida perceptible. La diferencia entre el 100% y el 85% de calidad en un JPEG suele ser invisible para el ojo humano, pero la diferencia en el tamaño del archivo es de 2 a 3 veces. Ejecute sus imágenes a través de un compresor y comparar el antes y el después. Te sorprenderá cuánto más pequeños puedes hacerlos sin ninguna degradación visible.
Herramientas de prueba para el rendimiento de la imagen
Estadísticas de PageSpeed de Google: identifica imágenes específicas que necesitan optimización y estima ahorros. GTmetrix: muestra gráficos en cascada para que puedas ver exactamente qué imágenes están ralentizando el proceso. Prueba de página web: proporciona vistas de tiras de película para ver cuándo aparecen las imágenes durante la carga. Herramientas de desarrollo de Chrome: la pestaña Red le permite ordenar las solicitudes por tamaño para encontrar los mayores infractores.
Elemento 5 de la lista de verificación: considere una CDN para imágenes
Una red de entrega de contenido almacena copias de sus imágenes en servidores de todo el mundo, por lo que los visitantes descargan imágenes desde un servidor cercano a ellos en lugar de desde su servidor de origen al otro lado del mundo. Para sitios con una audiencia global, una CDN puede reducir los tiempos de carga de imágenes entre un 40% y un 60%. Muchos proveedores de CDN también ofrecen optimización automática de imágenes: cambiarán el tamaño, comprimirán y convertirán formatos sobre la marcha según el dispositivo y el navegador del visitante.
Cloudflare (nivel gratuito disponible), BunnyCDN y Amazon CloudFront son opciones populares. Si utilizas WordPress, el plan gratuito de Cloudflare por sí solo puede marcar una diferencia notable. Para sitios estáticos en plataformas como Netlify o Vercel, la entrega CDN está integrada.
La lista de verificación completa en orden de impacto: (1) cambiar el tamaño de las imágenes para mostrar las dimensiones, (2) comprimir con una calidad del 75-85 %, (3) convertir a WebP o AVIF, (4) implementar la carga diferida para las imágenes de la página inferior, (5) usar srcset responsivo para múltiples tamaños de pantalla, (6) servir a través de un CDN, (7) configurar encabezados de caché adecuados para que los visitantes que regresan no vuelvan a descargar las imágenes. Revise esta lista y ejecute PageSpeed Insights después de cada paso. La mayoría de los sitios ven su mayor mejora solo en los pasos 1 a 3.
