Imágenes de productos borrosas: ¿cómo lo solucionamos en WooCommerce?

La mayoría de los problemas de imágenes borrosas se deben al estilo del tema, lo que significa que el diseño del tema tiene tamaños de imagen de píxeles que no son compatibles con WooCommerce.

Actualización de WooCommerce 3.3

WooCommerce versión 3.3 y superior viene con soporte para hacer que los temas sean compatibles con WooCommerce y mejorar la representación y el recorte de imágenes. Estas nuevas funciones significan:

  • Las imágenes borrosas causadas por la incompatibilidad del tema o el código de superposición ya no deberían aparecer.
  • Los propietarios de las tiendas pueden controlar el ancho y el alto de las imágenes principales.
  • El cambio de tamaño de las miniaturas se puede realizar de forma automática o manual.
  • Las imágenes que se muestran a los clientes siempre se ven geniales, ¡así que sus productos se venden solos!

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

Otras soluciones para imágenes borrosas

Si está utilizando una versión de WooCommerce inferior a 3.3, le recomiendo que actualice a la última versión para aprovechar las funciones descritas anteriormente.

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

  • La configuración del tamaño de la imagen es demasiado pequeña.
  • Las imágenes originales deben tener una resolución más alta.

Para solucionar el problema de las imágenes borrosas:

  • El tamaño de su imagen debe coincidir o ser más grande que su tema.
  • Las imágenes originales que cargue deben tener al menos 800 x 800 píxeles o más para que funcionen con la mayoría de los temas.

Tipos de imágenes

  • La imagen de un solo producto: la imagen más grande en la página de detalles del producto individual y se refiere a la imagen principal / presentada.
  • Imágenes del catálogo: Imagen de tamaño mediano utilizada en bucles de productos, como la página de la tienda, las páginas de categoría de producto, los productos relacionados, las ventas adicionales y las ventas cruzadas.
  • Miniaturas del producto: La imagen más pequeña de uso común en el carrito, los widgets y (opcionalmente) las imágenes en la galería debajo de la imagen del producto.

Dimensiones de imagen estándar

En WooCommerce versión 3.2xy anteriores, la configuración de la imagen del producto se puede encontrar en WooCommerce> ajustes> Productos> Monitor> Imágenes del producto. Tenga en cuenta que el primer número es el ancho y el segundo la altura.

Dimensiones de imagen estándar
Dimensiones de imagen estándar

Se cambia el tamaño de las imágenes que carga para que coincidan con los valores que ingresó, solo para evitar el problema de imágenes borrosas. Por ejemplo, si su configuración es 100 × 100 y está cargando una imagen de 300 × 600, se cambiará de tamaño a 100 × 200. Puede elegir “recortar” las imágenes, forzándolas a tener el tamaño especificado en la configuración, independientemente de la imagen sin procesar que cargue para que se recorten en lugar de distorsionarse a gran escala.

Si cambia la configuración después cargando imágenes de productos, debe volver a generar las miniaturas en WordPress para que los cambios surtan efecto. Para hacer esto, recomiendo usar el complemento Regenerar miniaturas.

Encuentra el tamaño de la imagen del producto en la configuración del tema.

El tema que ha elegido para su tienda debe tener claramente el tamaño máximo de una imagen en su configuración, por lo que necesita saber los tamaños en los que se reproduce para configurar los de WooCommerce.

Imágenes del catálogo

Determine dónde muestra su tema las imágenes del catálogo. En algunos casos, esta es la página de la tienda.

Con las herramientas para desarrolladores habilitadas en su navegador, puede hacer clic con el botón derecho en la imagen y seleccionar “inspeccionado” o “Inspeccione el artículo”. Esto te dirá el tamaño de la imagen. Tenga en cuenta esto porque necesitamos usarlos más tarde.

Imágenes del catálogo
Imágenes del catálogo

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

La imagen de un solo producto

Repita el proceso para la imagen de producto única: la imagen más grande en una página de producto.

La imagen de un solo producto
La imagen de un solo producto

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

Miniatura del producto

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

Miniatura del producto
Miniatura del producto

En el tema Escaparate, la miniatura del producto es de 43 x 43 px.

Ajustar el tamaño de la imagen y regenerar las miniaturas

Ahora que se conocen todos los tamaños de imagen en miniatura para nuestro tema específico, podemos agregar estos nuevos tamaños a WooCommerce para asegurarnos de que los tamaños de imagen futuros sean de este tamaño o más grandes y solo tenemos el problema de las imágenes borrosas.

En el WooCommerce> ajustes> Productos> Pantalla, asegúrese de que el tamaño máximo de la imagen sea al menos tan grande como el tamaño de su tema para estas miniaturas. Luego Guarda tus cambios.

Cualquier nueva imagen de producto que se cargue ahora tendrá miniaturas en esta configuración y debería aparecer sin distorsión o desenfoque para que se resuelva el problema de la imagen borrosa.

Nota:
Guardar cambios no actualiza automáticamente todas las imágenes de productos cargadas anteriormente. Para actualizar imágenes antiguas, WordPress necesita regenerar las miniaturas. Con la ayuda del plugin mencionado me levantaste Regenerar miniaturas puedes hacer esto fácilmente.

Soporte de retina

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

Pero tenga cuidado, esto puede afectar el rendimiento, ya que las imágenes más grandes requieren más tiempo para cargarse. Esta es una preferencia personal y debe consultar sus pruebas antes de tomar una decisión. Tus estadísticas deberían decirte qué dispositivos y tamaños de pantalla usan la mayoría de los clientes. Si aún tiene preguntas sobre imágenes borrosas, no dude en publicarlas a continuación en la sección de comentarios o utilice el enlace que se encuentra debajo del texto.

Compartir con tus amigos:

Deja un comentario