Ir al contenido principal
Todas las coleccionesDiseño
Especificaciones de tamaño para las imágenes de los componentes de tu sitio web 📐
Especificaciones de tamaño para las imágenes de los componentes de tu sitio web 📐

Aquí tienes las dimensiones ideales para los componentes de tu sitio

Gabriela Plattner avatar
Escrito por Gabriela Plattner
Actualizado hace más de 4 meses

Hasta la mejor imagen puede verse como un desastre en las dimensiones incorrectas. Te facilitamos aquí las dimensiones sugeridas para las imágenes y los distintos componentes de tu sitio.

Recuerda que las imágenes deben pesar menos de 1 MB por imagen para que la velocidad de tu web sea óptima.


Componentes con imágenes

Estos componentes en su mayor parte son gráficas o imágenes con distintas opciones y atributos.

▪️ Hero

Es una imagen con un alto definido.

Utiliza una imagen lo más amplia posible. (Ej: 1920x1080 px)

▪️ Zona de despacho

La imagen de este componente es el pequeño marcador que aparece sobre el mapa.

Te recomendamos ocupar una imagen cuadrada de 1000x1000 px.

Puede ser un pin (📍) o una versión cuadrada y limpia de tu logo sin mucho texto. Ya que la imagen se ve pequeña y el texto no se notará.

▪️ Categorías

Este componente tiene enlazadas todas las categorías de tu local, solo debes seleccionar las que quieras mostrar y subir una foto representativa de esta.

Te recomendamos una imagen lo más amplia posible para que no se estire, el componente adaptará la imagen.

Puedes editar las columnas para desktop y mobile. También puedes elegir que el nombre de la categoría se vea dentro o afuera de la imagen.

▪️ Muestra de productos destacados

Podrás colocar una galería de tus productos. La imagen a mostrar es exactamente la misma que está cargada en la información de tus productos.

Las imágenes de productos son cuadradas de 1000x1000 px.

▪️ Empezar a ordenar

Perfecto para indicar los tipos de entrega disponibles. También acomoda la imagen automáticamente y mostrará el centro de esta. Por lo mismo, intenta ocupar una imagen equilibrada al centro.

Utiliza una imagen lo más amplia posible, puede ser de 1920x1080 px, el componente adaptará la imagen.

Recuerda que su apariencia puede variar al ajustarse a cada tipo de pantallas y dispositivos.

▪️ Slider

Lo conocemos también como carrusel de imágenes. No hay una medida exacta ya que puede variar según lo que se requiera. Siempre deben ser todas las imágenes del mismo tamaño, solo varía si es para desktop o mobile. Te dejamos 3 alternativas:

GRANDE

MEDIANO

PEQUEÑO

🖥️ Desktop

1600x750 px

1600x550 px

1600x300 px

📱 Mobile

800x800 px

800x600 px

800x400px

▪️ Imagen con mensaje

Es una imagen que puedes acompañar de un título y un párrafo.

La imagen puede ser cuadrada de 1000x1000 px o rectangular de 1000 px por hasta 1400 px (vertical u horizontal).

▪️ Solo una imagen

Tal como dicta el nombre es una imagen, nada más ni nada menos.

Puedes cargar la imagen para desktop de 1600px de ancho y hasta 2000px de alto. Y la de mobile de 800px de ancho y hasta 1600px de alto.

✌️ Un consejo Justo: utiliza este componente para crear un banner / cinta / huincha. Utiliza las medidas sugeridas del Slider para la imagen.

▪️ Imagen con mensaje completa

Es lo mismo que la imagen con mensaje, pero además puedes añadir un botón. Automáticamente deja la imagen centrada y cuadrada.

Lo ideal es que la imagen sea cuadrada de al menos de 800x800 px.

Si añades un párrafo grande de texto, la imagen se acomodará a este y cambiará su alto.

▪️ Locales

Añade una ficha de cada local junto a su dirección, número de teléfono, nombre e información adicional como horarios, correo electrónico, etc.

Cada ficha viene acompañada de una foto. Esta debe ser de 830x500 px.

Los locales se muestran en 4 columnas en desktop y 1 en mobile.

▪️ Formulario de contacto

Ingresa un formulario para que los clientes puedan contactarse contigo. Añade el mail al que llegarán los formularios, un título y un párrafo de texto.

Opcionalmente puedes añadir una imagen de 840x100 px.

Los campos a rellenar son nombre, mail y mensaje, no se pueden añadir o quitar campos de momento.

▪️ Múltiples textos con mensaje

Este componente te permite subir más de una imagen junto a un título y párrafo.

Puedes usar una imagen cuadrada de 800x800 px o rectangular de 1000 px por hasta 1400 px (vertical u horizontal).

Estás imágenes se irán intercalando de posición.

▪️ Galería

Para añadir todas las imágenes que quieras.

Deben ser cuadradas de 1000x1000 px.

Puedes añadirles un título y un párrafo de texto a cada una y editar el número de columnas para desktop y mobile.

▪️ Popup

Usa esta ventana emergente para dar mensajes cortos o dirigir a los visitantes a un link, puedes añadirle texto y una imagen opcional.

La imagen puede ser cuadrada de 1000x1000 px o rectangular de 1000 px por hasta 1400px (vertical u horizontal).


Otras imágenes

▪️ Banner

Añade tus gráficas al componente Slider o Solo una imagen!

Puedes utilizar cualquier medida ya que la plataforma adaptará la imagen.

Te dejamos las siguientes medidas en caso de que necesites:

Para desktop/web: 1600x500 px

Para mobile: 800x600 px

▪️ Imagen de ingreso

Cuando ingresas al sitio, tanto tus clientes como tus colaboradores deberán ingresar su correo electrónico. Aquí el sitio también es acompañado con una imagen.

Las dimensión ideal para esta imagen es no menos de 1200 x 760 px

▪️ Imágenes de los productos

Estas imágenes son de las más importantes en tu sitio web. La primera impresión de tu producto determina si se concreta la compra o no.

Estas imágenes deben ser de un mínimo de 800 x 800 px y un máximo de 1080 x 1080 px. Por ende, deben ser cuadradas. No rectangulares.


Otras consideraciones

  • Intenta que tus imágenes no pesen más de 1 MB. Principalmente porque hacen que tu sitio sea más "pesado" y difícil de cargar.

  • Utiliza nombres claros para los archivos de tus imágenes.

  • Ten una amplia selección de fotografías: de tus productos individualmente, de tus productos en grupo, de tu local, etc.


✌️ Un consejo Justo

Puedes hacer click en el botón Previsualizar antes de guardar tu nuevo componente. De esta forma podrás revisar su aspecto final y hacer correcciones antes de que se publiquen.

¿Ha quedado contestada tu pregunta?