Optimizar imágenes de productos

Por Felipe

Publicado en:

Cuando están navegando por internet, los usuarios abandonan una página web si esta tarda mucho tiempo en cargar, buscando otra alternativa a su búsqueda. En el caso de una tienda online, este abandono puede considerarse casi como una pérdida de venta, por lo que es inaceptable que sus tiempos de carga sean excesivos.

En una tienda online el mayor peso de carga lo dan las imágenes de productos. Para poder ofrecer un producto atractivo que informe al visitante de todas sus características, se suelen incluir múltiples imágenes de gran calidad, que muestran el producto desde distintos puntos de vista. Todas estas fotos generan un tiempo de carga que hay que optimizar para impedir que el e-commerce tarde en cargar.

Cómo optimizar imágenes

El reto de los diseñadores web es conseguir incluir las imágenes de una página web o tienda virtual, ofreciendo la máxima calidad sin que influya en la velocidad de carga de forma ostensible.

Hay dos formas sencillas para disminuir el peso (tamaño de una foto en Kb), reducir sus dimensiones y utilizar un método de compresión adecuado.

Reducir sus dimensiones

Las dimensiones o resolución de las imágenes de productos influyen en su peso. Utilizando una herramienta de edición gráfica (de pago como Photoshop o gratuita como Paint.net) es muy sencillo redimensionar las imágenes para disminuir sus dimensiones y su tamaño en kilobytes.

Las imágenes de productos dentro de una tienda online se muestran de distintas formas, como miniaturas, en previsualización y la imagen en sus dimensiones reales. Si la imagen se escala con código CSS, a pesar de mostrarla en un tamaño más pequeño, como en la miniatura, se estaría cargando toda la imagen. Por eso es interesante cambiar las dimensiones de la imagen dependiendo de dónde se muestran.

Utilizar formatos de imagen comprimidos

Existen múltiples formatos de imágenes, utilizando muchos de ellos sistemas de compresión que reducen su tamaño (a costa de perder más o menos calidad). Utilizar el formato apropiado es fundamental para conseguir reducir su tamaño.

  • Imágenes con transparencias. Para las imágenes con transparencias, la mejor opción es utilizar el formato PNG, ya que respeta la capa de transparencia y comprime la imagen con muy poca pérdida. Para animaciones es mejor utilizar el formato GIF ya respeta la transparencia y  solo utiliza 256 colores, reduciendo mucho su peso.
  • Imágenes sin transparencias. Para imágenes sin transparencias el mejor formato es el JPG, ya que permite ajustar el grado de compresión y calidad, pudiendo encontrar el equilibrio deseado.

Con el uso de una herramienta de edición gráfica es fácil convertir una imagen al formato deseado.

Dónde conseguir imágenes de libre uso

Los derechos de autor deben tenerse muy en cuenta a la hora de incluir una imagen en una página web, para no infringir derechos de copyright que puedan traducirse en problemas. Afortunadamente existen múltiples plataformas online donde obtener imágenes que son de libre difusión y que pueden ser utilizadas sin preocuparse de infringir ningún derecho de autor. Dentro de esos sitios web podemos destacar

 

Cambiar el tamaño de una imagen y comprimirla utilizando el formato adecuado son las dos principales acciones que se pueden realizar para disminuir los tiempos de carga de una página web o e-commerce. De esta forma, lograremos que nuestro sitio cargue rápido y los usuarios tendrán una experiencia óptima al navegar por él.