Todo sobre los tamaños de imagen en WooCommerce

Hace poco aprendimos todo lo que hay que saber sobre las imágenes en WooCommerce, menos en lo relativo a los tamaños, que he pensado que tenía suficiente contenido como para que no ande por ahí mezclado con otras cosas, y es lo que vamos a aprender hoy: todo lo que tienes que saber sobre los tamaños de imagen en WooCommerce.

Tipos de tamaño de imagen de producto de WooCommerce

En WooCommerce, se utilizan distintos tipos de tamaños de imágenes de productos para distintos fines. Estos son los tipos más habituales:

1. Miniatura : son como las pequeñas vistas previas que ves cuando te desplazas por una serie de productos. Te dan una idea rápida de cómo se ve el producto sin tener que hacer clic en él.
2. Catálogo : las imágenes del catálogo son un poco más grandes que las miniaturas. Por lo general, se utilizan en páginas de categorías o cuando se mira una lista de productos. Te ofrecen una vista un poco mejor para que puedas ver más detalles.
3. Producto individual : cuando haces clic en un producto para obtener más información sobre él, normalmente verás una imagen más grande. Esa es la imagen del producto individual. Es lo suficientemente grande como para ver bien el artículo y comprobar sus características.
4. Galería del producto : a veces, hay varias imágenes del mismo producto que muestran diferentes ángulos o colores. Esas imágenes adicionales forman parte de la galería de productos. Por lo general, puedes desplazarte por ellas para ver todas las opciones.
5. Imagen destacada : esta es la imagen principal que representa el producto. Suele ser lo primero que se ve cuando se navega por los productos o se busca algo específico.
6. Imagen de productos relacionados : cuando un cliente visita la página de un producto en particular, también se le recomiendan productos similares, generalmente en la parte inferior o incluso en las páginas de pago. Estos se conocen como productos de venta dirigida. Las imágenes de productos relacionados están vinculadas con productos relacionados, lo que ayuda a tus clientes a descubrir opciones o alternativas similares fácilmente.

Tamaño de imagen de producto base recomendado en WooCommerce

Las dimensiones estándar del tamaño de la imagen del producto WooCommerce son, o se recomienda que – al menos – sean de:

• Mínimo: 800 px X 800 px (alto X Ancho)
• Máximo recomendado: 1000 px X 1000 px (alto X Ancho)

Tamaño de imagen recomendado para productos WooCommerce

A pesar de las indicaciones generales del apartado anterior, a continuación tienes los tamaños recomendados para todo tipo de imágenes de productos WooCommerce.

Miniatura

Por lo general, entre 100 y 200 píxeles. Este tamaño es lo suficientemente pequeño para que se cargue rápidamente, pero lo suficientemente grande para proporcionar una vista previa clara del producto.

• Dimensiones: 100×200 o 200×200 píxeles (relación de aspecto cuadrada)
• Resolución: Optimizada para web (mínimo 72 dpi)
• Formato: JPEG, PNG o WebP

Producto individual

Lo ideal es que tengan al menos 600 píxeles de ancho para lograr una claridad y un detalle óptimos. Sin embargo, cada vez es más común utilizar imágenes más grandes, como las de 1200 píxeles de ancho, para lograr un mayor atractivo visual.

• Dimensiones: 680 x 680 píxeles hasta 800 x 800 píxeles (relación de aspecto cuadrada)
• Resolución: Optimizada para web (mínimo 72 dpi)
• Formato: JPEG, PNG o WebP

Imágenes destacadas (ampliables)

Las imágenes ampliables son importantes para productos con detalles intrincados como patrones, texturas o diseños. Permiten a los clientes ver vistas de cerca del producto, lo que es especialmente útil para artículos como joyas, zapatos o ropa de diseñador. Para obtener mejores resultados, usa imágenes que sean al menos:

• Dimensiones: 800 x 800 o 1000 x 1000 píxeles (relación de aspecto cuadrada)
• Resolución: Optimizada para web (mínimo 72 dpi)
• Formato: JPEG, PNG o WebP

Imágenes de 360 ​​grados

Las imágenes de 360 ​​grados ofrecen una vista completa del producto desde todos los ángulos. Ofrecen a los clientes una experiencia más interactiva, ya que les permiten girar el producto y verlo desde diferentes perspectivas.

Por ejemplo, los clientes quieren ver una vista de 360 ​​grados de las imágenes del teléfono inteligente para verificar la apariencia del dispositivo desde todos los lados. Para garantizar la claridad y la rotación suave, usa imágenes de alta resolución con una resolución de 2:1, como:

• Dimensiones: 4096 x 2048 píxeles (relación de aspecto 2:1)
• Resolución: Optimizada para web (mínimo 72 dpi)
• Formato: JPEG, PNG o WebP

Catálogo

El mejor tamaño de imagen de producto de WooCommerce para páginas de catálogo, categorías y búsquedas es de 370 x 370 píxeles. Este tamaño permite una mejor visualización de los detalles del producto y, al mismo tiempo, mantiene tiempos de carga rápidos.

• Dimensiones: 370 x 370 píxeles (relación de aspecto cuadrada)
• Resolución: Optimizada para web (mínimo 72 dpi)
• Formato: JPEG, PNG o WebP

Galería del producto

De manera similar a la imagen del producto individual, con dimensiones recomendadas de al menos 600 píxeles de ancho, es fundamental que todas las imágenes de la galería tengan el mismo tamaño y relación de aspecto. El tamaño recomendado para las miniaturas de la galería es de 150 x 150 píxeles. Sin embargo, es posible que distintos temas admitan tamaños mayores.

• Dimensiones: 680 x 680 píxeles hasta 800 x 800 píxeles (relación de aspecto cuadrada)
• Miniatura de la galería : 150 x 150 píxeles o 200 x 200 píxeles (relación de aspecto cuadrada)
• Resolución: Optimizada para web (mínimo 72 dpi)
• Formato: JPEG, PNG o WebP

Imagen principal

Generalmente, el tamaño es el mismo que el de la imagen del producto. Esto garantiza uniformidad en la apariencia y brinda una representación visual cautivadora del producto.

• Dimensiones: 680 x 680 píxeles hasta 800 x 800 píxeles (relación de aspecto cuadrada)
• Resolución: Optimizada para web (mínimo 72 dpi)
• Formato: JPEG, PNG o WebP

Imagen de productos relacionados

Dependiendo de los temas, puede ser el mismo que el tamaño de las imágenes de la página de la Tienda, como:

• Dimensiones: 200 x 200 píxeles o 300 x 300 píxeles (relación de aspecto cuadrada)
• Resolución: Optimizada para web (mínimo 72 dpi)
• Formato: JPEG, PNG o WebP

¿En qué formatos de imagen debería guardar las imágenes de productos de WooCommerce?

Al crear las imágenes de tus productos puede surgir una pregunta: ¿Qué tipo de archivo debo utilizar?

Existen tres tipos de archivos de imagen que se utilizan normalmente para las imágenes de productos: PNG, JPEG y WebP. El tamaño de las imágenes es importante, pero si buscas calidad, el tipo de archivo también lo es. Por lo tanto, analicemos cada uno de ellos.

JPEG y JPG: ideales para imágenes generales de productos

El tipo de archivo JPEG debería ser el que elijas para las imágenes de productos. Este tipo de archivo es pequeño, por lo que no ralentizará tu web, incluso si el tamaño real de píxeles de tu imagen es grande.

Este tipo de archivo es perfecto para fotografías de productos en general .

PNG: ideal para capturas de pantalla e imágenes con texto

El tipo de archivo PNG, si bien tiene una calidad superior al JPEG, debe usarse con precaución. Si se usa para imágenes generales de productos y el tamaño de la imagen es grande, es probable que el archivo también sea grande en términos de tamaño de archivo, lo que ralentizará el sitio.

WebP: Mejor en general

WebP es el formato de imagen más reciente para su sitio web. Ofrece la mejor compresión de imágenes sin perder calidad. En comparación con los PNG, las imágenes WebP suelen tener un tamaño un 26 % más pequeño.

AVIF: El mejor en todo, pero toca esperar un poco

Este formato es, con diferencia, el mejor de todos, pues es compatible con todo tipo de imagen, con transparencias, con texto, animaciones, de todo, y ofrece el menor peso de archivo a la mayor calidad posible, incluso en comprensión sin pérdida. Como contrapartida aún hay algunos navegadores que no son compatibles del todo, redes sociales que no las muestran, como X, o feeds como Google Shopping que aún no lo admiten.

Factores que afectan el tamaño ideal de la imagen de producto en WooCommerce

Elegir el tamaño ideal para la imagen de producto en WooCommerce no es una cuestión de talla única. Hay varios factores que pueden influir en el tamaño óptimo, lo que garantiza una excelente experiencia de usuario y un rendimiento de primera. A continuación, analizaremos en profundidad estas consideraciones fundamentales:

Tipo de producto

• Ropa: en el caso de las prendas de vestir, es fundamental mostrar detalles como la textura de la tela, las costuras y el ajuste. Las imágenes de entre 800 y 1000 píxeles de ancho suelen ofrecer suficientes detalles y mantener un buen rendimiento, pero en determinados sectores, como el lujo, puede que tengas que subir imágenes de mayor resolución ( entre 1800 1 2000 píxeles de ancho), para poder ofrecer detalles de mucha calidad.
• Electrónica: en el caso de productos como ordenadores portátiles o teléfonos inteligentes, es importante destacar las características y los detalles técnicos del producto. Planteáte utilizar imágenes un poco más grandes para garantizar la claridad del texto y los componentes complejos, pero tampoco es lo más importante.
• Joyas: los primeros planos detallados son esenciales para mostrar la artesanía y las complejidades de las joyas. Las imágenes de entre 800 y 1000 píxeles pueden funcionar bien, pero puedes utilizar tamaños ligeramente más grandes (hasta 1800 píxeles) para productos con detalles intrincados, como piedras preciosas o grabados.

Funcionalidad de zoom

Si tu tema ofrece la función de zoom para las imágenes de productos, permite a los clientes ver los detalles más de cerca. Esto puede ser particularmente beneficioso para productos como joyas o productos electrónicos. En tales casos, no te queda otra que usar imágenes base más grandes (entre 1800  y 2000 px de ancho) para garantizar la claridad al hacer zoom.

Público objetivo y dispositivos

También, dependiendo del tipo de cliente, puede afectar al tamaño y resolución de las imágenes.

• Compatibilidad con dispositivos móviles : hoy en día, una parte importante de las compras en línea se realizan en dispositivos móviles. Elija tamaños de imagen que se vean bien y se carguen rápidamente en las pantallas de los dispositivos móviles. Considere utilizar técnicas de diseño adaptable que ajusten automáticamente el tamaño de la imagen según el dispositivo de visualización. Esto también incluye que la relación de aspecto sea en modo retrato (más alto que ancho), mejor para móviles.
• Demografía objetivo : conocer a su público objetivo puede influir en las consideraciones sobre el tamaño de las imágenes. Por ejemplo, las imágenes más grandes pueden ser beneficiosas si tu mercado objetivo son consumidores expertos en tecnología que se enfocan en los detalles del producto. También puede influir la edad de tus posibles clientes. Por ejemplo, si tu público objetivo es anciano necesitarás imágenes más grandes, por otra parte, el público más joven está habituado a ver online las imágenes en relaciones de aspecto más altas que anchas, como en las redes sociales, así que para este tipo de cliente es una buena elección adoptar esta estrategia.

Tema WooCommerce

El tema específico para WooCommerce que hayas elegido también puede afectar el tamaño ideal de la imagen. Algunos temas pueden tener una función de recorte de imágenes incorporada o tamaños de miniaturas predefinidos.

Es importante consultar la documentación de tu tema para comprender las recomendaciones específicas sobre el tamaño de las imágenes que ofrecen. Estas recomendaciones pueden basarse en el diseño del tema y en cómo maneja las imágenes de productos.

Es muy habitual encontrar en el archivo de funciones del tema un código como el siguiente, que determine las imágenes para cada tipo de imagen:

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

Esto te forzará en muchas ocasiones a encontrar el mejor equilibrio posible entre los tamaños que mejor se adaptan al tema y los que tú quieres usar para tu tienda online y tus clientes.

Feeds de productos

Para que vender tus productos mediante feeds en canales como Google Shopping o Meta, las imágenes deben cumplir con los requisitos específicos de tamaño de cada servicio. Estos requisitos pueden diferir del tamaño ideal para tu web.

Por ejemplo, los requisitos de imagen de Google Shopping son:

• Imágenes que no sean de prendas de vestir: mínimo 100 x 100 píxeles
• Imágenes de prendas de vestir: mínimo 250 x 250 píxeles
• No se permiten imágenes mayores a 64 megapíxeles
• No se permiten archivos de imagen mayores a 16 MB

Sin embargo, estos son requisitos mínimos. Google Shopping recomienda que cargues la imagen de tu producto en tamaño completo, con la resolución más alta y de mayor tamaño (hasta 64 megapíxeles, eso sí) y un tamaño de archivo de 16 MB con un mínimo de 1500 x 1500 píxeles .

Es fundamental que revises las especificaciones de tamaño de imagen para cada plataforma que planees utilizar para la venta mediante feeds de productos.

¿Dónde se cambian los tamaños de imagen de producto en WooCommerce?

Parece cachondeo, pero a lo largo de su corta historia WooCommerce ha cambiado varias veces la ubicación de los ajustes desde los que cambiar los tamaños de imagen, y ni siquiera te podría asegurar que los actuales vayan a durar mucho, y encima está el asunto de que, dependiendo del tipo de tema que uses, clásico o bloques, se hace en un sitio diferente. Vamos, una juerga.

De hecho, en los temas de bloques, actualmente, no es posible definir fácilmente los ajustes de tamaño de imagen, pues no los encontrarás en ninguna parte del editor del sitio, y solo podrás modificarlos editando el archivo theme.json o, en algunos casos, el archivo de funciones.

Donde sí los vas a encontrar fácilmente es en el personalizador, en los temas clásicos, en la sección de WooCommerce → Imágenes de producto.

¿Te lo digo?, bueno, venga …

Hay un truco, aunque uses un tema de bloques, compatible con el editor del sitio, y es que, aunque tengas el tema de bloques activo, y no aparezca el enlace al personalizador, puedes forzarlo mediante la URL, o sea, algo como https://midomino.com/wp-admin/customize.php, y se mostrará una versión limitada del personalizador, pero suficiente para esto que nos ocupa, pues al menos te mostrará la sección de ajustes de imágenes de producto de WooCommerce.

¡Fin!

Espero haberte ayudado a comprender mejor los tamaños de imagen en WooCommerce, tanto los recomendados como los recomendables, y haberte sido de utilidad para que tu tienda online luzca mejor que nunca.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!