Soporte » Guías – Resolución de problemas » Las miniaturas en versión móvil siempre tienen la máxima resolución

  • Resuelto zalexzperez

    (@zalexzperez)


    Hola,

    Tengo una tienda con Woocommerce y me ha salido el típico fallo en Pageinsights de que las imágenes servidas en la vista móvil no tienen el tamaño correcto, esto es en la página de una categoría cualquiera, con todos los productos.

    Sin embargo, cada vez que subo una foto se generan varias versiones de distintas resoluciones (100×100, 150×150, 300×300, 450×450, 600×600 y 768px aparte de las originales que están a 1024px) y en la vista de escritorio se aprovechan esas versiones, según el ancho de la pantalla, ósea que funciona bien.

    Para descartar problemas de configuraciones y plugins, he creado una nueva página web en local, con el tema twenty twenty-one con solo 3 productos simples. Y tengo el mismo comportamiento, en vista móvil siempre se descargan las imágenes con máxima resolución. También pasa al poner una imagen en una página suelta, ósea que no es cosa de Woocommerce…

    ¿Acaso esto es normal en WordPress? ¿Hay que instalar algún plugin para conseguir lo que esperaba ver y así no ser penalizado por lentitud en la carga de la web?

    Gracias de antemano

    • Este debate fue modificado hace 3 años por zalexzperez. Razón: aclaración
Viendo 10 respuestas - de la 16 a la 25 (de un total de 25)
  • Moderador almendron

    (@almendron)

    Vacía la cache de LiteSpeed Cache y luego lo desactivas.

    Iniciador del debate zalexzperez

    (@zalexzperez)

    Edito, voy a vaciar y desactivar Litespeed cache por tu mensaje anterior.
    Edito 2: hecho, caché purgada, litespeed desactivado y EWWW también.

    La caché la he borrado completamente tras desactivar el plugin EWWW.

    Si uno analiza las imágenes en la vista móvil en la pestaña inspector, se muestra que la ruta scr de la imagen señalada se corresponde con la del archivo a 247px. Pero si entras en la pestaña de red, aparecen los archivos que realmente se están descargando y ahí veo 768px para el iPhone y 1024px para el Galaxy S9.

    • Esta respuesta fue modificada hace 3 años por zalexzperez.
    • Esta respuesta fue modificada hace 3 años por zalexzperez.
    Moderador almendron

    (@almendron)

    A mi me siguen saliendo imágenes con extensión «.jpg.webp»

    ¿Qué plugin usas para servir «webp»? Desactívalo.

    Iniciador del debate zalexzperez

    (@zalexzperez)

    El plugin que me generó los archivos .webp fue el EWWW. Las ha generado esta mañana en una acción en masa, tardó 20 minutos. Así que, por más que desactive el plugin, no me va a borrar esos archivos (afortunadamente?!)

    Lo que podría hacer es ver si el plugin me deja borrarlas, pero vamos, el comportamiento es el mismo sea un .jpg o un .webp por lo que he estado viendo estos días, la diferencia está en que esté activo el plugin o no.
    ¿Quieres que borre todos los .webp?

    Edito: no hay ningún otro plugin ni códigos PHP que sirvan los .webp. Acaso deberían dejar de verse tras desactivar ese plugin? El servidor del hosting sé que funciona con Litespeed y la web utiliza Cloudflare para el SSL, más no te puedo decir.

    • Esta respuesta fue modificada hace 3 años por zalexzperez.
    • Esta respuesta fue modificada hace 3 años por zalexzperez.
    Moderador almendron

    (@almendron)

    Por mi no hace falta que no borres nada.

    Acabo de realizar algunas pruebas y parece que cambia la carga según sea el modelo de dispositivo que selecciones.

    En cuanto tenga un rato, lo investigaré.

    De todas formas, deberías ver por qué te sale tan alto «Time to Interactive».

    Iniciador del debate zalexzperez

    (@zalexzperez)

    Efectivamente, ahora mismo el tema optimización está hecho un desastre, lo de las fotos no es el único problema.
    Voy a reinstaurar una copia de seguridad de esta madrugada, por lo que desaparecerán los .webp al menos hasta que vuelva a meterme con lo de optimizar las imágenes…

    Gracias por todo

    Moderador almendron

    (@almendron)

    Si descubro algo más, te lo digo.

    Moderador almendron

    (@almendron)

    Conclusiones de las pruebas que he realizado:

    1) El atributo «srcset» funciona perfectamente. El navegador descarga la imagen que mejor se adapta al tamaño del dispositivo.

    2) Ahora bien, este atributo no funciona en todos los navegadores y sistemas:

    https://caniuse.com/?search=srcset

    Esto implica que en dispositivos antiguos se da el caso de que muestran siempre la imagen original en lugar de la que mejor se adapte.

    Iniciador del debate zalexzperez

    (@zalexzperez)

    Entonces pageinsights y las versiones móviles de las herramientas de los navegadores estarán usando una versión antigua…porque el fallo sale ahí

    Moderador almendron

    (@almendron)

    No. Si te has fijado, los resultados dependen de qué dispositivos elijas para hacer la simulación. En ciertos dispositivos no funciona el atributo.

    Si optas por modificar directamente la anchura del dispositivo en lugar de elegir uno, podrás comprobar que siempre lo hace bien.

Viendo 10 respuestas - de la 16 a la 25 (de un total de 25)
  • El debate ‘Las miniaturas en versión móvil siempre tienen la máxima resolución’ está cerrado a nuevas respuestas.