1

Mi caso es que estoy desarrollando una web de artistas musicales y tenia la idea de mostrar una pagina con varios div cuyos backgrounds sean fotos de los distintos artistas y al pasar el ratón tenga la animación de un box-shadow mostrando el nombre del artista.

El problema es que, al menos en mi PC y en de otro amigo, se relentiza el rendimiento por así decirlo; el scrolling es mas lento, las animaciones son más lentas, etc.

He descubierto que es por la cantidad de background-images, ya que si pruebo quitando las imágenes las animaciones van fluidas como deberían ir, pero al poner imágenes de nuevo de background todo se vuelve mas lento. ¿Hay alguna de solucionar esto?

Aquí dejo el link de dicha página: http://southfamilie.tk/miembros.html

P.S.: Todavía esta en desarrollo así que hay imágenes que no se muestran pero es porque no hay fotos de los otros artistas aún.

2
  • Por favor, añade a tu pregunta el código que tengas hasta el momento que creas que pueda tener relación con el problema.
    – lromeraj
    Commented el 6 ago. 2017 a las 14:30
  • Bienvenido. La pregunta no es del todo clara y no deberías referir a otra sitio para poder entender a qué te refieres. Si bien es válido poner un enlace, debe incluirse la información esencial en la publicación. En el caso particular del rendimientos de las páginas con imágenes tiene que ver el tamaño de las imágenes. ¿Cuál es el tamaño de archivo de cada una? ¿cuantas son? Por cierto, favor de seguir el recorrido de bienvenida y leer Cómo preguntar.
    – Rubén
    Commented el 6 ago. 2017 a las 16:58

2 respuestas 2

1

Ya visité tu página:
Lo primero que veo es que las imágenes tienen demasiada resolución, tu página está bien diseñada, incluso veo que es responsiva, pero una imagen de 2mb es demasiado para por ej un telf móvil. Veo que los cuadros de artistas tienen 250px x 250px, lo primero que haces es re escalar las img de fondo a esta resolución.

Para ayudarte con el tema rendimiento usa las herramientas de desarrollo de Chrome
Ctrl + Shtift + i, en el menú del modo de desarrollo More tools->Rendering. Aquí selecciona FPS meter, vas ha ver en que momentos de la interacción de usuario baja mas el rendimiento del dibujado.

En resumen: baja la resolución a las imágenes, suerte

1
  • Efectivamente! EStuve rediseñando las imágenes para que fueran cuadradas y tuvieran 250px An. x Al. y ahora el rendimiento va genial, de hecho incluso en los dispositivos móviles tarda menos en cargar. Muchas gracias!
    – fedlo
    Commented el 7 ago. 2017 a las 12:00
0

Al momento de mostrar imágenes, en una galería, por ejemplo, se debe de presentar la versión reducida de la misma, en lugar de tomar la imagen de tamaño completo y reducirla en tiempo real.

Para proceder, es necesario tener una carpeta con todas las imágenes reducidas de tamaño, de tal modo que sean las imágenes que se presenten en la galería y si el usuario quiere ver la imagen en su tamaño real, entonces al dar click sobre lo misma lo lleve a la imagen original.

Las imágenes en tamaño real se deben tener en otra carpeta y es necesario que todas las imágenes mostradas en la galería tengan las mismas dimensiones, pues esto crea un efecto de homogeneidad en la galería. Una galería con fotografías más altas que otras, por ejemplo, no se ve armónico.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.