Pregunta sobre WooCommerce de Wordpress:

Imágenes por escala servidas: ¿Cómo para tontos?

Un usuario preguntó 👇

Este tema se ha abordado repetidamente en todas partes, aquí, en el foro de soporte de temas, en todas partes y todavía no puedo solucionarlo y por favor no vincule esto https://docs.woocommerce.com/document/image-sizes-theme-developers/

como si estuviera escrito en idioma klingon, sería más fácil.

Gtmetrix bla bla bla El tamaño de la URL en HTML o CSS ha cambiado de 2048 × 2048 a 263 × 263. La publicación de una imagen escalada puede tardar 355,7 KB (reducción del 98%).

Ese 263 × 263 es el tamaño de las miniaturas de productos que se muestran en mi navegador cuando hago clic en la página de la tienda. Sin embargo, el tamaño real de estas miniaturas es 600 × 600, porque cuando hace clic con el botón derecho en «abrir imagen en otra pestaña», obtiene una imagen de 600 × 600, que es el tamaño predeterminado de woocommerce que puede obtener en Personalización -> WooCommerce – > Imágenes del producto

ergo, cambiar los tamaños predeterminados en Personalización -> WooCommerce -> Imágenes del producto no hará ninguna diferencia, y realmente no lo hace. He subido imágenes de productos de 1000 × 1000 y están a escala a escala de todos modos, esas 800 × 800 están a escala a 263 × 263.

No entiendo por qué WooCommerce no crea automáticamente una copia de 263 × 263 de estas imágenes y las muestra directamente en la página de la tienda.

Luego también tengo un feed de instragram con el mismo problema donde las imágenes se escalan de 640 a 228

(@braehler)

Hace 1 año, 8 meses

Las miniaturas gemeradas están aquí: WordPress–> Panel de control–> Configuración–> Medios. Cuando cambia el tamaño de las miniaturas, debe volver a generarlas a través de un plugin o un script

(@ icks13)

Hace 1 año, 8 meses

@braehler No creo que sea lo mismo, ninguno de este tamaño coincide con los que se muestran en la página de la tienda. Algunas páginas de la tienda e imágenes en las páginas del proyecto se escalan como 263 × 263 desde 2048 o 228 × 228 desde 640

En la configuración de medios veo:

Tamaño de la imagen Ancho 150 Tamaño del pulgar Alto 150

Ancho máximo promedio Ancho máximo promedio máximo 300

Tamaño grande Ancho máximo 1024 Tamaño grande Altura máxima 1024

(@braehler)

Hace 1 año, 8 meses

De acuerdo, su tema parece definir el tamaño de las miniaturas, agregue esto aquí a las funciones del tema de su hijo.php

add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 200,
'gallery_thumbnail_image_width' => 100,
'single_image_width' => 500,
) );

Ajusta los tamaños como quieras

Para obtener más información, consulte aquí, también hay un plungin que puede hacer el trabajo por usted.
https://docs.woocommerce.com/document/image-sizes-theme-developers/

(@serafinnyc)

Hace 1 año, 8 meses

Verifique en Personalizar. Algunos autores ahora han agregado un tema allí.
https://imgur.com/kQDxVr1

(@ icks13)

Hace 1 año, 8 meses

@serafinnyc

esa sección no se relaciona con las imágenes que se muestran en la página de la tienda como se explicó anteriormente aquí:

Ese 263 × 263 es el tamaño de las miniaturas de productos que aparecen en mi navegador cuando hago clic en la página de la tienda. Sin embargo, el tamaño real de estas miniaturas es 600 × 600, porque cuando hace clic con el botón derecho en «abrir imagen en otra pestaña», obtiene una imagen de 600 × 600, que es el tamaño predeterminado de woocommerce que puede obtener en Personalización -> WooCommerce – > Imágenes del producto

ergo, cambiar los tamaños predeterminados en Personalización -> WooCommerce -> Imágenes del producto no hará ninguna diferencia, y realmente no lo hace. He subido imágenes de productos de 1000 × 1000 y están a escala a escala de todos modos, esas 800 × 800 están a escala a 263 × 263.

Las imágenes en la tienda de páginas parecen escalar a medida que se ajustan al tamaño de la pantalla, creo

@braehler gracias, pero esa es la parte del desarrollador que mencioné al principio y realmente no es así para mí: D.

(@serafinnyc)

Hace 1 año, 8 meses

No es a eso a lo que me refería. Una vez más, a veces los desarrolladores lo agregan. Agregar WC se suma a lo que ve y hace referencia.

Las imágenes llenarán el espacio propuesto según las columnas y el ancho total de la fila. Entonces matemáticas básicas.

Si espera una atenuación específica, ajuste el conjunto general de sus temas receptivos quitando algo de relleno o margen para lograr esto y ajuste la configuración como lo sugiere @braehle, así como la configuración predeterminada en WC en Personalizar.

(@ icks13)

Hace 1 año, 7 meses

@serafinnyc sí, pero cuando me das este enlace https://imgur.com/kQDxVr1 y el mensaje original que escribí entonces, los tamaños son 1000px y 600px y en GTmetrix las imágenes originales cargadas con tamaño 2048 se escalan a 263 y las imágenes cargadas están a 800 para escalar a 228, ese enlace está en imgur no ayuda para entender lo que realmente debería cambiar y qué tamaño usar, así como el código sugerido por @braehler

Si subo imágenes con 263px, entonces GTmetrix probablemente no detecte un problema de escala, pero esas imágenes de 263px son las imágenes que se muestran en la página del producto, que actualmente son de 600px, momento en el cual haré imágenes de producto de 263px, o pueden cambiar al tamaño de 600 pero oscuro, no sé.

GTmetrix recomienda esto: https://gtmetrix.com/blog/how-to-optimize-images-a-practical-guide/

Intenté y luego cargué la imagen de tamaño 2048px a 685px, pero no funcionó porque GTmetrix descubrió que también había una escala, esta vez en un tamaño diferente al 263

(@serafinnyc)

Hace 1 año, 7 meses

Eso es porque no sabía si estaba familiarizado con el Personalizador en ese momento.

Entonces, como referencia, les di un ejemplo hipotético. Asumiste que eso era exactamente lo que viste. No tenía un ejemplo exacto para mostrarte.

En esa sección y otras similares tenemos la posibilidad de agregar cantidades extra si lo deseamos.

De todos modos, encima de eso ahora. Claramente ahora se aplica a las matemáticas que pertenecen a las divisiones en las que se pueblan las imágenes. Como dije anteriormente.

(@ icks13)

Hace 1 año, 7 meses

Si alguien resolvió este problema y puede ayudarme a usar palabras comprensibles para no ser un usuario de desarrollo, no dude en responder, ¡ty!

(@ icks13)

Hace 1 año, 7 meses

No me preguntes cómo, dejo esta pregunta para ti geek @braehler @serafinnyc, pero habilitar «LazyLoad» resuelve el problema y le da a GTMetrix el 100% en Imágenes por Escala.

(@kbassart)

Ingeniero Automático de Felicidad

Hace 1 año, 7 meses

Gracias por informarnos que resolvió el problema. Sigamos adelante y cierre este hilo ahora.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *