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 baja. Para que eso no ocurra, te explicamos qué aspectos debes tener en cuenta para evitar imágenes de productos borrosas en WooCommerce.
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. Todo esto es muy sencillo de configurar, si se siguen los pasos que mencionamos a continuación.
Tipos de imágenes en WooCommerce
En WooCommerce existen 3 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.
- Imagen 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 3 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“.
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.
