Imágenes borrosas

[Fabrizio4]

Hola a todos,

Estoy subiendo todas las fotos de producto y de la página de Inicio de Shopify.

Con algunas fotos que subo tengo el problema que se me ven borrosas/pixeladas, a pesar de que la calidad de la foto es alta y está dentro de los límites de Shopify. Estoy usando el tema BE YOURS.

He intentado de todo, pero esto no cambia.

A alguien le ha pasado algo parecido?

Gracias

Fabrizio

[Teo]

Hola, @Fabrizio4:

Muchas gracias por escribirnos. Entiendo por tu mensaje que estás subiendo imágenes para tus productos y la página de inicio de tu tienda. Sin embargo, algunas de estas imágenes se muestran borrosas, ¿no es así? Estaré encantado de poder ayudar y arrojar algo de luz sobre esta cuestión.

A modo de contexto, como sabrás, para agilizar el tiempo de carga, Shopify comprime automáticamente las imágenes cuando se muestran en tu tienda online. Comprimir una imagen significa reducir su tamaño de archivo para que las páginas se carguen más rápido. Dicho esto, las imágenes de productos pueden ser de cualquier tamaño hasta 20 megapíxeles. Además, el tamaño del archivo debe ser inferior a 20 MB. Te dejo un par de enlace con más información al respecto:

• Subir imágenes en Shopify.
• Elementos multimedia de productos.

Dicho esto, cada tema en Shopify tienes sus propias especificaciones en cuanto a la carga de imágenes. Con todo, también es importante tener en cuenta que una de las principales ventajas de utilizar Shopify es que siempre puedes integrar tu cuenta con una aplicación a terceros de nuestra tienda de aplicaciones para extender las funcionalidades de tu propia tienda.

Existen varias aplicaciones para optimizar las imágenes que subes a tu tienda y que puedes ayudar a resolver este problema de las imágenes borrosas. A continuación te dejo un par de ejemplos de este tipo de aplicaciones para que puedas echarles un vistazo y ver si se adaptan a lo que buscas:

• Image Optimizer
• FREE - Image Optimizer
• Image Optimize MyShopKit

Al tratarse de aplicaciones desarrolladas por proveedores externos ajenos a Shopify, si tienes cualquier cuestión o consulta con respecto a su funcionamiento, lo ideal sería contactar con sus desarrolladores. Desde la página de la aplicación encontrarás una sección de soporte.

Si el problema persiste tras haber considerado las especificaciones de subida de imágenes de Shopify y haber usado alguna de las aplicaciones de optimización, te recomendaría contactar con los desarrolladores del tema para que puedan ofrecerte los siguientes pasos a seguir para poder solucionar esto. Cabe mencionar que el tema Be Yours también ha sido desarrollador por un proveedor externo (RoarTheme) que ha usado un código que cae fuera del control de Shopify.

En el siguiente enlace encontrarás más información sobre dónde encontrar ayuda para tu tema. En este artículo se especifica la forma de contactar con los desarrolladores del tema paso a paso. Con todo, para facilitar las cosas, te dejo un enlace a la documentación de RoarTheme y su página de soporte. Recuerda que si el desarrollador no responde tu consulta, puedes escribir directamente al equipo de soporte de Shopify para intermediar con el propio desarrollador.

Mientras tanto, me pregunto cómo está siendo tu experiencia con Shopify hasta el momento. Dime, ¿has podido configurar el resto de opciones de tus productos además de las imágenes tal y como deseabas? ¿Qué objetivos a corto y largo plazo te gustaría conseguir con Shopify y tu negocio?

[Suheil]

Me pasa lo mismo pero con el tema Sawn. Mis im'genes se ven bien del celular pero de la computadora bien borrosas.

[Teo · Accepted solution]

Hola, @Suheil:

Gracias por la respuesta. Entiendo que estás usando el tema Dawn en tu tienda de Shopify. Con todo, las imágenes de la página web se ven borrosas en los ordenadores. Sin embargo, estas se visualizan correctamente en los dispositivos móviles, ¿no es así? Estaré encantado de ayudar.

Antes de nada, como habrás podido revisar en el mensaje anterior; Shopify comprime automáticamente el tamaño de archivo de las imágenes de tu tienda cuando se accede a la misma para acelerar el proceso de carga. Como comento, las imágenes de productos pueden ser de cualquier tamaño hasta 20 megapíxeles. Además, el tamaño del archivo debe ser inferior a 20 MB. Dime, ¿podrías confirmarme si la imágenes de tu tienda cumplen con este requisito?

