Diseño del blog

Soporte Mi Sitio    /   Pautas de tamaño de imágenes

Pautas de tamaño de imágenes

Perspectiva general

Cada vez que carga una imagen, el website builder crea hasta 5 copias de tamaño reducido de la imagen. El creador luego insertará automáticamente la imagen de tamaño adecuado en los sitios web de escritorio, tableta y móvil, asegurándose de que los visitantes de su sitio siempre vean la imagen de tamaño adecuado para su dispositivo.

Guía

Tipo de imagen Anchura de imagen
Fondo 1980px
Escritorio 1660px
Tableta 1440px
Móvil 600px
Miniatura 150px
El creador no aumentará el tamaño de una imagen cargada y solo creará imágenes que sean más pequeñas que la imagen cargada original.

Por ejemplo, si se carga una imagen de 2000px de anchura, se crearán 5 nuevas copias optimizadas. Si se carga una imagen de 100px de anchura, no se crearán nuevas imágenes.

Tamaño máximo de imagen

El área total de una imagen no puede exceder 3,145,728 píxeles. Es improbable que cualquiera de sus imágenes supere este límite, pero puede verificarlo rápidamente multiplicando la anchura por la altura de píxeles.

Pautas de tamaños de imagen según el widget

Deslizador

El widget de deslizador normalmente se usa con imágenes de tamaño más grande para un efecto dramático. Los deslizadores generalmente se extienden de un extremo al otro, por lo que es recomendable usar imágenes con más anchura para ajustarse al deslizador. Para deslizadores "cuadrados", use una relación de aspecto uniforme como 1:1. 

Es mejor elegir imágenes con un buen relleno, de forma que el contenido principal de la imagen no quede cortado cuando se le cambie el tamaño. Las relaciones de las imágenes deberían ser las mismas en el deslizador para coherencia en el diseño.
  • Relaciones de aspecto comunes: 16:9, 3:4
  • Tamaños de resolución comunes (px): 1600x900, 1280x720, 1280x960
Notas específicas por dispositivo: Los dispositivos móviles a menudo tienen la relación de aspecto opuesta en comparación con los dispositivos de escritorio. Quizás deba usar la característica ocultar en dispositivo para mostrar los deslizadores móviles correctamente.

Galería

El widget de galería es el widget más flexible para usar con imágenes, solo debido a que hay muchas opciones de disposición. Por ejemplo, puede tener una galería de baldosas, que tiene el mismo tamaño para todas las imágenes, o de mosaicos, que tiene un tamañodiferente según la imagen.

La relación de aspecto de las imágenes en la galería debería reflejar cómo desea que se muestre.
  • Por ejemplo, galerías de estilo cuadrado deberían tener una relación de imágenes de 1:1.
  • Las galerías de estilo de imágenes altas deberían tener relaciones de mayor altura, como 2:5 o 200px por 500px.
Las relaciones de las imágenes deberían ser las mismas para coherencia en el diseño. Deje cierto relleno en la imagen si desea usar el efecto "hover", de forma que sus imágenes no queden cortadas.
  • Relaciones de aspecto comunes: Cualquier relación de aspecto.
  • Tamaños de resolución comunes (px): Cualquier resolución, pero no mayor de 1500px para velocidad de la página.
Iconos

Los iconos son una parte importante de cualquier sitio. Son marcadores visuales de información y pueden brindar un aspecto moderno a su sitio. Puede usar PNG, JPEG o SVG transparentes.
  • Relaciones de aspecto comunes: Generalmente 1:1, pero cualquier relación de aspecto servirá.
  • Tamaños de resolución comunes (px): 200x200, 80x80 o cualquier resolución. Los SVG pueden tener cualquier resolución.
Iconos de favoritos

Los iconos de favoritos no se usan propiamente en su sitio, sino que más bien son lo que se muestra en la ficha cuando los usuarios abren su sitio web.
  • Relación de aspecto requerida: 1:1
  • Tamaños de resolución permitidos (px): 24x24, 36x36, 48x48
Relación de aspecto vs. resolución

La relación de aspecto es la "relación" del atributo de anchura y altura de una imagen. Una relación de aspecto de 16:9 puede ser una imagen de 16x19 px o una imagen de 1600x900 px. Es básicamente cualquier resolución de imagen que tiene una relación de 16:9.

Diferentes relaciones de aspecto según dispositivo

Aunque Mi Sitio optimiza las imágenes en su sitio, realmente no cambia el tamaño del diseño de las imágenes de su sitio. Si utiliza una imagen en un escritorio que tiene una relación de aspecto de 16:9, esta lucirá perfecta allí debido a que un dispositivo de escritorio es ancho. Sin embargo, un dispositivo móvil es mucho más pequeño, por lo que una relación de aspecto de 16:9 a veces lucirá pequeña.

Para compensar, puede usar la característica ocultar en dispositivo para crear versiones específicas para esos dispositivos o cambiar las dimensiones de la imagen para ajustarla; los cambios de tamaño son independientes del dispositivo.

Consideraciones

Cargar la mayor resolución para su sitio garantizará que las imágenes de su sitio sean de alta resolución para sus clientes y usuarios; sin embargo, es bueno tener en cuenta que las imágenes grandes también tienen un efecto drástico en la velocidad de su página. Debido a que las imágenes de alta resolución son reducidas en proporción, los usuarios normalmente no notan la diferencia en resolución. Es mejor cargar imágenes que sean tan grandes como se espera usarlas. Por ejemplo, si tiene una fotografía de 300px por 300px en su sitio, no le conviene cargarla como una imagen de 4000px por 4000px.

Artículos recientes

15 de noviembre de 2019
Personalice el fondo de su sitio web eligiendo un color o imagen. Enfatice el tema de su negocio usando fondos atractivos y creativos. Elija una imagen de fondo personalizada en la galería de fotos o cargue sus propias imágenes para crear un diseño único de sitio web. Su fondo se puede personalizar para cada dispositivo.
15 de noviembre de 2019
Use el widget Imagen para insertar una imagen en su sitio web. Puede personalizar las imágenes para que actúen como botones y navegar a otras páginas o sitios web, descargar archivos o activar ventanas emergentes. Las imágenes son una excelente manera de decorar sitios web, mostrar productos o escaparates y crear una forma adicional de comunicarse con los visitantes.
15 de noviembre de 2019
Nuestras herramientas de personalización funcionan en un sistema de activadores y acciones. Cuando se cumplen las condiciones de un activador, ocurre una acción que personaliza el sitio web para ese visitante. Use personalización para crear experiencias que impulsen conversiones 1 a 1 para visitantes del sitio web con base en la hora del día, tipo de dispositivo, geolocalización y más.
15 de noviembre de 2019
El selector de imagen le permite realizar rápidas modificaciones en sus imágenes. Recorte o rote las imágenes en su sitio web directamente desde el selector de imagen.
15 de noviembre de 2019
La función de iconos sociales agrega enlaces a sus perfiles de redes sociales en muchas redes populares como Facebook, Twitter, Pinterest, Whatsapp, Google my business y más. Agregar enlaces de redes sociales a su sitio web es muy importante y es una de las mejores maneras de llegar a su audiencia y obtener vistas, tanto a nivel local como global.
15 de noviembre de 2019
¿Desea compartir contenido descargable con los visitantes de su sitio web? Use el widget de archivo para cargar un archivo que los visitantes de su sitio web pueden descargar con solo hacer clic en un botón. Comparta volantes, libros electrónicos y otros documentos al tenerlos disponibles para descargar.
¿No encontras lo que estas buscando?
Únicamente para planes personalizados
Si posee uno por favor ingresá aqui para soporte telefonico y chat en vivo.
Email
Tiempo estimado de respuesta: Entre 12 a 18 hs (de Lunes a Viernes de 8am a 17pm).
¡Descubrí ideas y herramientas geniales para tu sitio!
Share by: