Es poco probable que todas las imágenes de nuestro catálogo estén al mismo tamaño, ya sea porque no tenemos tiempo para retocarlas, el proveedor nos la manda así, etc. Esto hace que se nos quede un catálogo deforme como puedes ver en la siguiente imagen:
Esto no crea una imagen de página web profesional, lo que hace que podamos perder ciertas ventas por usabilidad o falta de confianza del cliente en nosotros. Lo ideal sería un catálogo de esta forma:
Esto mismo también se da en la propia ficha de producto, sobretodo con las imágenes muy altas y poco anchas:
En este tutorial en español vamos a ver cómo hacerlo de la forma más efectiva posible, para que todas tengan el mismo tamaño, no pierdan calidad y lo más importante… HACERLO DE MANERA AUTOMÁTICA.
Índice
Elegir el tamaño de las imágenes por defecto
Esto será lo primero que debemos configurar, ya que quizás por defecto en nuestra plantilla mete algún tamaño poco común. Por lo general una proporción cuadrada 1:1 es lo ideal, hay otros sectores como el de la moda femenina que tiene que ser más alta 3:4 por ejemplo.
Esto lo configuramos en Personalizar > Apariencia > WooCommerce > Imágenes de producto:
Recomiendo por defecto 600 de ancho, sin embargo como siempre sigo depende de tus imágenes: si necesitas que el cliente haga zoom para verlo al detalle tendrá que ser un tamaño superior(por ejemplo).
Smart Image Resize for WooCommerce
Este será el plugin que usaremos para ponerlas a la misma proporción, se encuentra de forma gratuita en el repositorio oficial de WordPress. Te permite:
- Poder elegir el tamaño al que vas a redimensionar la imagen.
- Eliminar los espacios que se quedan en blanco de las imágenes que son horizontales.
- Crear espacios en blanco o en el fondo que prefieras a aquellas imágenes muy altas.
El problema de este plugin es que la versión gratuita solo te deja 150 imágenes. Os voy adelantando que para el precio que tiene el PRO merece la pena pagarlo, porque te ahorras un trabajo importante. Además podrás cambiarlas de formato a .jpg o WebP.
También permitirá poner marcas de agua en las fotos de WooCommerce en un futuro.
Configuración del plugin
Antes que nada recomiendo hacer una copia de seguridad, por si acaso la configuración falla.
Una vez instalado nos vamos a ajustes del plugin y nos saldrá la siguiente pantalla:
En este caso marcamos Enable Re-sizing y elegimos los tamaños de imágen(sizes). Hay que marcar todos los que ten vinculados con WooCommerce o plugins que dependan de este, como los de YITH.
Elegimos el color de fondo con el que queremos rellenar las fotos largas, en este caso recomiendo el color que tengáis de fondo por defecto en el ecommerce. Puedes elegir también la compresión de la imagen. una vez elegida toda la configuración guardamos cambios e instalamos el siguiente plugin que nos recomienda en la otra pestaña:
Regenerate Thumbnails
Este plugin nos servirá para volver a redimensionar las fotografías con la permisa que hemos configurado en el anterior, nos saldrá la siguiente pantalla:
En ese caso vemos 2 opciones que podemos configurar:
Saltar la regeneración si existe ya el tamaño acorde: Con esto conseguimos ahorrarnos fotos para esas 150 y además no saturar el servidor con la duplicidad de esas imágenes.
Borrar los archivos de tamaños antiguos: Esto no lo marcaría nunca, ya que es muy peligroso por si se borran imágenes que no deberían eliminarse.
Ahora solo nos queda elegir de qué forma regeneramos, si son todas o bien solo las imágenes destacadas(las que salen de portada en los productos de WooCommerce).
He puesto este caso peculiar ya que con la version gratuita solo podemos 150, por lo que preferimos cambiar solo las de portada que las del resto de la galería. Si pagamos la versión premium haríamos las 313.
Siguiendo con el ejemplo del producto del principio se nos queda el siguiente resultado:
Resolución
JO-DER ¿Que diferencia con el ejemplo no?. Puede parecer complicado(no me esperaba que se quedase tan largo) pero merece mucho la pena hacerlo así que ir imagen por imagen en el Photoshop editándolas.
Por último recordaros que las imágenes también salen en el feed de Google Shopping, por lo que dejarlas bien así también es una ventaja.
Hola. Gracias por la información, me fue de mucha ayuda.
excelente información !
pero tengo un problema y es que no logro cambiar el color del fondo de las fotos, al seleccionar el color le doy guardar los cambios pero no cambia el color del fondo de las fotos . como podría revertir el proceso para volver hacerlo con el fondo deseado ?
saludos .
Hola Mauricio,
El fondo de las fotos no lo cambia, solo lo rellena lo que falta. Es decir, si la imágen es rectangular rellena el fondo arriba y abajo de ese color para hacerla cuadrada.
Creo que te refieres a eso,
Un saludo!
Gran articulo Diegol.
Pero tengo un problema y es que cuando las eh regenerado las imágenes al verlas se ven borrosas, antes las imágenes tenían de ancho 250 x 450 mas o menos, y ahora se ven todas centradas y enteras pero borrosas.
¿Sabes que puede suceder? muchas gracias diegol
Muchas gracias Chema!
Por lo que veo las fotos son muy pequeñas, mínimo para WooCommerce deberían tener entre 600-1000 de ancho. Aun así miraver volver a redimensionarlas pero elige un ancho más pequeño como el de 300×300, sino te pasará igual.
Un saludo!