Tamaños y formatos adecuados de las fotos en una tienda PrestaShop

logo-prestashop

Compartir el post

¿Conoces cuáles son los tamaños y formatos de imágenes de la plantilla por defecto de una Web en PrestaShop?

Nuestro primer impulso cuando tenemos un teléfono móvil nuevo suele ser personalizarlo, añadir una imagen que nos gusta al fondo de pantalla o cambiarle los iconos de la página de inicio.

Y lo mismo sucede cuando nos planteamos cómo crear una tienda online a través de un theme predefinido: queremos personalizarla, ¿verdad? 

Lo primero que estamos deseando en esos primero momentos de nuestra creación es que refleje la imagen de marca de nuestro negocio, por eso subimos nuestro logotipo o las imágenes de nuestros productos.

Por ello, si acabas de instalar tu eCommerce PrestaShop a tu hosting Web, para ayudarte a personalizar tu página de inicio PrestaShop más rápido, en el post de hoy te presento los formatos y tamaños de imágenes que necesitas para personalizar tu plantilla predeterminada.

¡Vamos con ellos!

¿Qué tamaños y formatos de imágenes necesito para personalizar mi plantilla por defecto de PrestaShop?

La mayoría de las fotos que cargues en el backoffice tendrán que estar en formato de archivo .jpeg o .png.

Este sería el primer requisito básico.

Bloque de banner

Si tu programa de edición de imágenes no te permite guardarlas en estos formatos, trata de importarlas a uno de estos tipos de archivo.

El bloque de banner es uno de los primeros elementos que verás en tu nueva tienda online.

Se muestra en la parte superior de tu página web, así que tiene una gran visibilidad. Utiliza esta zona para anunciar las promociones importantes y que no se las pierdan tus clientes.

Tamaño recomendado: 1110 x 214 píxeles

Logotipo

Una de las imágenes más importantes de tu página Web es tu logotipo.

El tamaño de esta imagen puede variar ligeramente según el diseño de cada logotipo. La anchura máxima que permite el tema predeterminado de PrestaShop es 160 píxeles.

La altura recomendada para esta zona es 40 píxeles; pero el tema puede adaptarse a una altura de hasta 65 píxeles. Las imágenes de más de 40 píxeles no se reducirán, lo cual puede distorsionar el tema por defecto.

Tamaño recomendado: no mayor de 200 x 40 píxeles.

Slider de imágenes para tu página de inicio

El slider de la página de inicio es probablemente el segundo elemento que todo usuario ve de tu tienda.

Realmente, de cara al SEO no es demasiado recomendable usarlas, debido en parte a que ralentizan la Web y, por tanto, la velocidad de carga será probablemente superior a los 3 segundos de máximo que normalmente se establecen para asumir en una página es «lenta».

Pero entresus aspectos más positivos, cabe destacar que esas imágenes tan grandes y atractivas no sólo son llamativas, sino que además se mueven, lo cual capta la atención del usuario.

El pase de imágenes muestra por defecto 3 fotos; te recomiendo que pongas de media entre 3 y 5 imágenes, y no más de 7.

Como consejo SEO, cabe destacar que puedes añadir texto directamente en la imagen, pero los motores de búsqueda no podrán leerlo.

Para mejorar tu posicionamiento orgánico, te recomiendo que utilices la función de superposición de texto incorporada.

No olvides dar formato y destacar el texto importante con la herramienta de formato de encabezados.

Además, si quieres seguir utilizando el texto blanco, asegúrate de que la imagen es oscura para que sea fácil de leer.

Tamaño recomendado: 1110 x 340 píxeles

¿Cómo deben ser las fotos e imágenes de productos que subamos a nuestra Web?

La imagen predeterminada del producto se utilizará en toda tu tienda online en distintos tamaños.

Por ejemplo, las fotos de la página de producto serán más grandes para resaltar el producto, pero serán más pequeñas en el resumen que se muestra antes de pagar, ya que ahí se usan sólo a modo de referencia.

Pero no te preocupes: sólo tienes que cargar la imagen una vez, cuando configures el producto. El software PrestaShop cambiará automáticamente el tamaño de las imágenes con el tema por defecto.

Tamaño recomendado: 800 x 800 píxeles

Marca de agua

Añade automáticamente tu logotipo corporativo a las imágenes de tus productos para que, si otros los utilizan, no se lleven todo el mérito.

A diferencia de todas las demás fotos con las que hemos trabajado hasta ahora, ésta tendrás que guardarla en formato .gif.

Puedes hacer esta marca de agua del tamaño que quieras, pero asegúrate de que no reste valor a tus productos.

¿Quieres un truco? Si quieres una marca de agua sombreada, configura la opacidad directamente con el módulo incorporado.

También podrás elegir dónde quieres poner la marca de agua con el módulo incluido.

Tamaño recomendado: Cualquiera

Formato recomendado: .gif

Favicon

Si este icono no te resulta familiar, probablemente es porque todavía no has actualizado tu favicon para reflejar tu página web.

Se encuentra a la izquierda del título de tu página web y aparece antes de cada URL de tu tienda online.

Hay muchos generadores de favicones que pueden ayudarte a transformar tu logotipo.

Asegúrate de guardar la imagen final con el formato de archivo .ico.

Si tienes un logotipo muy complicado, puedes utilizar otra imagen que represente tu tienda online.

Tamaño recomendado: 16 x 16 píxeles o 32 x 32 píxeles

Formato recomendado: .ico

Actualiza esta característica en la pestaña: Preferencias > Temas > Iconos > Favicon

Conclusiones

Una vez que sepas cuáles son las distintas imágenes que necesitas para tu tienda online, utiliza esta «chuleta» para saber el tamaño que tienes que darles.

Nombre de Back OfficeTamaño recomendadoTipo de archivo
Bloque de banner1110 x 214 píxeles.jpeg, .png
Logotipo200 x 40 píxeles.jpeg, .png
Slider de imágenes para página de inicio1110 x 340 píxeles.jpeg, .png
Imagen de producto800 x 800 píxeles.jpeg, .png
Marca de aguaCualquiera (hemos utilizado 76×76).gif
Favicon16 x 16 píxeles o 32 x 32.ico

¿Qué imágenes quieres actualizar en tu página web?

Si quieres personalizar a tu gusto tu eCommerce, no dudes en seguir este listado de consejos para establecer los formatos y tamaños de imágenes más correctos para tu plantilla.

Sigue siempre las tonalidades de tu paleta de colores corporativa y cuida bien de que las fotos sean lo más fehacientes posible. Eso dará aún más profesionalidad a tu trabajo y podrás convencer y fidelizar a tu público.

Imagen principal By Freepik.

Fuente: prestashop.com.

¿Quiere impulsar su negocio?

escríbanos y nos pondremos en contacto con Ud.

× ¿Alguna duda?