Background

BLOG PIXELZ

Adéntrate en el eCommerce, la fotografía de producto y la edición de imágenes y descubre las mejores recomendaciones para tu negocio.

Optimiza tus Imágenes para Móviles usando un Diseño Responsive en tu Tienda


Main Image
¿Alguna vez has navegado con tu smartphone o tablet y te has sentido frustrado debido a que tenías que hacer acercamientos con el zoom cada cierto tiempo para acceder a información?

Ejemplo de una tienda online sin optimización ni diseño responsive.

Ejemplo de una tienda online sin optimización ni diseño responsive.

Buscar en una tienda online que no ha sido optimizada para móviles brinda una muy experiencia muy pobre al usuario, especialmente para comprar. Es posible que hayas abandonado la web al poco tiempo de entrar y no te culpamos. La empresa ha hecho un estudio donde dice que hay un incremento de tasa de rebote de un 28% en usuarios que están acostumbrados a navegar en móviles en sitios que no están optimizados. Ahora todo el mundo usa el móvil o tablet para navegar. ¡Es inaudito no optimizar!

Ejemplo de un sitio web de eCommerce optimizado y con diseño responsive.

Ejemplo de un sitio web de eCommerce optimizado y con diseño responsive.

Existe una solución para optimizar sitios web para móviles: el diseño responsive. Un sitio responsive detecta el dispositivo con que se accede a el y se adapta al tamaño de la pantalla de este. De esa manera se cambia la forma, tamaño del texto e imágenes. Es el mismo contenido pero con una apariencia friendly para smartphones y tablests.

Cada micro empresario online debería tener una web responsive por dos simples razones:

1. El móvil ha arrasado. ¿Qué esperas para optimizar?

Ya en 2014 Shopify anunció que por primera vez se superó el número de usuarios de escritorio, por los de móvil. De acuerdo a datos de Shopify, de un total de 100.000 tiendas online que utilizan su plataforma, más del 50% del tráfico viene de móviles.

Responsive shopify

Sigue a las grandes marcas

En 2015, Nike anunció, que recibía por primera vez más tráfico de móviles que de usuarios de escritorio.

2. A Google le gustan los sitios responsive

Mejora tu ranking

El utilizar un diseño responsive en tu tienda online mejora tu ranking en los motores de búsqueda como Google. Este reconoce los beneficios de los sitios responsive entre los diferentes dispositivos, para que posicionen mejor.

¿Tienes una cuenta Google Shopping? Aprende como optimizar tus imágenes de producto en Google Shopping.

¿Qué significa un diseño responsive para las imágenes de producto?

Primero, miremos lo que sucede por defecto. Cuando utilizas diseño responsive, el mismo sitio web sirve para desplegar su información tanto para móviles como ordenadores de escritorio. Las dimensiones siguen siendo las mismas para las imágenes y esto hace que se deba de alejar o acercar con el zoom para ver todo el contenido. Puede ser que tener una imagen pesada ayude a ver detalles, pero hará que se haga muy lenta la experiencia para el usuario.

Mobile optimization and responsive websites infographic

Es muy importante el mostrar imágenes de calidad a los usuarios, pero teniendo en cuenta que el peso y el tamaño con que se despliegan debe ser el adecuado. Para realizar esta tarea puedes encontrar herramientas gratuitas inclusive.

1. Redimensionar imágenes con Adaptive Images

Una forma sencilla es utilizar Adaptive Images. Es un pequeño script PHP que detecta el tamaño de pantalla del usuario y redimensiona las imágenes para que se vean más amigables en el dispositivo. No es necesario crear tu mismo las nuevas imágenes, el sistema lo hace solo. Incluso puede lidiar con la alta resolución de las pantallas Retina displays. No te preocupes por su costo, ¡es gratis! Si usas WordPress, usa ImageMagick.

Pero no todo es un camino de rosas. Existen puntos negativos respecto a redimensionar tus imágenes con Adaptive Images.

Primero que todo, si utilizas una red CDN, no funcionará Adaptive Images. Esto generalmente afecta a minoristas grandes. Segundo, subir un script PHP y otros archivos durante la instalación puede ser un poco complicado para los que es la primera vez. Tercero, a veces la tarea del sistema de redimensionar imágenes para cada usuario puede hacer lenta la experiencia y descarga de imágenes. En ese caso, sería lo mejor el comprimir las imágenes.

2. Serving Different Images with Picturefill

Existe una herramienta para adaptar imágenes que tienen un recorte, una forma o algo distinto entre si. Se llama Picturefill y puede ser muy efectiva para optimizar imágenes para sitos responsive. Existen nuevos estándares web HTML que te guían como utilizar los diferentes tamaños de imágenes dependiendo del tamaño de la pantalla. Picturefill asegura que las imágenes se desplieguen correctamente aunque no se sigan estos estándares.

Workflow of responsive websites

Aprende como crear un proceso de producción eficiente para que puedas crear Actions con tu programa de edición de imágenes y producir imágenes para cada tamaño.

Picturefill permite un alto nivel de personalización, pero también toma tiempo su implementación. Necesitarás crear imágenes alternativas para todas las imágenes que desearías hacer responsive. Además el código HTML necesitará un ajuste. Este coste tendría que correr por tu cuenta.

Puedes tu encargarte de cambiar el tamaño de tus imágenes pero recuerda que esta labor toma tiempo. Te recomendamos por eso que consideres el externalizar este servicio a gente experta, como Pixelz.

Sin duda, el auge de los smartphones y demás dispositivos móviles ha cambiado la experiencia de los usuarios en Internet. Sé parte de esta nueva era.

¡Optimiza tus imágenes y a ganar nuevos clientes!