InicioHelpPreparar correctamente las imágenes de los productos

Preparar correctamente las imágenes de los productos

Las imágenes de los productos son uno de los elementos esenciales a la hora de darle un aspecto profesional a nuestra web. En esta guía te explicamos como prepararlas para que se vean correctamente en los resultados de la búsqueda del selector de Mybooking.


Las imágenes que aparecen en la página Seleccionar producto cuando el usuario ha escogido unas fechas en el selector, se cargan desde el panel de administración una vez que el plugin Mybooking Reservation Engine esta activado y correctamente configurado.

Para las imágenes usadas en los Extras que aparecen en el paso Completar reserva, usaremos el mismo criterio y tratamiento, lo cual dará consistencia y facilitará la gestión de las imágenes.

Prepara las imágenes

Es muy importante ajustar las imágenes antes de cargarlas en el Inventario de nuestro panel de gestión para evitar sorpresas y asegurarnos que se visualizarán adecuadamente en nuestro sitio web.

Estas deben tener las mismas proporciones, peso de archivo, fondo y formato para que se visualicen de forma consistente y que no rompan nuestro diseño.

Formato de archivo

Recomendamos usar el formato .png puesto que nos permitirá crear un fondo transparente y así tendremos mayor flexibilidad a la hora de trabajar con fondos coloreados. Más adelante explicamos porqué.

Fondo de la imagen

Eliminar el fondo es muy útil cuando el producto que mostramos es un elemento aislado, como un vehículo o un extra. Si examinamos cualquier tienda online conocida observaremos que así se presentan los productos y es por una razón muy sencilla; el producto destaca más y ayudamos a evitar distracciones.

El fondo de una imagen se puede eliminar utilizando un programa de edición como GIMP o Photoshop. También existen herramientas online gratuitas como esta, que hacen el proceso automáticamente y de forma muy sencilla.

Si el producto no puede separarse del fondo como en el caso del interior de un alojamiento o por alguna razón el fondo transmite información importante, podemos obviar este paso y solo será necesario igualar el peso, las proporciones y el formato de archivo.

Peso del archivo

El peso del archivo se refiere a su tamaño en kilobytes (kB). Este punto es muy importante pues si utilizamos imágenes muy pesadas la página tardará más en cargar y eso impactará negativamente en la experiencia de nuestros usuario y, sobre todo, en el posicionamiento en buscadores.

El peso ideal para una imagen de producto está en torno a los 50kB, dependiendo de las características de esta. Aunque es posible superar ese valor debemos tener en cuenta no solo el peso de estas, sino también el número de imágenes que se cargarán en cada página. En todo caso la regla de oro es que menos es más. Evita usar imágenes tomadas con un smartphone sin antes reducirlas, pues los ajustes por defecto suelen generar imágenes de gran peso

Existen numerosas herramientas gratuitas, tanto online como en forma de aplicación de escritorio que te ayudarán en el proceso si no sabes como hacerlo de forma manual.

Proporciones

Cuando hablamos de las proporciones de una imagen nos referimos a la relación entre su altura y su anchura. Estas pueden ser verticales, cuando la altura es mayor que la anchura, horizontales, cuando la altura es menor que la anchura o cuadrada, cuando los dos valores son iguales.

image-aspect-ratios

Recomendamos usar una proporción horizontal de 800x600px para las imágenes de los productos. Por nuestra experiencia esta es la que mejores resultados ofrece en la mayoría de casos, aunque es posible usar una proporción 1:1 (cuadrada) en determinadas circustancias.

Las proporciones verticales pueden hacer que el contenido sea más difícil de visualizar, especialmente en dispositivos móviles, por lo que desaconsejamos esta opción aunque siempre va a depender de las características del producto y los requerimiento de nuestro negocio.

En cualquier caso lo más importante es que todas las imágenes tengan las mismas proporciones.

Conclusiones

El correcto tratamiento de las imágenes es imprescindible si queremos que nuestro sitio web tenga un aspecto profesional y un desempeño adecuado pues una mala experiencia del usuario tiene un impacto directo en la confianza de nuestros clientes y en el posicionamiento de nuestro negocio.

La preparación de imágenes es un trabajo tedioso y delicado, y para una persona con poca o ninguna experiencia en diseño gráfico puede ser confuso y consumir mucho tiempo. Por estas razones recomendamos que en este caso contrates los servicios de una persona profesional que te ayude a prepararlas y te guie en el proceso. No es un gasto sino una inversión.


Arriba