¿Por qué las imágenes de mi web cargan lentamente?

Empieza por una página lenta

Abre la página publicada en un móvil y un ordenador. Observa qué imagen aparece tarde, si toda la página va lenta y si el texto se mueve al aparecer las imágenes.

1. Anota la dirección de la página y la imagen que presenta el problema.
2. Haz una prueba en PageSpeed Insights y guarda los resultados relacionados con las imágenes.
3. Si otra persona mantiene tu web, envíale la dirección y el informe. Pídele que revise esa imagen antes de cambiar toda la biblioteca.

Las secciones siguientes te ayudan a elegir la próxima comprobación. Para investigar con más detalle, el panel Network del navegador muestra qué archivos descarga la página y cuánto tarda cada solicitud.

Relaciona cada síntoma con una comprobación

Opcional: examinar la imagen en el panel Network

En un ordenador, abre la página en Chrome. Abre las herramientas de desarrollo con Ctrl + Mayús + J en Windows o Linux, o Comando + Opción + J en Mac. Selecciona la pestaña Network y sigue estos pasos:

1. Selecciona el filtro de imágenes Img.
2. Activa Disable cache y recarga con el panel abierto. Así puedes revisar una descarga nueva en vez de una copia guardada por el navegador.
3. Selecciona la solicitud de la imagen problemática. Mira la vista previa para confirmar que es la imagen correcta.
4. Anota la dirección de la imagen y el tamaño del archivo.
5. Abre Timing para ver en qué se emplea el tiempo de la solicitud y consulta Initiator para saber qué la inició.

Este ajuste del navegador no vacía la caché del servidor de la web ni del CDN. Un CDN distribuye los archivos de la web desde varios servidores y puede guardar sus propias copias.

Si empieza tarde, identifica si la inicia el HTML, un script o la carga diferida. Si empieza pronto pero espera respuesta, compara otra imagen y el documento HTML. Si llega rápido y no se ve, revisa CSS, animaciones y JavaScript. Corrige la fase que realmente pierde tiempo.

Timing muestra en qué se consume el tiempo de la petición, como esperar al servidor o descargar. Initiator indica qué la inició, como el HTML o un script. Así puedes distinguir un archivo grande de una descarga tardía.

documentación Network de Chrome

En Timing, distingue Queueing o Stalled, Waiting for server response (TTFB) y Content Download. El tiempo previo al envío puede deberse a la planificación del navegador o al establecimiento de la conexión; no es todo procesamiento del servidor. El TTFB incluye el trayecto por la red, así que una espera larga no demuestra por sí sola un fallo del alojamiento. Una descarga prolongada apunta al volumen transferido y la velocidad de conexión. Compara varias solicitudes en las mismas condiciones.

Reduce archivos innecesariamente grandes

Si una tarjeta pequeña descarga una foto enorme, empieza por las dimensiones. Crea una copia proporcional con el redimensionador. Compara luego WebP o AVIF si tu sistema los admite. La guía de formatos ayuda a elegir.

Observa toda la pantalla inicial. Decenas de miniaturas pequeñas cargadas a la vez pueden transferir demasiado. Decide cuáles hacen falta ya y cuáles pueden esperar a que el visitante se acerque al desplazarse.

Corrige los tiempos cuando el peso no es el problema

Comprueba que la carga diferida no retrase la imagen principal. Si espera a una animación o script, revisa la secuencia con el desarrollador. La guía LCP de Google distingue carga y renderizado.

Compara varias peticiones antes de culpar al formato. Si HTML y otros recursos también esperan, investiga alojamiento y distribución. Exportar diez veces no suele resolver la espera anterior a la respuesta del servidor.

Repite en las mismas condiciones

Otra visita puede aprovechar la caché. Anota si pruebas una carga nueva o almacenada y conserva dispositivo y red. Revisa una pantalla estrecha: puede revelar una variante móvil que falta.

1. Anota una URL lenta y la petición afectada.
2. Cambia el archivo o su comportamiento de carga.
3. Verifica que se entrega la nueva versión.
4. Repite la medición y revisa la calidad visual.

Examina conjuntamente la primera vista de una galería: imagen principal y veinte miniaturas pueden necesitar reglas distintas. Prioriza lo visible y retrasa lo demás cuando corresponda. Recorre después toda la galería y vuelve atrás para comprobar que aparecen a tiempo y sin huecos.