Las miniaturas en versión móvil siempre tienen la máxima resolución
-
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
-
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">Bien, pero entonces por qué en Pageinsights me sale «Una un tamaño adecuado para las imágenes» con un retraso de 4,65s ?
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).
(hacer clic derecho, abrir en nueva pestaña para ver la imagen a máxima resolución)
«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.
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 desactivado (descarga más fotos al no haber lazyload, otro tema). Imágenes de 768px:
«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.
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
- El debate ‘Las miniaturas en versión móvil siempre tienen la máxima resolución’ está cerrado a nuevas respuestas.