Imagyc›Artículos

Cómo detectar qué imágenes están ralentizando tu sitio web

Publicado el 11 de octubre de 2026 · 9 min de lectura

El banner aparece después del texto. Las fotos de los productos tardan en completar el catálogo. En el ordenador todo parece normal, pero en el móvil la página hace esperar. Antes de comprimir todos los archivos, conviene descubrir qué sucede con las imágenes que recibe realmente el navegador.

Para diagnosticar imágenes lentas, identifica el archivo utilizado en la página, comprueba cuántos datos transfiere, cuándo empieza a cargar y cuánto tarda en aparecer. Después, prueba un cambio y compara en las mismas condiciones.

Puedes empezar sin programar. PageSpeed Insights ayuda a localizar problemas; Chrome permite investigar cada archivo. El objetivo es pasar de “creo que son las fotos” a una decisión que puedas comprobar.

Si quieres entender primero el efecto en las visitas y los datos consumidos, consulta por qué optimizar imágenes. Aquí trabajaremos con el diagnóstico.

1. Elige una página y describe el problema

Empieza por la URL donde ocurre la dificultad: un producto, una página de ventas o un artículo. Analizar únicamente la página de inicio puede dejar fuera el problema real.

Anota qué ves y dónde: “la foto principal tarda en el móvil”, “la galería se atasca al abrir” o “el texto cambia de posición cuando aparece el banner”. Esto ayuda a elegir la prueba y comprobar si el cambio resuelve el síntoma.

Registra también la dirección, el día, el dispositivo y si el navegador ya tenía los archivos en caché. Guarda una captura de la página y los resultados iniciales sin información personal o de clientes.

Empieza con una sola página y un problema definido. La misma corrección puede servir para otras páginas, pero esa conclusión llega después de la primera comprobación.

2. Utiliza PageSpeed para localizar qué investigar

Abre PageSpeed Insights, introduce la URL publicada y ejecuta el análisis. Revisa móvil y ordenador por separado. El informe combina una prueba de laboratorio con datos reales cuando están disponibles.¹

En el diagnóstico, busca información sobre entrega de imágenes, LCP y cambios de diseño. Los nombres pueden variar según la versión y el idioma. Abre los detalles en lugar de mirar únicamente la puntuación.

El insight Improve image delivery, o su equivalente en español, señala posibles reducciones de datos. El ahorro indicado es una estimación, no el peso garantizado del archivo que generarás ni una predicción de segundos ahorrados.²

Haz una lista corta de los archivos señalados. Para cada uno, registra URL, ahorro estimado y función. Una foto principal y una imagen al final de un artículo pueden necesitar prioridades diferentes aunque pesen lo mismo.

Comprueba si los datos corresponden a la página o al origen

Los datos reales abarcan los últimos 28 días y necesitan suficientes muestras.³ PageSpeed puede mostrar información del origen en lugar de la URL, o no tener datos reales.¹ Comprueba la identificación; su ausencia no demuestra buen rendimiento.

La prueba de laboratorio permite investigar un cambio inmediato. Los datos reales ayudan a evaluar al público a lo largo del tiempo. Conserva cada resultado con su contexto.

3. Descubre qué archivos está descargando Chrome

Abre la página en Chrome y sigue estos pasos:

1. Haz clic con el botón derecho y selecciona Inspeccionar.
2. Abre Network, o Red.
3. Recarga la página con el panel abierto.
4. Selecciona el filtro de imágenes, normalmente Img.
5. Ordena por Size, o Tamaño, para encontrar las transferencias mayores.⁴

Pasa el cursor sobre el nombre para comprobar la dirección completa. Selecciona el archivo y mira la vista previa. Así relacionas la fila del informe con el banner, la miniatura o la foto de la página.

El archivo entregado puede ser distinto del que subiste al editor. La web puede generar tamaños, convertir formatos o utilizar una CDN. Investiga la URL de la solicitud real antes de decidir qué original cambiar.

Compara visitas con y sin caché del navegador

En Network, Disable cache desactiva la caché del navegador mientras DevTools permanece abierto. Recarga y registra la prueba. Después, desmarca la opción y observa una visita con caché. Mantén separados los resultados.⁵

Un Service Worker o una caché de la aplicación puede seguir entregando el recurso. Revisa el origen indicado en la solicitud. Desactivar la caché del navegador no demuestra por sí solo que se hayan eliminado todas las capas.⁶

Peso, tiempo y transferencia son medidas distintas

Size permite comprobar bytes transferidos y tamaño del recurso; Time muestra la duración de la solicitud. En Timing, esa duración se divide en etapas, como espera de respuesta y recepción del contenido. Un tiempo alto no identifica por sí solo una foto mal comprimida.⁵

Tampoco sumes los tiempos de todas las imágenes para predecir cuánto tardará la página: las solicitudes pueden superponerse. Identifica las que retrasan el contenido investigado, además de observar los números mayores.

4. Compara dimensiones y espacio de visualización

Una foto de catálogo puede tener 3.000 píxeles de ancho y aparecer en una tarjeta de 300 píxeles CSS. Conviene investigar la diferencia, sobre todo si la tarjeta usa el archivo destinado a ampliación.

Comprueba el ancho mostrado por el elemento en Elements, o Elementos. Después, obtén las dimensiones en píxeles del archivo realmente entregado mediante la vista previa o las propiedades de la imagen guardada. No uses únicamente el original de la biblioteca como referencia.

