Soporte » Guías – Resolución de problemas » Página con 50 imágenes. ¿Como mejorar la carga?

  • Resuelto intoper

    (@intoper)


    Buenos días,

    Tengo un pequeño dilema con wordpress. Necesito crear una página con un portfolio de 50 imágenes con 12 categorías. Hasta aquí todo correcto.

    Utilizo el theme «stockholm» de Themeforest y lo que busco es algo similar a lo que se puede ver aqui: http://demo.select-themes.com/stockholm6/four-column-grid-no-space/

    Quiero crear un filtro con las categorías al inicio y después las imágenes. La idea era realizar la carga como se aprecia en la web, cargar solo una parte de las imágenes y después el botón «ver más» para que la página sea rápida y no tenga que cargar las 50 imágenes del tirón.

    AQUI EL PROBLEMA.
    Con la opción anterior con el botón «ver más» me surge un problema gordo. El filtro de las categorías solo funciona con las imágenes visibles, es decir, las que están por encima del botón «ver más». Para que el filtro de la categoría funcione correctamente tengo que cargar todas las imágenes en pantalla. (he hablado con el autor del theme pero me indica que funciona así no puedo realizar lo que quiero sin cambiar código)

    PESO DE LAS IMAGENES
    La única solución que veo es deshabilitar la opción del botón «ver más» y directamente meter las 50 imágenes del tirón al cargar la página para que me funcione correctamente el filtro de las categorías. ¿el problema? El peso total de la página. Serian 50 imágenes de unos 48KB cada una (comprimidas todo lo posible). Más de 2 Megas en la carga… :-/

    ¿Veis alguna solución para esto?
    No se si seria posible implementar alguna función para que las imágenes puedan cargar poco a poco mientras se hace scroll en la página pero que el filtro las «lea» todas desde el inicio.

    Muchas gracias,
    Un saludo.

    • Este debate fue modificado hace 5 años, 10 meses por intoper.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • Efectivamente una buena solución sería el Lazy Load, que las imágenes se carguen solo cuando vaya a entrar en el área visual. Hay muchos plugins, yo ahora estoy utilizando Rocket Lazy Load y la verdad que me gusta mucho.

    • Esta respuesta fue modificada hace 5 años, 10 meses por cybmeta.
    Moderador almendron

    (@almendron)

    Lo más importante sería poner la miniatura de las imágenes (unos 10-20 Kb por imagen) y no la imagen completa para luego escalar.

    Por otro lado, podrías ser usar el método de imágenes diferidas (Lazy Images) de forma que se van cargando según el visitante va viendo la página.
    https://es.wordpress.org/plugins/search/lazy/

    Iniciador del debate intoper

    (@intoper)

    Gracias por las rápidas respuestas.

    Probare con los plugins que comentais de Lazy.
    A ver si me funciona bien con el filtro inicial de las categorías porque me gustaría que si un usuario pulsa sobre una categoría sin cargar entera la página se muestren todas las imágenes de esa categoría y no como me pasaba ahora que solo muestra «las visibles» en el área visual.

    Solo necesito el plugin para la sección del portfolio. Espero que no me de muchos problemas con los plugins que ya tengo y con el propio theme.

    @almendron, lo de las imágenes en 10-20kb, pufff… lo veo muy difícil de bajar tanto sin perder calidad. Las imágenes que subo para ese portolio son todas (480 × 434) un poco editadas y la media anda sobre los 40Kb.

    Realmente las imágenes del porfolio que se ven desde un PC son de 256×235 (con estas dimensiones si podría bajar bastante los kb por imagen) pero al ser un theme responsive dependiendo de donde se vean suben bastante las dimensiones hasta los 480px de ancho en caso de verse a una columna en algún terminal.

    Si dejaria todas a 256×235 cuando realiza la conversión para arriba creo que se verían demasiado pixeladas.

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • El debate ‘Página con 50 imágenes. ¿Como mejorar la carga?’ está cerrado a nuevas respuestas.