Lineamientos para el uso de imágenes en Cloudbeds Websites

• Ancho para la imagen de fondo: 2880px
• Escritorio: 1920px
• Tableta: 1280px
• Teléfono móvil: 640px Thumbnail
• Miniatura del blog:
  • 160px
  • 300px

1. El Selector de imágenes le permite realizar ediciones rápidas en las imágenes de su sitio web:
   • Recorte o gire las imágenes de su sitio directamente desde el Selector de imágenes.
   • Haga clic en una imagen de su sitio para abrir el Editor de contenido y haga clic en Editar.
     
     
2. Utilice el menú en la parte inferior de la imagen para agregar un marco, agregar texto, ajustar, recortar y enfocar la imagen.
3. Una vez que esté satisfecho con la imagen que ha creado, haga clic en Guardar y cerrar y la imagen se guardará en su biblioteca y en la página.

Cada vez que carga una imagen, se crean hasta 5 copias de tamaño reducido de la imagen. Luego, el Editor de sitios web inserta de forma automática la imagen del tamaño adecuado en los sitios de escritorio, tableta y dispositivos móviles, asegurándose de que los visitantes de su sitio web siempre vean la imagen del tamaño correcto para su dispositivo.

Requisitos del sistema para Webp

Las siguientes versiones son compatibles con imágenes Webp:

• iPhone: 14 y posteriores
• Mac/Safari: versión más reciente
• Chrome: todas las versiones
• Android: todas las versiones

Se admiten los siguientes tipos de archivos de imagen:

• png
• jpg
• jpeg
• gif
• svg
• svg+xml
• ico
• x-icon
• webp

• El área total de una imagen no puede exceder los 3.145.728 píxeles. Es poco probable que alguna de sus imágenes supere este límite, pero puede verificarlo de forma sencilla al multiplicar el ancho de píxeles por la altura.
• El tamaño de la imagen no debe exceder los 200 MB.
• Cargar una imagen con dimensiones mayores a las permitidas podría provocar los siguientes errores:
  • Las imágenes no se cargan.
  • Las imágenes se cargan, pero no se muestran las miniaturas en el selector de imágenes.
  • Las imágenes no se cargan en el editor.
  • Las imágenes no se cargan en el sitio web.

Sliders

Se utilizan normalmente con imágenes de mayor tamaño para lograr un efecto dramático. Estos son controles deslizantes que comúnmente se extienden de un extremo a otro, por lo que es bueno usar imágenes con más ancho para ajustarse al control deslizante. Para controles deslizantes cuadrados, utilice una relación de aspecto uniforme, como 1:1.

Es mejor elegir imágenes con un buen relleno para que el contenido principal de la imagen no se corte al cambiar el tamaño. Las proporciones de las imágenes deben ser las mismas en el control deslizante para lograr coherencia en el diseño.

• Relación de aspecto estándar: 16:9, 3:4
• Resolución estándar (px): 1600x900, 1280x720, 1280x960

Galería

Este es el widget más flexible para usar con imágenes gracias a sus variadas opciones de diseño. Por ejemplo, puede tener una galería en mosaico que establezca el mismo tamaño para todas las imágenes, o un mosaico que tenga un tamaño diferente para cada imagen.

Las relaciones de aspecto de las imágenes en la galería deben reflejar cómo desea que se muestren.

• Por ejemplo, las galerías de estilo cuadrado deben tener una proporción de 1:1.
• Las galerías con imágenes altas deben tener proporciones de altura más largas, como 2:5 o 200 x 500 píxeles.

Las proporciones de las imágenes deben ser las mismas para mantener la coherencia del diseño. Deje algo de relleno en la imagen para utilizar el efecto de desplazamiento y evitar que las imágenes se corten.

• Proporciones estándar: cualquier proporción.
• Resolución estándar (px): cualquier resolución, pero no superior a 1500 px para mantener la velocidad de la página.

Iconos

Los iconos son una parte muy importante para todo sitio web. Son marcadores visuales de información y pueden agregar un aspecto moderno a su sitio. Puede utilizar PNG, JPEG o SVG transparentes.

• Relación de aspecto estándar: generalmente 1:1, pero puede utilizar cualquiera.
• Resolución estándar (px):  200x200, 80x80 o cualquier resolución. Los SVG pueden tener cualquier resolución.

Favicons

Los favicons no se utilizan en su sitio real, sino que se muestran en la pestaña cuando los usuarios abren su sitio web. Se recomienda utilizar el formato ICO para convertir archivos de imagen a ICO.

• Relación de aspecto estándar: 1:1
• Resolución permitida (px) : 24x24, 36x36, 48x48

Logotipos

Se recomienda utilizar el formato SVG para las imágenes de logotipos, ya que los archivos SVG no están optimizados de la misma manera que otros archivos de imágenes. De esta forma, si el logotipo que carga es de tamaño pequeño, no perderá calidad.

Las dos relaciones de aspecto más comunes:

• Relación de aspecto o Resolución: la relación de aspecto corresponde a la relación entre los atributos de ancho y alto de una imagen. Una relación de aspecto 16:9 puede ser una imagen de 16x9 px o una imagen de 1600x900 px. Básicamente, es cualquier resolución de imagen que tenga una relación de 16:9.
• Relaciones de aspecto por dispositivo: si bien las imágenes están optimizadas en su sitio, en realidad no cambia el tamaño del diseño de las imágenes en su sitio. Si usa una imagen en el escritorio que tiene una relación de aspecto de 16:9, se verá perfecta en el escritorio ya 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 parecerá pequeña.
  
  Para compensar, puede usar la función Ocultar en el dispositivo para crear versiones específicas para esos dispositivos. O bien, puede cambiar el tamaño de las dimensiones de la imagen para que se ajuste. Los cambios de tamaño son independientes del dispositivo.