Imágenes en WooCommerce – Casi todo lo que tienes que saber

Las imágenes de productos de alta calidad son un factor fundamental para enamorar a tus clientes y conseguir más ventas en cualquier Ecommerce.

Si te fijas en las mejores webs de Ecommerce, unas buenas fotografías, dónde se muestre de verdad la calidad de los productos, marcan la diferencia.

Y sino solo tienes que fijarte en cómo compras tú, qué valoras a la hora de seleccionar productos ¿a que prefieres ver imágenes en detalle antes de comprar algo, y da poca confianza cuando solo te ofrecen una imagen a baja resolución y calidad?

Por supuesto, esto debe estar acompañado de una buena optimización del Ecommerce, para que el hecho de ofrecer imágenes de calidad no signifique comprometer la velocidad de carga, un valor también fundamental para la compra.

No hace falta que me repita mucho en esto, ya vimos qué es lo que más sobrecarga  una web, con datos, y también he publicado ya artículos de cómo optimizar tu WooCommerce, así que no insistiré mucho más en ello en esta guía.

Así que vamos con ello, la ruta es sencilla.

Configura bien los tamaños de imagen

Desde la versión 3.3 de Woocommerce los tamaños de imagen se configuran desde el personalizador de WordPress.

En concreto en Apariencia > Personalizar > WooCommerce > Imágenes de producto

Puedes controlar varios parámetros de las imágenes en estos ajustes, que dependerán del tema activo.

Por ejemplo, en Twenty Nineteen y otros muchos temas puedes configurar:

• Ancho de la imagen principal.
• Ancho de la miniatura.
• Recorte de la miniatura.

Sin embargo, con Storefront, los ajustes disponibles son:

• Recorte de la miniatura.

En cualquier caso, vamos a usar el ejemplo de Twenty Nineteen, que es el más extendido, y que ofrece los anchos de imagen principal y miniatura.

Si cambias el ancho de la imagen o la miniatura de la original a otra, WooCommerce redimensiona automáticamente las imágenes en segundo plano, no necesitas un plugin para regenerar miniaturas, ya tiene esa funcionalidad incluida.

De todos modos igual te estás liando un poco, así que vamos a ir más despacio, por partes.

Para empezar, da igual el tamaño por defecto que venga inicialmente en los ajustes, para ir viendo lo que pasa, pondremos el ancho de la imagen principal a 800 píxeles.

Y ahora la explicación de lo que pasa…

Ancho de la imagen principal

Este ajuste controla el ancho de la imagen principal del producto en la página de producto simple.

A poco que seas observador te habrás dado cuenta de que no hay un ajuste para cambiar la altura de la imagen ¿verdad?

Esto es debido a que WooCommerce mostrará la imagen proporcionalmente, de acuerdo a como se haya subido o especifiques el ancho. No hay un ajuste de altura porque no es necesario, se ajustará automáticamente al ancho, para que sea proporcional.

Si quieres saber el tamaño de la imagen actual puedes usar el inspector del navegador: Clic derecho en la imagen y seleccionar «Inspeccionar».

Con esto se abrirá la consola de desarrollo de Chrome, dónde podrás ver que la imagen tiene un ancho de 800 píxeles, que es justo lo que le hemos configurado en el personalizador.

Pero, si te fijas en el enfoque de la imagen en la parte izquierda del inspector, verás que el elemento que la contiene marca solo 347.59 píxeles de ancho. Este es el ancho que tenemos en el contenedor actual, dependiendo del tamaño de la ventana o dispositivo, del tema activo.

Dicho de otro modo, que aunque tú especifiques el recorte de ancho de la imagen, el tema como mucho tiene espacio para un tamaño menor.

Y ¿sabes qué? gracias a esto es porque existe la funcionalidad de zoom en WooCommerce, pues al pasar el cursor por la imagen – de 800 píxeles- , en un contenedor de menos de 400 píxeles, WooCommerce permite ver más detalle de la imagen, algo que gusta a todos los clientes.

¿Conviene usar el tamaño máximo del contenedor?

Podrías pensar, con razón, que por optimización, para cargar imágenes más pequeñas, sería mejor cambiar el ajuste de WooCommerce y reducir el ancho de la imagen principal al máximo del contenedor de tu tema.

Pero perderías el efecto zoom, al haber recortado la imagen al tamaño exacto del contenedor.

Además, el valor del ancho máximo del contenedor depende de cada tema, y del dispositivo en que se esté viendo la página, pero si lo quieres así, ya sabes, revisa la documentación del tema, la hoja de estilos, o pregunta al desarrollador, y cambia el ajuste de ancho de la imagen principal al del contenedor del tema.

¿No quieres zoom en las imágenes de tu WooCommerce? Aquí te explico cómo desactivarlo, que es también otra posibilidad.

Recuerda, que después de cada cambio la visualización no será inmediata, WooCommerce tardará un poco en regenerar las imágenes, todas.

Ancho de la miniatura

En este otro ajuste configuramos el ancho de las imágenes en miniatura de la tienda y archivos de categorías de productos.

Además, también se aplica a las imágenes en los productos relacionados, ventas cruzadas y dirigidas.

Si, además, utilizas shortcodes de WooCommerce para mostrar productos en alguna otra parte, también se aplicará ahí.

Recorte de la miniatura

Los ajustes que podemos seleccionar aquí son:

• 1:1 – Hace que tus imágenes en miniatura se recorten como cuadrados. Corta las imágenes verticales por arriba y abajo, o desde el centro si lo entiendes mejor así,  lo que hace que se suelan ver bastante mal.
• Personalizado – Aquí puedes configurar una relación de aspecto del tipo de 4:3 (ancho y alto),  de 16:9 o la que te guste más. En este caso las imágenes serían más anchas que altas, o si lo prefieres al revés, por ejemplo 3:4 o similares que las harían más altas que anchas. De nuevo, los recortes se hacen desde el centro.
• Sin recortar – Casi siempre lo más recomendable, pues mantiene la relación de aspecto original de las imágenes, tal como las hayas subido.

En mi opinión, no deberías usar otra configuración que la de sin recortar, ya que no tienes control total de cómo se hacen los recortes en WooCommerce.

De todos modos, al mismo tiempo, debes ser consistente con los tamaños de imagen que subas, pues si subes imágenes en vertical y en horizontal tu tienda se verá horrible, esto lo veremos al final cómo hacerlo.

Faltan ajustes de imágenes en el personalizador

Si echas en falta ajustes de imágenes en e l personalizador, como hemos visto arriba en el ejemplo de Storefront, entonces tu tema para WooCommerce está configurando las imágenes mediante código.

De este modo, al configurar los tamaños de las imágenes desde el código, se quita la compatibilidad con el personalizador. Lo hacen muchos temas … y plugins.

Si te pasa esto contacta con el soporte del desarrollador del tema para saber qué ajustes se hacen a las imágenes desde el código.

Cómo cambiar los tamaños de la galería de los productos

A estas alturas es probable que ya te hayas dado cuenta de que aún hay otras imágenes sobre las que no hay ningún ajuste dónde configurar su tamaño, las imágenes adicionales del producto, las de la galería.

Si has configurado las miniaturas a «Sin recortar» las imágenes se mostrarán proporcionalmente a cómo las subiste originalmente.

Y si quieres más control sobre el tamaño de las imágenes de miniatura puedes ajustarlas mediante un filtro. Solo tienes que añadir un código como el siguiente al archivo functions.php de tu tema activo:

/* Cambiar tamaño miniaturas WooCommerce */
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'ayudawp_dimensiones_miniaturas_woo', 99 );
function ayudawp_dimensiones_miniaturas_woo( $size ) {
    return array(
        'width'  => 100,
        'height' => 120,
        'crop'   => 1,
    );
}

En el código anterior deberás cambiar los parámetros width (ancho), height (alto) y crop (recorte) a los que quieras aplicar.

Cuando hayas personalizado y guardado el código, tendrás que instalar, activar y ejecutar el plugin Regenerate Thumbnails para redimensionar todas las miniaturas de las galerías de WooCommerce. Como aquí has metido mano por tu cuenta, WooCommerce no lo hará automáticamente. Cuando termines el proceso de regenerar las miniaturas puedes desactivar y borrar el plugin sin problemas, no hay que tenerlo siempre instalado.

Qué tamaños de imagen debería subir para los productos

Si seguimos con el ejemplo que hemos visto arriba ¿debería subir solo imágenes que tengan un ancho de 800 píxeles?

Personalmente, suelo subir imágenes algo más grandes normalmente, ya que me permite más flexibilidad si quiero cambiar las cosas en el futuro.

Con los tamaños de pantalla cada vez más anchos, es posible que necesite incluir un punto de ruptura adicional para pantallas más grandes en algún momento. Esto aumentaría el ancho de la cuadrícula, lo que también requiere imágenes de producto más amplias.

He visto algunos catálogos inmensos de WooCommerce, con miles de productos, y todas las imágenes se subieron demasiado pequeñas. Me refiero a tamaños de 250 píxeles de ancho o menos, que simplemente no se ven bien.

Así que no cometas este error y, si quieres seguir mi consejo, sube las imágenes de productos que tengan al menos 1200 píxeles de ancho.

Siempre podrás en un futuro reducir el tamaño de las imágenes que se muestren, pero no podrás aumentar su tamaño.

Además, si subes imágenes más grandes, te permite la flexibilidad de utilizar la función de zoom de imágenes de WooCommerce si lo deseas.

Prepara las imágenes de producto antes de subirlas