Si es así, otra cuestión que puede estar afectando a la visualización de las imágenes es que estas sean demasiado pequeñas. Para facilitar las cosas, te dejo una guía de tamaños recomendados de imágenes para el tema Dawn de Shopify. Este artículo pertenece a la plataforma de TinyIMG que son expertos en el ámbito de optimización de imágenes y SEO para las tiendas que se han creado a través de la plataforma de Shopify. Con todo, te dejo también estos tamaños a continuación:

• Imágenes de productos: 700 x 700 px
• Imágenes de colección: 550 x 550 px
• Imágenes de diapositivas: 1600 x 1050 px
• Imágenes de blog: 720 x 1080 px

Dime, ¿podrías también confirmarme si las imágenes están cumpliendo con estos tamaños recomendados? En caso de que así sea y todavía se muestren de forma borrosa; para aislar el problema, te recomendaría instalar un tema gratuito de Shopify y publicarlo de manera temporal para ver si las imágenes de la tienda cargan correctamente en un ordenador. Para publicar el tema, una vez instalado, puedes hacer clic en Acciones > Publicar . No hay de qué preocuparse, una vez hecha esta comprobación, podrás volver a publicar tu tema actual siguiendo los mismos pasos.

Si tras hacer esta comprobación, el problema persiste; sería de gran ayuda que compartieses conmigo la URL de tu tienda para poder echarle un vistazo desde aquí. Además, también te agradecería que me facilitates una captura de pantalla de cómo se muestran las imágenes tanto en la versión de ordenador, como en la versión de móvil. De esta forma, podré investigar con más detenimiento los motivos por los cuales esto está sucediendo con la página de tu tienda.

Por otra parte, ¿has podido configurar los productos de tu tienda y el diseño de la página web de la manera que deseabas? Si es así, ¿estás planeando desarrollar una estrategia o plan de marketing de cara al próximo Black Friday Ciber Monday? ¿Qué objetivos quieres conseguir?

[Suheil]

Saludos, en efecto mis imágenes son más pixeles que los recomendados. Mi url es seunmaestrocool.com . Le envío una foto de como se ven en la computadora.

Sin embargo son las de los productos nada más, las demás están bien y están hechas en el mismo lugar Canvas , con buenos pixeles.

[Teo]

Hola, @Suheil:

Muchas gracias por la respuesta y por compartir conmigo la URL de la tienda y una captura de pantalla de como se ven los productos actualmente en tu tienda. Esta información ha sido de gran ayudar para investigar y determinar lo que está ocurriendo con las imágenes de los productos.

Antes de nada, cabe mencionar que he podido determinar que la visualización borrosa solo se aprecia en la imágenes de la colección de la pagina de inicio y no en las imágenes de los productos como tal. Esto es, si accedes a la página del producto, la imagen se ve correctamente.

Dicho esto, en los temas de Shopify de la versión de Online Store 2.0 es posible que las imágenes se vean borrosas cuando creas una sección para mostrar varios productos o una colección con menos de cuatro columnas. Para comprobar si este es el motivo principal por el cual las imágenes de dichos productos se ven borrosas, te recomendaría seguir los siguientes pasos en tu tienda:

1. Dirígete a la sección Tienda online > Temas.
2. En tu tema, haz clic en Personalizar.
3. En la pantalla de inicio, localiza la colección de productos.
4. Selecciona dicha colección.
5. Establece el Numero de columnas a 4 o más.
6. Guarda la configuración.

Una vez que hayas seguido estos pasos, ¿podrías confirmarme si las imágenes se muestran correctamente en la página de inicio de tu tienda? Si es así, me alegra informarte de que existen dos posible soluciones. Por una parte, puedes optar por dejar la configuración de las columnas de la colección de producto en 4 o más. De esta forma, la imágenes no se verán borrosas.

Por otra parte, si deseas tener solamente 2 columnas de productos; en Shopify contamos con un equipo de especialistas en temas que pueden llevar a cabo ciertas modificaciones en este por ti. En este caso, me alegra informarte de que podrán aplicar una modificación a tu tema para que las imágenes no se vean borrosas cuando estableces estas dos columnas. Para ello, tendrás que iniciar sesión en tu tienda y contactar con nuestro equipo de soporte para solicitar esta modificación.

Mientras tanto, he estado echando un vistazo a la tienda y permíteme felicitarte por la configuración. Esta tiene un diseño bastante profesional. Con todo, me he percatado de que no hay una página "sobre nosotros". Esta suele ser la primera impresión que tendrán tus clientes, ya que casi todo el mundo la visita antes de hacer un pedido. Si te interesa, te dejo un enlace con consejos para crear la página "sobre nosotros. Dicho esto, ¿cómo va el resto de cuestiones con tu tienda?