Evitar imágenes de productos borrosas en WooCommerce

Un problema muy común cuando estás empezando con WooCommerce y con el que yo mismo he lidiado, es el del tamaño de las imágenes de productos. Si no usas las dimensiones (ancho x alto) correctas en los archivos de las fotos de tus productos, estas se mostrarán con una calidad muy pobre. Para que no te ocurra eso, voy a dedicar este artículo a explicarte qué aspectos debes tener en cuenta para evitar imágenes de productos borrosas en WooCommerce.

Como ya te habrás fijado, la inmensa mayoría de plantillas para WooCommerce muestran las imágenes de producto en formato cuadrado, esto quiere decir que la foto del producto debe tener el mismo ancho que alto, de lo contrario se mostrará recortada. Además, cada plantilla usa unas dimensiones diferentes para mostrar las fotos del catálogo de productos, lo que hace aún más difícil saber cuál es el tamaño de foto correcto que debemos usar. Pero no te preocupes, todo esto es muy sencillo de configurar, si sigues las recomendaciones que te voy a explicar a continuación.

Tipos de imágenes en WooCommerce

En WooCommerce existen 3 (ahora son 2) tipos de imágenes de producto cada una con unas dimensiones específicas. Dependiendo de qué página se esté visualizando en la tienda, se usarán un tipo de imagen u otra. Los tipos de imágenes de los que hablo son:

• Imágenes de Catálogo. Especifica las dimensiones de cada imagen del catálogo de productos.(Este tipo de imagen ya no se usa)
• Imagen principal del Producto. Indica el tamaño utilizado en la imagen principal de la ficha de producto.
• Vistas en Miniatura del producto. Este tamaño se aplica generalmente para la galería de imágenes en la ficha del producto.

Cada plantilla de WooCommerce tiene sus propias dimensiones para estos 2 tipos de imágenes de producto. Si usas una plantilla premium de WooCommerce lo lógico es que en la documentación de la plantilla vengan especificadas las dimensiones correctas que debes usar en las fotos de productos.

¿Cómo corregir el efecto de fotos borrosas o pixeladas en WooCommerce?

El origen del problema de las fotos borrosas en WooCommerce es que las dimensiones (ancho x alto) de los tipos de imágenes que he explicado antes son inferiores a las que realmente usa la plantilla. Es decir, si en la página de catálogo de productos, la plantilla que estás usando tiene definido un tamaño de 150×150 píxeles por cada foto de producto y después en la configuración de WooCommerce tienes configurado que las imágenes de catálogo tengan unas dimensiones de 100×100 píxeles, entonces tu tema de WooCommerce mostrará las fotos de productos pixeladas como se aprecia en la siguiente imagen:

Para evitar que ocurra esto, lo primero que hay que hacer es conocer el ancho y alto usado por la plantilla para mostrar las fotos. La manera más fácil de conocer estos valores es usar la función «Inspeccionar elemento» (si estás usando Chrome como navegador) o la función «Ver información de la imagen» (si estás usando Firefox). Yo voy a mostrarte cómo hacerlo con Chrome, para ello haz clic derecho sobre la foto de producto y después clic en «Inspeccionar elemento«.

Después de esto se abrirá la herramienta de inspección de elementos y dentro podrás ver el código fuente de la foto que acabas de inspeccionar destacado en azul. Lo único que debes hacer es situar el cursor del ratón encima de esas líneas de código y ya podrás ver la información a cerca de las dimensiones reales que está usando tu plantilla WooCommerce.

Como puedes apreciar en la imagen anterior, en este caso las dimensiones que está usando la plantilla (133×133 píxeles) son mayores que las dimensiones que hay configuradas en WooCommerce (100×100 píxeles) y por eso se muestra la foto con poca calidad.

Una vez conocemos las dimensiones reales que está usando la plantilla, sólo falta configurar los tipos de imágenes en WooCommerce con las mismas dimensiones.

Esto se hace desde «WooCommerce > Ajustes > Productos > Mostrar» y abajo en la sección «Tamaño de imágenes de productos» introducimos las dimensiones que usa la plantilla para cada tipo de imagen y hacemos clic en «Guardar cambios«.

Puedes hacerlo desde «Apariencia > Personalizar > WooCommerce > Imágenes de producto» introduciendo los valores de ancho que usa tu tema tanto para la imagen principal como para las de miniatura.

En este ejemplo concreto mi plantilla usa los siguientes valores:

Esta configuración soluciona el problema para las nuevas fotos de productos que publiquemos en la tienda a partir de ahora, pero no va a afectar a las fotos de productos que ya hay publicadas.

Para que la nueva configuración de tamaños afecte a todas las fotos de productos, hay que emplear un plugin llamado Regenerate Thumbnails. Simplemente una vez tengas instalado y activado el plugin, entra en «Herramientas > Regen. Thumbnails«, haz clic en el botón «Regenerate All Thumbnails» y espera a que se redimensionen el 100% de las imágenes.

Aquí puedes ver una comparación de la calidad de la imagen antes y después de configurar los tamaños de imagen en WooCommerce y redimensionarlas con el plugin Regenerate Thumbnails.

Esto es todo lo que necesitas saber para evitar imágenes de productos borrosas en WooCommerce.

Como ves, no hay que modificar nada de código, ni tocar la hoja de estilos de la plantilla de WooCommerce, lo único que tienes que saber es configurar los tamaños de imágenes correctamente.

Las fotos de producto es uno de los aspectos más importantes a la hora de crear una ficha de producto optimizada que consiga ventas. Si quieres conocer mi sistema para crear fichas de producto que vendan en piloto automático, te recomiendo que hagas clic aquí.