Considera la densidad de pantalla. Una imagen mostrada con 400 píxeles CSS puede aprovechar una versión de 800 píxeles en una pantalla 2x. La web puede ofrecer candidatos con srcset y sizes para que el navegador elija según el contexto.⁷

Si la dirección solicitada sigue apuntando a una versión enorme en una pantalla estrecha, examina la configuración adaptable. Una versión mayor puede responder a densidad o zoom; confirma la función antes de reducir resolución.

La guía de resolución de imágenes para ordenador y móvil profundiza en esa elección. El diagnóstico mejora cuando relaciona píxeles, espacio y función de la imagen.

5. Comprueba si la imagen retrasa el contenido principal

En Chrome, abre Performance, graba una recarga y examina el evento LCP y los insights asociados. Cuando el elemento medido es una imagen, relaciónalo con la URL encontrada en Network.⁸

LCP sigue la aparición del mayor contenido elegible en el área visible. Según la página y la pantalla, ese elemento puede ser texto u otro contenido. Un LCP malo no demuestra que todas las fotos pesen demasiado.⁹

El desglose permite separar las etapas:

Estas etapas están definidas en la documentación de LCP. Una imagen puede sufrir por un inicio tardío, una carga prolongada o un retraso al mostrarse después de cargar.¹⁰

Si la imagen empieza a cargar tarde

Revisa si utiliza loading="lazy", depende de JavaScript para entrar en la página o no se descubre pronto. La imagen de LCP debe estar disponible desde el principio; una indicación de prioridad alta puede ser apropiada para ese recurso.¹¹

Si la solicitud tarda

Comprueba bytes y Timing. ¿Hay mucho contenido por recibir o la mayor espera ocurre antes de la respuesta? El primer caso justifica comparar dimensiones y compresión; el segundo pide investigar la entrega. Puede haber varios problemas.

Si el archivo ya llegó pero la imagen no aparece

Examina el retraso de renderizado. Código, estilos o condiciones de visualización pueden mantener esperando al contenido. Reducir el archivo puede ahorrar datos sin resolver ese retraso.⁹

6. Convierte las observaciones en prioridades

La tabla siguiente es un ejemplo editorial de investigación. Sus valores son hipotéticos, no mediciones de Imagyc ni límites de Google.

Reservar espacio para imágenes ayuda a evitar desplazamientos, pero una página puede moverse por otras razones. Confirma qué elemento provocó el cambio.¹²

Un orden práctico es investigar primero la imagen relacionada con el contenido principal, después las transferencias grandes presentes en la primera pantalla y luego las galerías. Adapta el orden al problema registrado al empezar.

7. Prueba una corrección y verifica el archivo publicado

Cuando la evidencia apunta a datos excesivos, copia el archivo y prueba compresión o conversión en Imagyc. Compara dimensiones, peso y detalles importantes, como letras, textura y acabado.

La guía de formatos JPEG, PNG, WebP, AVIF y JXL ayuda a elegir candidatos. Una versión menor solo es útil si el destino admite el formato y la imagen mantiene su función.

Después de publicar, vuelve a Network y confirma la nueva URL y los bytes recibidos. Si todavía aparece la versión antigua, investiga cachés y referencias antes de concluir que la optimización falló.

Cambiar el nombre exige actualizar los lugares que utilizan el archivo. Consulta cómo nombrar imágenes para SEO para organizar la exportación sin dejar referencias rotas.

8. Compara antes y después con criterios consistentes

Como protocolo práctico, realiza tres pruebas antes y tres después, manteniendo URL, perfil de dispositivo, red simulada y condición de caché. Registra resultados y compara mediana y variación. Tres pruebas no representan a toda la audiencia, pero ayudan a evitar una conclusión basada en una ejecución.

No compares directamente una recarga rápida en tu ordenador con la prueba móvil simulada de PageSpeed. Elige una herramienta y conserva las condiciones dentro de cada comparación.

El modo de dispositivo de Chrome aproxima pantalla, red y procesamiento, pero no reproduce completamente un teléfono. Comprueba también un dispositivo real.¹³

La puntuación de Lighthouse depende de métricas y puede variar. Ahorrar bytes no asegura una subida proporcional. Compara también la medida asociada al problema y la apariencia de la página.¹⁴

Preguntas frecuentes

¿Toda imagen de más de 100 KB está mal?

No. Una miniatura y una foto ampliable tienen funciones distintas. Evalúa peso junto con dimensiones, calidad y carga. Un límite aislado no permite diagnosticarlo.

¿Por qué comprimí la imagen y apenas cambió LCP?

Primero confirma que la página entrega el archivo nuevo. Después examina las etapas de LCP: el problema puede estar antes de descargar o al mostrar. Considera por separado ahorro de datos y mejora de tiempo.

¿Puedo utilizar solo la puntuación de PageSpeed?

Revisa los detalles para decidir qué corregir. La puntuación general ayuda a observar el conjunto, pero no identifica por sí sola la foto que causa el síntoma.

¿También debo investigar WebP y AVIF?

Sí. La extensión no demuestra que las dimensiones sean adecuadas, la exportación correcta o la solicitud oportuna.

¿Cómo sé que he terminado?

Vuelve a la observación inicial. ¿Aparece mejor el contenido importante? ¿Se entrega la versión deseada? ¿Se reducen datos cuando ese era el objetivo? ¿La calidad sigue siendo adecuada? Conserva el registro y repite la revisión cuando cambies banners, diseños o herramientas.

Empieza por una página importante y un archivo identificable. El diagnóstico resulta útil cuando cada cambio responde a una observación concreta y puede comprobarse en el sitio publicado.