Como te dije anteriormente, es importante que seas consistente en los tamaños de imagen que subas:

• O todas en relación de aspecto horizontal o todas en vertical, pero no cada una de un aspecto.
• Todas con el mismo tamaño de lienzo.

Ambos puntos son igual de importantes. Una tienda con distinta relación de aspecto y tamaño de lienzo de las imágenes se verá descolocada, poco profesional, y no invitará a comprar.

A continuación te contaré cómo lo hago yo en las tiendas que monto para mi y la recomendación que hago a mis clientes y alumnos, luego tú utiliza el programa y aspecto que prefieras, por supuesto.

Solo te muestro mi proceso para que entiendas a lo que me refiero y, sobre todo su importancia.

Define y crea un tamaño de lienzo consistente

Abre tu programa favorito de edición y crea un lienzo (canvas si está en inglés) que será la base dónde irán todas las imágenes de la tienda.

Bien sea al abrir la aplicación, o posteriormente, define un tamaño de lienzo que será el que uses para todas las imágenes de productos de la tienda.

Puedes incluso guardar el tamaño si tu aplicación te lo permite.

Da igual el tamaño de cada foto que posteriormente añadas de los productos, todas deberás añadirlas dentro de este lienzo, así toda tu tienda mostrará un aspecto consistente en su catálogo.

Añade un color de fondo al lienzo

Esto es cuestión de gustos, pero creo que siempre queda mejor definir un fondo de lienzo para todas tus imágenes, degradado o no, gris, blanco, negro o del color que quieras. Aumentará la consistencia de tu marca en la tienda.

En este ejemplo he añadido un relleno en un color gris neutro.

Añade la imagen del producto a tu lienzo

Ahora abre la imagen del producto, copia y pégala en tu lienzo.

Si hace falta ajusta el tamaño para que se adapte al tamaño del lienzo, y cualquier posterior ajuste de imagen que consideres hacerle.

Exporta la imagen

Una vez hayas hecho los ajustes de diseño que sean necesarios para el Ecommerce, exporta la imagen.

Para ello mi recomendación es la siguiente:

• Exporta siempre como JPG (WebP si tu sitio tiene registrado este formato) ya que es el formato más compatible con todos los navegadores y con una relación de calidad/peso muy buena.
• Asegúrate de que el peso máximo sea de 100 Kb. Solo en casos muy especiales necesitarás más peso, te aconsejo siempre primero probar así.
• Utiliza nombres de archivo semánticos, que signifiquen algo y describan la imagen, por ejemplo: montainbike-amarilla-vector-1.jpg. Esto ayudará a generar automáticamente buenos títulos, y también a que los buscadores las indexen más fácilmente.

Da igual el programa que utilices, siempre habrá una opción de exportar, exportar para web o como se llame. Lo importante es que mantengas una calidad suficiente con un peso de imagen controlado, para no perjudicar los tiempos de carga.

Optimización de imágenes

Si utilizas una estrategia de subida de imágenes como la que te acabo de describir ya podrías subir tus imágenes, pero si por algún motivo no te es posible deberías antes redimensionar y optimizar en lo posible las imágenes de los productos.

Mi recomendación para estas tareas es la web iloveimg, una auténtica joya, totalmente en español, con herramientas online gratuitas para…

• Convertir a JPG
• Redimensiona imágenes
• Recortar imágenes
• Comprimir (optimizar) imágenes
• Añadir marcas de agua
• … etc

Te va a encantar, seguro, y tiene de todo gratis, hasta una herramienta para hacer memes. De nada 🙂

En los ejemplos del apartado anterior yo he utilizado Pixelmator, pero si tienes Photoshop también podrás hacerlo, o incluso he llegado a hacer estas cosas con aplicaciones de presentaciones, como Keynote y Powerpoint, y luego exportando como imagen. La necesidad hace milagros.

De todos modos no olvides la importancia del lienzo, de la consistencia. Lo importante es el objetivo, no la herramienta que uses para alcanzarlo.

La trinidad de la optimización de imágenes

Pero, volviendo al tema de la optimización de imágenes, lo que nunca estará de más es la trinidad de la optimización de imágenes:

1. Caché.
2. CDN.
3. Carga diferida.

Da igual la estrategia que hayas seguido antes de subir las imágenes, aplica siempre la triada para tener una tienda online rápida y optimizada.

¿Dudas, quejas, sugerencias?

Aunque esta guía pretende ser lo más completa posible, y servirte de manual para saber todo  lo necesario sobre el uso, gestión y optimización de imágenes en WooCommerce, no me gusta ser excesivamente pretencioso, así que por eso lo del «casi», porque ningún artículo está completo sin tu opinión.

Siéntete libre de comentar tu opinión, plantear dudas, quejarte si no estás de acuerdo con algo, o incluso de aportar más ideas. Ahí abajo tienes los comentarios

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