Consejos de optimización de imágenes para que aumentes tu conversión #eCommerce

6 diciembre 2017
Categoría:
Ecommerce
Comentarios:  0

Las imágenes son una pieza clave de la conversión de una tienda online, tanto por cómo las fotografías pueden ayudarnos a convencer a los usuarios que compren los productos que ofrecemos como por la relación entre el tiempo de carga de las imágenes y la conversión de un ecommerce.

Para conseguir una buena conversión en relación a las imágenes, debemos ser capaces de ofrecer la mejor calidad posible pero utilizando recursos gráficos con el menor peso posible, para que no se incrementen demasiado los tiempos de carga.

No existen recetas que podamos aplicar siempre, ya que en función del producto que vendamos necesitaremos ofrecer mayor o menor calidad en las imágenes, pero si que disponemos de una serie de trucos, consejos, y mejores prácticas para tratar de optimizar lo mejor posible las imágenes en base a la calidad que necesitemos ofrecer, y en este artículo nos centraremos en estas técnicas generales que podemos aplicar en la mayoría de las ocasiones.

Formatos de Imágen

Utilices el software de procesado de imágenes que utilices, siempre tienes a tu disposición varios formatos de imagen a los que puedes exportar. Si lo que quieres es una imagen animada, tienes menos opciones (o un GIF animado o bien utilizar HTML5 para poder ofrecer fotografías 360º interactivas). Pero si lo que vas a generar son imágenes estáticas, los mejores formatos de imagen para exportar son los siguientes:

  • PNG: Mejor para fotografías con fondo transparente o bien imágenes que tengan que ser verse con trazos muy suaves
  • JPG: Adecuado para imágenes complejas o muy grandes, por su mayor capacidad de compresión
  • SVG: Adecuado para imágenes vectoriales, ya que permite comprimir este tipo de contenidos que luego escalan muy bien sin aumentar el tamaño de la imagen

Cuando exportas desde tu programa de procesado de imágenes a estos formatos, sueles tener distintos parámetros de exportación que nos permiten reducir el tamaño de las imágenes y también determinar la calidad del resultado final.

Por ejemplo, cuando exportamos en JPG, debemos elegir el nivel de calidad, siendo los niveles de entre 65 y 70 unos niveles que suelen mantener una buena calidad con un relativo bajo peso. Sea como sea, puedes hacer un proceso de prueba y error para determinar el mejor nivel de compresión y calidad para tus necesidades.

Sirve las imágenes desde una CDN

La optimización de las imágenes es solo una pieza de todo el proceso, y hay veces que la carga de imágenes no optimizadas puede ser más rápida que la carga de imágenes optimizadas en función del lugar desde donde se sirvan las imágenes.

Por eso es conveniente que, además de optimizar las imágenes, las sirvamos desde algún sitio que sea suficientemente rápido como para que esa optimización se note por parte de los usuarios que cargan las imágenes en sus navegadores, y aquí llegamos a las CDN.

Una CDN es un sistema de Content Delivery Network (red de distribución de contenidos), y que permite enviar las imágenes y otros recursos estáticos (vídeos, iconos, ficheros de estilo…) de una forma mucho más rápida que si la servimos desde nuestro servidor web.

Esto es posible porque una CDN se compone de muchos servidores distribuidos en distintas partes del mundo y es capaz de servir estos recursos desde la localización más cercana (físicamente) al usuario que está viendo tu página web. Así pues, si accedes a tu tienda online desde Madrid, las imágenes se descargarán desde el nodo de la CDN más cercano (con suerte desde el propio Madrid), pero si estás accediendo desde Estados Unidos, las imágenes se descargarán desde algún nodo que se encuentra físicamente en los Estados Unidos, reduciendo drásticamente el tiempo de descarga por encontrarse físicamente mucho más cerca.

Existen múltiples proveedores de CDN. Por ejemplo, el blog de Fotografía Ecommerce sirve las imágenes desde Amazon Cloudfront, la CDN de AWS.

Herramientas de optimización de imágenes

Si no somos muy duchos en Photoshop o alguna herramienta de procesamiento de imágenes, o si queremos llevar la optimización de nuestras imágenes al siguiente nivel, podemos utilizar algunas herramientas de optimización de imágenes que nos pueden ayudar mucho en este proceso. Existen multitud de opciones, pero aquí os recomendamos algunas que funcionan muy bien y son gratuitas.

Compressor.io

Compressor.io es una herramienta que optimiza automáticamente tus imágenes, sean del formato que sean ya que soporta los principales formatos de imágenes para web: JPG/PNG/GIF/SVG.

TinyPNG

TinyPNG te permite subir tus ficheros PNG o JPEG y se encarga de procesarlos de forma automática y descargar los resultados. Solo permite subir 20 imágenes del tirón, por lo que si tienes que procesar muchas imágenes puedes tardar un buen rato. Ahora bien, también existe un plugin para Photoshop que cuesta unos 50$.

WebP

WebP no es una herramienta de optimización de imágenes al uso, si no un formato de imágenes creado por Google y que ofrece una gran calidad de imágenes pero con un peso muy reducido. Puedes utilizar WebP para convertir tus imágenes a este formato de forma “manual” o bien configurarlo para que sea tu propio servidor web el que convierta las imágenes gracias al módulo Pagespeed de Google para Apache, Nginx y otros servidores web.

Conclusiones

Como hemos visto, tenemos una serie de herramientas y técnicas que nos permiten optimizar el tamaño de nuestras imágenes para que su descarga sea más rápida, pero sin renunciar a ofrecer la calidad necesaria para convencer a nuestros usuarios que compren los productos que ofrecemos.

El tema de la optimización de imágenes es algo más complejo, por lo que nos dejamos para próximos artículos algunos consejos adicionales que tienen que ver con aspectos más profundos como el espacio de color, colores fluor y algunos otros elementos que añaden complejidad al proceso en situaciones puntuales.

Opt In Image
Aumenta las ventas de tu tienda online
Con las mejores fotografías de producto o 360º

Somos fotógrafos especializados en Comercio Electrónico y te ayudamos a disponer de las mejores fotografías de producto o 360º para tu tienda online. ¡Consúltanos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *