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 1 mes, 2 semanas por zalexzperez. Razón: aclaración
Viendo 15 respuestas - de la 1 a la 15 (de un total de 25)
  • Moderador almendron

    (@almendron)

    Indica la URL de tu sitio para echar un vistazo.

    Iniciador del debate zalexzperez

    (@zalexzperez)

    La tienda está sin optimizar, es esta: https://rotulosdacrea.es/tienda/categoria/rotulos-neon/

    De todas formas, como digo, creando una web nueva en local con solo Woocommerce instalado, y 3 productos creados, el problema está ahí también haciendo la prueba en visión móvil en Chrome.
    Como digo, wordpress sirve imágenes en resoluciones más bajas cuando se miran desde el móvil, o eso solo es para la visión de escritorio? Me parece muy raro

    Moderador almendron

    (@almendron)

    El funcionamiento es el correcto y tu página no carga siempre la imagen original sino que elige entre varias opciones para mostrar una u otra en función del dispositivo. Eso se consigue mediante «srcset».

    Echa un vistazo a https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

    <img src="https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h.jpg" class="wp-post-image skip-lazy lazy-loaded" alt="Neón abierto 24h" loading="lazy" title="Neón abierto 24h" data-caption="" data-src="https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h.jpg" data-large_image="https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h.jpg" data-large_image_width="1200" data-large_image_height="1200" srcset="https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h-800x800.jpg 800w, https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h-400x400.jpg 400w, https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h-280x280.jpg 280w, https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h-768x768.jpg 768w, https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h-247x247.jpg 247w, https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h-100x100.jpg 100w, https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h.jpg 1200w" sizes="(max-width: 800px) 100vw, 800px" width="800" height="800">

    • Esta respuesta fue modificada hace 1 mes, 2 semanas por almendron.
    • Esta respuesta fue modificada hace 1 mes, 2 semanas por almendron.
    Iniciador del debate zalexzperez

    (@zalexzperez)

    Bien, pero entonces por qué en Pageinsights me sale «Una un tamaño adecuado para las imágenes» con un retraso de 4,65s ?

    Resultado Pageinsights

    Si miro en Chrome con vista móvil, es verdad, no se cargan las imágenes en máxima resolución (aunque esto sí que pasa en la tienda de prueba con WordPress vacío), se descargan las imágenes a 768px, lo que me sigue pareciendo demasiada resolución (archivos de 120kb).

    Medición en Chrome

    (hacer clic derecho, abrir en nueva pestaña para ver la imagen a máxima resolución)

    • Esta respuesta fue modificada hace 1 mes, 2 semanas por zalexzperez. Razón: corregir imagenes
    • Esta respuesta fue modificada hace 1 mes, 2 semanas por zalexzperez. Razón: aclaración
    Moderador almendron

    (@almendron)

    1) El comportamiento es el normal en WordPress. Tú cargas una imagen mediante «src» y esa es la que se muestra. Ahora bien, mediante «srcset» lo que hacemos es proporcionar varias imágenes de origen adicionales junto con sugerencias para ayudar al navegador a elegir el correcto. Ahora bien, la imagen original se sigue cargando.

    2) La herramienta que usas te proporciona información y alguna que otra sugerencia. Como es lógico, una página con solo texto se carga mucho más rápida que otra con diez imágenes.

    «Una un tamaño adecuado para las imágenes» no significa que te esté penalizando sino que tu página iría mucha más rápida si usaras imágenes mas pequeñas.

    3) Luego tienes que ver que se está refriendo a imágenes de 768×768 y con extensión «jpg.webp» cuando tú las estás cargando a otro tamaña más pequeño.

    Ejemplo:

    La que te aparece en el informe es https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h-768×768.jpg.webp

    Y tú la que cargas es https://rotulosdacrea.es/tienda/wp-content/uploads/2021/02/neon-abierto-24h-247×247.jpg

    Deberías mirar de donde salen esas imágenes extras.

    Iniciador del debate zalexzperez

    (@zalexzperez)

    «Una un tamaño adecuado para las imágenes» no significa que te esté penalizando sino que tu página iría mucha más rápida si usaras imágenes mas pequeñas.»

    A ver, las fotos que tengo ahí las he subido con resolución 1200x1200px, no es una resolución exagerada. El mínimo recomendado por Woocommerce es de 800x800px.

    Lo de que no me esté penalizando no lo entiendo, me decía que puedo ahorrar 4.65s al cargarlas con la resolución adecuada.

    Y eso de los archivos .jpg.webp es porque has mirado la web hoy cuando justo he instalado el plugin EWWW optimizador de imágenes, que por cierto, al entregar archivos .webp desde la vista móvil ya pasan a ser con resolución 450x450px, no 768px cuando solo había .jpg disponibles. Osea que, sin plugins adicionales y en la visión móvil, WordPress o los navegadores en general (no sé quién es el culpable) no es capaz de descargar las imágenes con la resolución correcta.

    Resumiendo: en vista móvil, sin plugin adicionales, las imágenes se descargan a 768px/1024px. Con el plugin EWWW activado, las imágenes se descargan a una resolución menor y desaparece la advertencia en pageinsights.

    • Esta respuesta fue modificada hace 1 mes, 2 semanas por zalexzperez.
    Moderador almendron

    (@almendron)

    Y si no pones ninguna imagen, fíjate si te ahorras segundos 🙂

    A ver, que son sugerencias, que esa herramienta es orientativa.

    Tu resumen es erróneo: la imagen que se descarga es la que tú has puesto en la página o entrada mediante «src». Por eso es mejor poner una miniatura que se pueda abrir en grande que no la grande directamente. Pero esto también es orientativo. Puedes tener páginas donde te interese mostrar una imagen grande de principio. Y lo que te diga esa herramienta da lo mismo, ¡Pues claro que cargará más lenta!

    Si tú insertas una imagen de 500×500, esa el que se cargará aunque tengas tamaños más grandes o más pequeños generados por el tema o por algún plugin. Luego, gracias al «srcset», el navegador sabe que hay más tamaños y procede a usarlos en función del dispositivo.

    ¿Cómo se optimiza?: poniendo la imagen más pequeña que se pueda o convenga.

    Ejemplo: https://rotulosdacrea.es/tienda/producto/neon-abierto/

    El contenedor de la imagen tiene 605 de anchura por 605 de altura. Sin embargo tú estás poniendo una imagen que tiene 800×800. Lo ideal sería usar una imagen cuyas medidas coincidieran con el contenedor (siempre y cuando éste sea fijo).

    Iniciador del debate zalexzperez

    (@zalexzperez)

    Si mi resumen es erróneo, explícame por favor como es posible la siguiente observación en Chrome Dev tools:
    Si desactivo el plugin EWWW, las imágenes desde la vista móvil pasan a descargarse en resolución 768px. Si vuelvo a activar el plugin, se descargan a 400px, desapareciendo la advertencia en pageinsights. Lo tengo comprobado en la tienda online y en la tienda local.
    Aquí la prueba de ello, fíjate que el listado de archivos está filtrado de mayor a menor en tamaño de archivos:

    Con EWWW activado (y su función de Lazyload). Imágenes de 400px:
    Con EWWW

    Con EWWW desactivado (descarga más fotos al no haber lazyload, otro tema). Imágenes de 768px:
    Con EWWW

    «Tu resumen es erróneo: la imagen que se descarga es la que tú has puesto en la página o entrada mediante «src»»

    Las fotos del catálogo de Woocommerce son imágenes destacadas de cada producto, que como he dicho son originalmente de 1200px, para que en la página de producto pueda haber una buena función de zoom. Si subiese fotos de 605px, por ejemplo, perdería la posibilidad de hacer zoom al pasar el ratón por encima de las fotos.

    • Esta respuesta fue modificada hace 1 mes, 2 semanas por zalexzperez.
    Moderador almendron

    (@almendron)

    Desactiva el plugin EWWW y le echo un vistazo con Firefox.

    Iniciador del debate zalexzperez

    (@zalexzperez)

    Ahora mismo lo acabo de desactivar!

    Edito: en Firefox, seleccionando la vista móvil tal cual, hace lo mismo que la vista de escritorio. Carga imágenes de 247px.
    Ahora bien, si seleccionas un dispositivo como el Galaxy S9, entonces carga imágenes de 1024px xDDDD

    Firefox con Galaxy S9

    • Esta respuesta fue modificada hace 1 mes, 2 semanas por zalexzperez.
    Moderador almendron

    (@almendron)

    Me salen las imágenes con extensión «.jpg.webp»

    Iniciador del debate zalexzperez

    (@zalexzperez)

    El plugin EWWW es quien generó esos archivos, por más que desactive y borre el plugin, los archivos permanecen ahí…

    Moderador almendron

    (@almendron)

    Lo he comprobado en mi propio sitio y los resultados son los deben ser: solo carga la imagen que está insertada en cada página con el atributo «src».

    Lo que sea que tengas puesto para convertir a «webp» es lo que provoca esa carga extra.

    Moderador almendron

    (@almendron)

    Vacía la cache de LiteSpeed Cache o mejor aún desactívalo mientras estás haciendo pruebas.

    Iniciador del debate zalexzperez

    (@zalexzperez)

    Estás comprobándolo desde la vista móvil, con un dispositivo seleccionado como el Galaxy S9 o el iPhone 6/7/8?

    Si seleccionas vista de escritorio, o seleccionas vista móvil por defecto, las imágenes que se cargan son las que dices tú…

Viendo 15 respuestas - de la 1 a la 15 (de un total de 25)
  • Debes estar registrado para responder a este debate.