La mayoría de los incidentes de imágenes borrosas son causados por el estilo del tema, lo que significa que el diseño del tema tiene dimensiones de imagen en píxeles que pueden no jugar bien con WooCommerce.

Actualización a partir de WooCommerce 3.3 Volver al principio

WooCommerce versión 3.3 y superior viene con soporte para hacer temas compatibles con WooCommerce y mejoras en la representación del tamaño de la imagen y el recorte. Estas nuevas características significan que:

• Ya no deberían producirse imágenes borrosas causadas por la incompatibilidad de los temas o la anulación del código.
• Los propietarios de las tiendas pueden controlar la anchura y la altura de sus imágenes principales.
• El cambio de tamaño de las miniaturas se puede hacer de forma automática o manual.
• Las imágenes que se muestran a los clientes siempre se ven muy bien por defecto, por lo que sus productos siguen vendiéndose solos.

Para aprender a utilizar estas nuevas características, vaya a: Gestión de productos y Adición de imágenes y galerías de productos.

Otras soluciones Volver al principio

Si está utilizando una versión de WooCommerce anterior a la 3.3, le recomendamos que actualice a la última versión para aprovechar las características descritas anteriormente.

Si, por alguna razón, no desea utilizar la última versión o la actualización a la 3.3 no soluciona el problema que está experimentando, podría ser:

• Sus ajustes de tamaño de imagen son demasiado pequeños.
• Las imágenes originales deben tener una mayor resolución.

Para solucionarlo:

• Tus dimensiones de imagen deben ser iguales o superiores a las de tu tema.
• Las imágenes originales que subas deben ser de al menos 800 x 800px o superiores para que funcionen en la mayoría de los temas.

Le mostramos cómo encontrar el tamaño máximo de imagen que quiere su tema en el vídeo y a continuación.

Tipos de imagen Volver arriba

• Imagen de producto individual: Imagen más grande de la página de detalles del producto individual y se refiere a la imagen principal/destacada.
• Imágenes de catálogo: Imagen de tamaño medio utilizada en los bucles de productos, como la página de la Tienda, las páginas de las Categorías de Productos, los productos relacionados, las ventas ascendentes y las ventas cruzadas.
• Imágenes en miniatura de productos: La imagen más pequeña que se suele utilizar en el Carrito, los Widgets y las imágenes de la Galería (opcional) debajo de la Imagen del Producto Único.

Dimensiones de la imagen estándar Volver arriba

En la versión 3.2x de WooCommerce y posteriores, la configuración de la Imagen del Producto se puede encontrar en WooCommerce > Configuración > Productos > Mostrar > Imágenes del Producto. Tenga en cuenta que el primer número es la anchura y el segundo la altura.

Las imágenes que suba se redimensionan para que coincidan con los valores que introduzca. Por ejemplo, si tu configuración es 100×100 y subes una imagen de 300×600, se redimensionará a 100×200. También puede elegir «recortar» sus imágenes, lo que las obliga a tener el tamaño especificado en la configuración, independientemente de la imagen en bruto que cargue, por lo que se recortan en lugar de distorsionarse en la escala.

Si cambia la configuración después de cargar las imágenes del producto, debe regenerar las miniaturas dentro de WordPress para que se apliquen los cambios. Para ello, recomendamos utilizar el plugin Regenerate Thumbnails.

A partir de la versión 3 de WooCommerce.3, la configuración de las imágenes de producto se encuentra en el personalizador, en WooCommerce > Imágenes de producto:

Encuentra las dimensiones de las imágenes de producto del tema Volver arriba

El tema que has elegido delega el tamaño máximo que tendrá una imagen, por lo que necesitas conocer las dimensiones en las que las renderiza para establecerlas en WooCommerce.

Imágenes del catálogo Volver al principio

Determina dónde tu tema renderiza las miniaturas del catálogo más grandes. En algunos casos, se trata de la página de la tienda; en el tema Twenty Eleven, es en el bucle de productos relacionados.

Con las herramientas para desarrolladores habilitadas en su navegador de elección, puede hacer clic con el botón derecho en la imagen y seleccionar «Inspeccionar» o «Inspeccionar elemento». Esto le dirá las dimensiones de la imagen. Tome nota de esto ya que necesitamos utilizarlas más adelante.

En Storefront (arriba), las imágenes más grandes del catálogo se representan a 213 x 213px.

Imagen de un solo producto Volver al principio

Repita el proceso para la imagen de un solo producto – la imagen más grande en una página de producto.

En Storefront, la imagen de producto individual más grande se representa a 298 x 298px.

Miniatura de producto Volver arriba

La más pequeña es probablemente la miniatura de la galería de productos. Repita el proceso de inspección para obtener las dimensiones.

En Storefront, se renderiza a 43 x 43px.

Ajustar las dimensiones de la imagen y regenerar las miniaturas Volver arriba

Ahora que se conocen todos los tamaños de las imágenes en miniatura para nuestro tema específico, podemos añadir estas nuevas dimensiones a WooCommerce para asegurar que los futuros tamaños de las imágenes serán de este tamaño o mayores.

En WooCommerce >Configuración >Productos >Mostrar, asegúrese de que los tamaños máximos de las imágenes son al menos tan grandes como las dimensiones que su tema está renderizando para esas miniaturas. A continuación, guarde los cambios.

Cualquier nueva imagen de producto que se cargue tendrá ahora miniaturas en estos ajustes, y debería aparecer sin distorsión o borrosidad.

Soporte para retina Volver arriba

Las pantallas HiDPI comúnmente conocidas como pantallas retina contienen el doble de píxeles, o más, que las pantallas antiguas. Para obtener imágenes perfectas en pantallas retina, configure sus miniaturas para que tengan el doble de tamaño que el tema. Por ejemplo, si un tema renderiza las imágenes a 80 x 80px usted quiere que sean 160 x 160px.