%20--%3e%3csvg%20version='1.1'%20id='Calque_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20173%2019'%20style='enable-background:new%200%200%20173%2019;'%20xml:space='preserve'%3e%3cpath%20d='M4.9,13.1h2.9c1.4,0,2.6-0.3,3.7-0.8S13.4,11,14,10s0.9-2.1,0.9-3.4S14.6,4.2,14,3.2c-0.6-1-1.4-1.7-2.5-2.3%20c-1.1-0.5-2.3-0.8-3.7-0.8H0v18.7h4.9V13.1z%20M4.9,4.2h2.5c0.8,0,1.4,0.2,1.9,0.7c0.5,0.4,0.7,1,0.7,1.8S9.7,8,9.3,8.4%20S8.2,9.1,7.4,9.1l0,0H4.9V4.2z'/%3e%3cpath%20d='M31.4,9.7c0.5-0.9,0.8-1.9,0.8-3c0-1.3-0.3-2.4-0.9-3.4S29.8,1.6,28.8,1l0,0c-1.1-0.5-2.3-0.8-3.8-0.8h-8v18.7h5v-5.8h2.6%20l2.8,5.8h5.4l-3.4-7C30.2,11.3,30.9,10.6,31.4,9.7z%20M26.4,8.4c-0.5,0.4-1.1,0.7-1.9,0.7l0,0H22V4.2h2.6c0.8,0,1.4,0.2,1.9,0.7%20c0.5,0.4,0.7,1,0.7,1.8S26.9,8,26.4,8.4z'/%3e%3cpolygon%20points='40,11.4%2046.4,11.4%2046.4,7.5%2040,7.5%2040,4.3%2048,4.3%2048,0.2%2035.1,0.2%2035.1,18.8%2048.3,18.8%2048.3,14.7%2040,14.7%20'/%3e%3cpath%20d='M64.6,16c0.7-0.9,1-2,1-3.1c0-1.2-0.3-2.1-0.8-2.9c-0.5-0.7-1.2-1.3-2-1.6C62,8,61,7.7,59.7,7.5C58.4,7.2,57.5,7,57,6.9%20c-0.6-0.2-1-0.3-1.2-0.5c-0.3-0.2-0.4-0.5-0.4-0.9c0-0.6,0.2-1,0.7-1.3c0.4-0.3,1-0.4,1.7-0.4c0.8,0,1.4,0.2,1.9,0.6%20s0.7,0.9,0.8,1.6h4.8c0-1.1-0.3-2.1-1-3.1c-0.6-0.9-1.5-1.6-2.7-2.1S59.1,0,57.7,0c-1.4,0-2.6,0.3-3.7,0.8c-1.1,0.5-2,1.2-2.6,2.1%20s-0.9,1.9-0.9,3c0,1.2,0.3,2.2,0.8,3c0.5,0.7,1.2,1.3,2,1.7s1.9,0.7,3.1,0.9c1.3,0.3,2.2,0.5,2.8,0.6c0.6,0.2,1,0.3,1.2,0.5%20c0.3,0.2,0.4,0.5,0.4,0.9c0,0.6-0.2,1-0.7,1.3s-1.1,0.5-1.9,0.5c-1,0-1.8-0.2-2.3-0.7l0,0c-0.6-0.5-0.9-1-0.9-1.8l-5-0.1%20c0,1.2,0.3,2.3,1,3.2c0.7,1,1.6,1.7,2.9,2.3c1.2,0.6,2.6,0.8,4.1,0.8c1.4,0,2.7-0.3,3.9-0.8C63.1,17.7,64,16.9,64.6,16z'/%3e%3cpolygon%20points='81.7,0.2%2066.6,0.2%2066.6,4.3%2071.7,4.3%2071.7,18.8%2076.6,18.8%2076.6,4.3%2081.7,4.3%20'/%3e%3cpath%20d='M86.7,0.2L80,18.9h5.1l1.1-3.5h6.5l1.2,3.5h5.3L92.7,0.2H86.7z%20M87.6,11.4l2-6.1l2,6.1H87.6z'/%3e%3cpath%20d='M114.4,16c0.7-0.9,1-2,1-3.1c0-1.2-0.3-2.1-0.8-2.9c-0.5-0.7-1.2-1.3-2-1.6s-1.9-0.7-3.2-0.9c-1.2-0.2-2.1-0.4-2.7-0.6%20s-1-0.3-1.2-0.5c-0.3-0.2-0.4-0.5-0.4-0.9c0-0.6,0.2-1,0.7-1.3c0.4-0.3,1-0.4,1.7-0.4c0.8,0,1.4,0.2,1.9,0.6s0.7,0.9,0.8,1.6h4.8%20c0-1.1-0.3-2.1-1-3.1c-0.6-0.9-1.5-1.6-2.7-2.1c-1.1-0.5-2.4-0.8-3.8-0.8s-2.6,0.3-3.7,0.8s-2,1.2-2.6,2.1s-0.9,1.9-0.9,3%20c0,1.2,0.3,2.2,0.8,3c0.5,0.7,1.2,1.3,2,1.7s1.9,0.7,3.1,0.9c1.3,0.3,2.2,0.5,2.8,0.6c0.6,0.2,1,0.3,1.2,0.5%20c0.3,0.2,0.4,0.5,0.4,0.9c0,0.6-0.2,1-0.7,1.3s-1.1,0.5-1.9,0.5c-1,0-1.8-0.2-2.3-0.7l0,0c-0.6-0.5-0.9-1-0.9-1.8l-4.8-0.1%20c0,1.2,0.3,2.3,1,3.2c0.7,1,1.6,1.7,2.9,2.3s2.6,0.8,4.1,0.8s2.7-0.3,3.9-0.8C112.8,17.7,113.7,16.9,114.4,16z'/%3e%3cpolygon%20points='129.1,7.3%20122.9,7.3%20122.9,0.2%20118,0.2%20118,18.8%20122.9,18.8%20122.9,11.5%20129.1,11.5%20129.1,18.8%20134,18.8%20134,0.2%20129.1,0.2%20'/%3e%3cpath%20d='M154.3,14.4c0.8-1.4,1.2-3.1,1.2-4.9s-0.4-3.4-1.2-4.9c-0.8-1.4-1.9-2.6-3.3-3.4c-1.5-0.8-3.1-1.2-5-1.2s-3.5,0.4-4.9,1.2%20s-2.5,2-3.3,3.4s-1.2,3.1-1.2,4.9s0.4,3.4,1.2,4.9c0.8,1.4,1.9,2.6,3.3,3.4c1.4,0.8,3.1,1.2,4.9,1.2c1.9,0,3.5-0.4,4.9-1.2%20C152.4,16.9,153.5,15.8,154.3,14.4z%20M149.3,13.4c-0.8,1-1.9,1.5-3.2,1.5s-2.4-0.5-3.2-1.5s-1.2-2.3-1.2-3.9s0.4-2.9,1.2-3.9%20s1.9-1.5,3.2-1.5s2.4,0.5,3.2,1.5s1.2,2.3,1.2,3.9S150.1,12.4,149.3,13.4z'/%3e%3cpath%20d='M169.6,1c-1.1-0.5-2.3-0.8-3.7-0.8H158v18.7h4.9v-5.8h2.9c1.4,0,2.6-0.3,3.7-0.8c1.1-0.5,1.9-1.3,2.5-2.3s0.9-2.1,0.9-3.4%20s-0.3-2.4-0.9-3.4S170.7,1.5,169.6,1z%20M167.3,8.4c-0.5,0.4-1.1,0.7-1.9,0.7l0,0H163V4.2h2.5c0.8,0,1.4,0.2,1.9,0.7%20c0.5,0.4,0.7,1,0.7,1.8S167.8,8,167.3,8.4z'/%3e%3c/svg%3e)
%20--%3e%3csvg%20version='1.1'%20id='Calque_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20173%2019'%20style='enable-background:new%200%200%20173%2019;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill:%23FFFFFF;}%20%3c/style%3e%3cpath%20class='st0'%20d='M4.9,13.1h2.9c1.4,0,2.6-0.3,3.7-0.8S13.4,11,14,10s0.9-2.1,0.9-3.4S14.6,4.2,14,3.2c-0.6-1-1.4-1.7-2.5-2.3%20c-1.1-0.5-2.3-0.8-3.7-0.8H0v18.7h4.9V13.1z%20M4.9,4.2h2.5c0.8,0,1.4,0.2,1.9,0.7c0.5,0.4,0.7,1,0.7,1.8S9.7,8,9.3,8.4%20S8.2,9.1,7.4,9.1l0,0H4.9V4.2z'/%3e%3cpath%20class='st0'%20d='M31.4,9.7c0.5-0.9,0.8-1.9,0.8-3c0-1.3-0.3-2.4-0.9-3.4S29.8,1.6,28.8,1l0,0c-1.1-0.5-2.3-0.8-3.8-0.8h-8v18.7%20h5v-5.8h2.6l2.8,5.8h5.4l-3.4-7C30.2,11.3,30.9,10.6,31.4,9.7z%20M26.4,8.4c-0.5,0.4-1.1,0.7-1.9,0.7l0,0H22V4.2h2.6%20c0.8,0,1.4,0.2,1.9,0.7c0.5,0.4,0.7,1,0.7,1.8S26.9,8,26.4,8.4z'/%3e%3cpolygon%20class='st0'%20points='40,11.4%2046.4,11.4%2046.4,7.5%2040,7.5%2040,4.3%2048,4.3%2048,0.2%2035.1,0.2%2035.1,18.8%2048.3,18.8%2048.3,14.7%2040,14.7%20'/%3e%3cpath%20class='st0'%20d='M64.6,16c0.7-0.9,1-2,1-3.1c0-1.2-0.3-2.1-0.8-2.9c-0.5-0.7-1.2-1.3-2-1.6C62,8,61,7.7,59.7,7.5%20C58.4,7.2,57.5,7,57,6.9c-0.6-0.2-1-0.3-1.2-0.5c-0.3-0.2-0.4-0.5-0.4-0.9c0-0.6,0.2-1,0.7-1.3c0.4-0.3,1-0.4,1.7-0.4%20c0.8,0,1.4,0.2,1.9,0.6s0.7,0.9,0.8,1.6h4.8c0-1.1-0.3-2.1-1-3.1c-0.6-0.9-1.5-1.6-2.7-2.1S59.1,0,57.7,0c-1.4,0-2.6,0.3-3.7,0.8%20c-1.1,0.5-2,1.2-2.6,2.1s-0.9,1.9-0.9,3c0,1.2,0.3,2.2,0.8,3c0.5,0.7,1.2,1.3,2,1.7s1.9,0.7,3.1,0.9c1.3,0.3,2.2,0.5,2.8,0.6%20c0.6,0.2,1,0.3,1.2,0.5c0.3,0.2,0.4,0.5,0.4,0.9c0,0.6-0.2,1-0.7,1.3s-1.1,0.5-1.9,0.5c-1,0-1.8-0.2-2.3-0.7l0,0%20c-0.6-0.5-0.9-1-0.9-1.8l-5-0.1c0,1.2,0.3,2.3,1,3.2c0.7,1,1.6,1.7,2.9,2.3c1.2,0.6,2.6,0.8,4.1,0.8c1.4,0,2.7-0.3,3.9-0.8%20C63.1,17.7,64,16.9,64.6,16z'/%3e%3cpolygon%20class='st0'%20points='81.7,0.2%2066.6,0.2%2066.6,4.3%2071.7,4.3%2071.7,18.8%2076.6,18.8%2076.6,4.3%2081.7,4.3%20'/%3e%3cpath%20class='st0'%20d='M86.7,0.2L80,18.9h5.1l1.1-3.5h6.5l1.2,3.5h5.3L92.7,0.2H86.7z%20M87.6,11.4l2-6.1l2,6.1H87.6z'/%3e%3cpath%20class='st0'%20d='M114.4,16c0.7-0.9,1-2,1-3.1c0-1.2-0.3-2.1-0.8-2.9c-0.5-0.7-1.2-1.3-2-1.6s-1.9-0.7-3.2-0.9%20c-1.2-0.2-2.1-0.4-2.7-0.6s-1-0.3-1.2-0.5c-0.3-0.2-0.4-0.5-0.4-0.9c0-0.6,0.2-1,0.7-1.3c0.4-0.3,1-0.4,1.7-0.4%20c0.8,0,1.4,0.2,1.9,0.6s0.7,0.9,0.8,1.6h4.8c0-1.1-0.3-2.1-1-3.1c-0.6-0.9-1.5-1.6-2.7-2.1c-1.1-0.5-2.4-0.8-3.8-0.8%20s-2.6,0.3-3.7,0.8s-2,1.2-2.6,2.1s-0.9,1.9-0.9,3c0,1.2,0.3,2.2,0.8,3c0.5,0.7,1.2,1.3,2,1.7s1.9,0.7,3.1,0.9%20c1.3,0.3,2.2,0.5,2.8,0.6c0.6,0.2,1,0.3,1.2,0.5c0.3,0.2,0.4,0.5,0.4,0.9c0,0.6-0.2,1-0.7,1.3s-1.1,0.5-1.9,0.5%20c-1,0-1.8-0.2-2.3-0.7l0,0c-0.6-0.5-0.9-1-0.9-1.8l-4.8-0.1c0,1.2,0.3,2.3,1,3.2c0.7,1,1.6,1.7,2.9,2.3s2.6,0.8,4.1,0.8%20s2.7-0.3,3.9-0.8C112.8,17.7,113.7,16.9,114.4,16z'/%3e%3cpolygon%20class='st0'%20points='129.1,7.3%20122.9,7.3%20122.9,0.2%20118,0.2%20118,18.8%20122.9,18.8%20122.9,11.5%20129.1,11.5%20129.1,18.8%20134,18.8%20134,0.2%20129.1,0.2%20'/%3e%3cpath%20class='st0'%20d='M154.3,14.4c0.8-1.4,1.2-3.1,1.2-4.9s-0.4-3.4-1.2-4.9c-0.8-1.4-1.9-2.6-3.3-3.4c-1.5-0.8-3.1-1.2-5-1.2%20s-3.5,0.4-4.9,1.2s-2.5,2-3.3,3.4s-1.2,3.1-1.2,4.9s0.4,3.4,1.2,4.9c0.8,1.4,1.9,2.6,3.3,3.4c1.4,0.8,3.1,1.2,4.9,1.2%20c1.9,0,3.5-0.4,4.9-1.2C152.4,16.9,153.5,15.8,154.3,14.4z%20M149.3,13.4c-0.8,1-1.9,1.5-3.2,1.5s-2.4-0.5-3.2-1.5s-1.2-2.3-1.2-3.9%20s0.4-2.9,1.2-3.9s1.9-1.5,3.2-1.5s2.4,0.5,3.2,1.5s1.2,2.3,1.2,3.9S150.1,12.4,149.3,13.4z'/%3e%3cpath%20class='st0'%20d='M169.6,1c-1.1-0.5-2.3-0.8-3.7-0.8H158v18.7h4.9v-5.8h2.9c1.4,0,2.6-0.3,3.7-0.8c1.1-0.5,1.9-1.3,2.5-2.3%20s0.9-2.1,0.9-3.4s-0.3-2.4-0.9-3.4S170.7,1.5,169.6,1z%20M167.3,8.4c-0.5,0.4-1.1,0.7-1.9,0.7l0,0H163V4.2h2.5c0.8,0,1.4,0.2,1.9,0.7%20c0.5,0.4,0.7,1,0.7,1.8S167.8,8,167.3,8.4z'/%3e%3c/svg%3e)
¿Cuáles son los tamaños y formatos por defecto de las fotos en una tienda PrestaShop?
¿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?
Como sabes, optimizar las imágenes de tu tienda online es muy importante para mejorar tu posicionamiento en los buscadores (sobre todo en Google).
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.
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.
» Bloque de banner
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 entre sus 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. En PrestaShop algunos módulos están más adaptados al respeto de las normas SEO como el Creative Slider, que te será útil si deseas personalizarlo al máximo.
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 favicons 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 > Favicono
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 Office | Tamaño recomendado | Tipo de archivo |
|---|---|---|
| Bloque de banner | 1110 x 214 píxeles | .jpeg, .png |
| Logotipo | 200 x 40 píxeles | .jpeg, .png |
| Slider de imágenes para página de inicio | 1110 x 340 píxeles | .jpeg, .png |
| Imagen de producto | 800 x 800 píxeles | .jpeg, .png |
| Marca de agua | Cualquiera (hemos utilizado 76x76) | .gif |
| Favicon | 16 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.
Y para acabar, aquí hay otros artículos que pueden interesarte:
- ¿Cómo reducir el tamaño y peso de las fotos de tu eCommerce?
- ¿Cuáles son los mejores bancos de fotos para tu tienda online?
- ¿Qué es el Atributo HTML alt en las imágenes y cómo beneficia al SEO de tu eCommerce?
Imagen principal By Freepik.
