Ir directamente al contenido
Español
  • No hay sugerencias porque el campo de búsqueda está vacío.

Cómo preparar imágenes para una visualización óptima en la app para huéspedes

Descripción general

Las imágenes desempeñan un papel clave en la experiencia del huésped. Cada sección del CMS puede mostrar las imágenes de forma diferente según su diseño y su finalidad en la app para huéspedes o guest app.

Este artículo recopila las especificaciones técnicas recomendadas para las imágenes en las distintas secciones del CMS, a fin de garantizar una visualización uniforme y de alta calidad.

En cada sección encontrarás:

  • Las especificaciones técnicas recomendadas
  • Los pasos para acceder al componente y configurarlo
  • Una referencia visual que incluye tanto la configuración en el CMS como la visualización de la imagen en la app para huéspedes

Seguir estas directrices ayuda a evitar recortes, deformaciones e incoherencias visuales en toda la app.

Antes de empezar

Antes de subir imágenes al CMS, ten en cuenta lo siguiente:

  • Estas especificaciones son orientativas. Las imágenes pueden adaptarse automáticamente en función de dónde se muestren, pero seguir estas recomendaciones ayuda a evitar recortes o deformaciones inesperadas.
  • Si un componente te permite elegir entre usar la imagen del servicio o subir una imagen personalizada, ten en cuenta que la imagen original del servicio puede no mostrarse como esperas debido a diferencias de proporción o diseño.
  • Cuando subas varias versiones de una misma imagen (por ejemplo, 4:3 y 1:1), utiliza siempre nombres de archivo distintos.

Si prefieres subir las imágenes desde la sección Imágenes (en lugar de subirlas individualmente en cada sección), es especialmente importante usar convenciones de nomenclatura claras y estructuradas. Incluir la sección de destino en el nombre del archivo (por ejemplo, restaurant_widget_3-1.jpg) puede ayudarte a identificar y reutilizar rápidamente la versión correcta más adelante.

Dedicar unos minutos a preparar y nombrar correctamente las imágenes te ahorrará tiempo y evitará problemas de visualización en la app.

Importante: Las imágenes que no coincidan con la proporción recomendada pueden recortarse o redimensionarse automáticamente según el componente.

 

Requisitos de imagen por sección del CMS

1. Sección Mi app

Esta sección recoge todos los requisitos de imagen de los elementos configurados en la sección Mi app del CMS, incluidos la cabecera y los widgets de la página de inicio.

1.1. Ajustes generales: Logotipo

El logotipo puede utilizarse tanto en la Cabecera como en el Menú lateral.

El logotipo debe subirse en formato horizontal, ya que la altura del componente es fija. Los logotipos verticales no se ajustan correctamente y pueden verse recortados o demasiado pequeños.

Para garantizar una visualización óptima, evita añadir márgenes o relleno alrededor del logotipo. El espacio adicional hará que se vea más pequeño dentro del componente.

Especificaciones recomendadas:

  • Formato: PNG
  • Tamaño de imagen: 400 x 200 px
  • Relación de aspecto: 4:2
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB
  • Fondo: transparente

Para acceder y configurar este componente en Cabecera:

  1. En el CMS, ve a Mi app > Personalizar app > Editar app.
  2. Ve a Cabecera dentro de Ajustes generales.
  3. Selecciona un tipo de cabecera.
  4. Define el estilo de fondo.
  5. Sube un logotipo.
  6. Define los colores.
  7. Haz clic en Guardar cambios.

Para acceder y configurar este componente en Menú lateral:

  1. En el CMS, ve a Mi app > Personalizar app > Editar app.
  2. Ve a Menú lateral dentro de Ajustes generales.
  3. Sube un logotipo.
  4. Define los colores del menú.
  5. Edita los grupos y secciones del menú.
  6. Haz clic en Guardar cambios.

 

Homepage_Header_Color

 

1.2. Ajustes generales: Cabecera

Cabecera estándar

Se utiliza como imagen principal en la parte superior de la pantalla de inicio.

Especificaciones recomendadas:

  • Formato: JPG
  • Tamaño de imagen: 450 x 225 px
  • Relación de aspecto: 2:1
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Para acceder y configurar este componente:

  1. En el CMS, ve a Mi app > Personalizar app > Editar app.
  2. Ve a Cabecera dentro de Ajustes generales.
  3. Selecciona Estándar como tipo de cabecera.
  4. Selecciona Imagen como estilo de fondo.
  5. Sube una imagen de fondo.
  6. Sube un logotipo.
  7. Define los colores.
  8. Haz clic en Guardar cambios.

 

Homepage_Header_Image

 

Cabecera upsell

Se utiliza para promocionar servicios o productos mediante un carrusel que se muestra en la parte superior de la app.

Especificaciones recomendadas:

  • Formato: JPG
  • Tamaño de imagen: 380 x 220 px
  • Relación de aspecto: 4:3
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Para acceder y configurar este componente:

  1. En el CMS, ve a Mi app > Personalizar app > Editar app.
  2. Ve a Cabecera dentro de Ajustes generales.
  3. Selecciona Upsell como tipo de cabecera.
  4. Define la configuración de la cabecera (color de fondo, logotipo y colores).
  5. Haz clic en Añadir para crear un nuevo elemento en el carrusel (puedes añadir varios elementos).
  6. Selecciona una fuente de contenido y un elemento de contenido.
  7. Sube una nueva imagen (recomendado) o usa la imagen ya asociada al elemento seleccionado.

 

Homepage_Header_Upsell

1.3. Widgets de la página de inicio

Widget Contenido

Permite subir imágenes personalizadas para las tarjetas de contenido (opción Manual dentro de Tipo de contenido) en lugar de usar imágenes vinculadas a servicios. Esto ayuda a que el contenido del carrusel sea visualmente distintivo y esté adaptado a promociones o destacados específicos.

Para acceder y configurar este componente:

  1. En el CMS, ve a Mi app > Personalizar app > Editar app.
  2. Ve al menú de widgets de la parte izquierda.
  3. Haz clic en + y selecciona Contenido dentro de Contenido del hotel.
  4. Selecciona Manual como tipo de contenido y haz clic en Añadir.
  5. Selecciona una fuente de contenido y un elemento de contenido.
  6. Sube una imagen.
  7. Define el título y el texto destacado.
  8. En la sección Diseño, selecciona Slider como orientación de la tarjeta.
  9. Elige Blanco o Imagen como estilo de tarjeta.
  10. Selecciona el estilo de imagen deseado (4:3, 9:16, 1:1 o Redonda).
  11. Define la visibilidad del widget.
  12. Haz clic en Guardar cambios.

 

Especificaciones recomendadas según las opciones de diseño seleccionadas:

Slider - Blanco - 4:3

  • Formato: JPG
  • Tamaño de imagen: 400 x 300 px
  • Relación de aspecto: 4:3
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

 

Homepage_Grid_01

 

Slider - Blanco - 1:1

  • Formato: JPG
  • Tamaño de imagen: 400 x 400 px
  • Relación de aspecto: 1:1
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Homepage_Grid_02

 

Slider - Blanco - Redonda

  • Formato: JPG
  • Tamaño de imagen: 400 x 400 px
  • Relación de aspecto: 1:1
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Homepage_Grid_03

 

Slider - Imagen - 4:3

  • Formato: JPG
  • Tamaño de imagen: 400 x 300 px
  • Relación de aspecto: 4:3
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Homepage_Grid_04

 

Slider - Imagen - 9:16

  • Formato: JPG
  • Tamaño de imagen: 400 x 800 px
  • Relación de aspecto: 9:16
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Homepage_Grid_05

 

Slider - Imagen - 1:1

  • Formato: JPG
  • Tamaño de imagen: 400 x 400 px
  • Relación de aspecto: 1:1
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Homepage_Grid_06

 

Widget Rejilla

Muestra contenido con un diseño mixto que emplea distintos formatos de imagen.

Para acceder y configurar este componente:

  1. En el CMS, ve a Mi app > Personalizar app > Editar app.
  2. Ve al menú de widgets de la parte izquierda.
  3. Haz clic en + y selecciona Rejilla dentro de Contenido del hotel.
  4. Introduce un título y un texto de acción y haz clic en Añadir.
  5. Selecciona una fuente de contenido y un elemento de contenido.
  6. Sube una imagen.
  7. Define un título y un texto destacado.
  8. Define la visibilidad del widget.
  9. Haz clic en Guardar cambios.

Al añadir varios elementos al widget Rejilla, algunos pueden mostrarse a ancho completo y otros a medio ancho.

 

Especificaciones recomendadas según el ancho:

Tarjeta superior (ancho completo)

  • Formato: JPG
  • Tamaño de imagen: 600 x 300 px
  • Relación de aspecto: 3:2
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Tarjeta inferior (medio ancho)

  • Formato: JPG
  • Tamaño de imagen: 400 x 400 px
  • Relación de aspecto: 1:1
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Homepage_Grid_07

 

Widget Destacados

Muestra contenido destacado en un carrusel horizontal con imagen, título, subtítulo y un botón de llamada a la acción.

Para acceder y configurar este componente:

  1. En el CMS, ve a Mi app > Personalizar app > Editar app.
  2. Ve al menú de widgets de la parte izquierda.
  3. Haz clic en + y selecciona Destacados dentro de Contenido del hotel.
  4. Haz clic en Añadir.
  5. Selecciona una fuente de contenido y un elemento de contenido.
  6. Sube una imagen.
  7. Define un título, un subtítulo y un texto para el botón.
  8. Añade otro elemento, si es necesario, y sigue las mismas instrucciones.
  9. Define la visibilidad del widget.
  10. Haz clic en Guardar cambios.

Especificaciones recomendadas:

  • Formato: JPG
  • Tamaño de imagen: 400 x 200 px
  • Relación de aspecto: 3:2
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Homepage_Highlights

 

Widget Información del huésped

Muestra a los huéspedes un widget con su nombre y las fechas de su estancia, junto con un acceso directo para completar el check-in del hotel. Este widget solo aparece cuando el usuario ha iniciado sesión.

Especificaciones recomendadas:

  • Formato: JPG
  • Tamaño de imagen: 310 x 80 px
  • Relación de aspecto: 3:2
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Para acceder y configurar este componente:

  1. En el CMS, ve a Mi app > Personalizar app > Editar app.
  2. Ve al menú de widgets de la parte izquierda.
  3. Haz clic en + y selecciona Información del huésped dentro de Interacciones.
  4. Define los colores del texto y del fondo.
  5. Activa el botón Mostrar imagen.
  6. Sube una imagen.
  7. Si es necesario, habilita el botón Mostrar botón de check-in y define su configuración.
  8. Define la visibilidad del widget.
  9. Haz clic en Guardar cambios.

Homepage_GuestInformation

 

Widget Banner

Muestra una tarjeta en formato banner con imagen, título, subtítulo y enlace. Puedes personalizar el estilo del banner y sus colores.

Para acceder y configurar este componente:

  1. En el CMS, ve a Mi app > Personalizar app > Editar app.
  2. Ve al menú de widgets de la parte izquierda.
  3. Haz clic en + y selecciona Banner dentro de Enlaces directos.
  4. Selecciona una fuente de contenido y un elemento de contenido.
  5. Selecciona Blanco o Imagen como estilo de banner.
  6. Selecciona un color de fondo (solo si has seleccionado Blanco).
  7. Sube una imagen.
  8. Define la altura y la anchura del banner (solo si has seleccionado Imagen).
  9. Define un título y una texto para el botón.
  10. Define la visibilidad del widget.
  11. Haz clic en Guardar cambios.

 

Especificaciones recomendadas según el estilo del banner:

Banner Blanco

  • Formato: JPG
  • Tamaño de imagen: 200 x 200 px
  • Relación de aspecto: 1:1
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Homepage_Banner_White

 

Banner Imagen

  • Formato: JPG
  • Tamaño de imagen: flexible (depende del contenido)
  • Relación de aspecto: flexible (depende del contenido)
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

La altura del banner es dinámica y depende de su configuración:

  • La altura puede variar según el tamaño del título y si se incluye un subtítulo
  • También puedes definir manualmente la altura en píxeles

Como resultado, tanto el tamaño de imagen como la relación de aspecto pueden variar según cómo se configure el banner.

Homepage_Banner_Image

 

2. Sección Contenido

Esta sección incluye las especificaciones de imagen para el contenido creado en la sección Contenido del CMS, como los detalles de servicio, catálogos, pop-ups de upsell, actividades del calendario e iconos de agrupaciones de contenido.

2.1. Instalaciones, Servicios, Ocio y Mensaje de bienvenida

Las siguientes especificaciones se aplican a todos los servicios creados en Instalaciones, Servicios y Ocio (excepto Calendario de actividades), así como a Mensaje de bienvenida.

Pestaña Información

Imagen de portada: imagen principal que se muestra en la parte superior de la página de detalle del servicio.

Especificaciones recomendadas:

  • Formato: JPG
  • Tamaño de imagen: 640 x 360 px
  • Relación de aspecto: 1:1
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Para acceder y configurar este componente:

  1. En el CMS, ve a Contenido > Instalaciones/Servicios/Ocio/Mensaje de bienvenida.
  2. Haz clic en el tipo de servicio correspondiente (por ejemplo, Restaurantes).
  3. Selecciona un servicio de la lista y haz clic en Editar.
  4. En la sección Imagen de la pestaña Información, haz clic en el icono de imagen para añadir una imagen.
  5. Selecciona una y haz clic en Insertar.
  6. Haz clic en Guardar cambios.

Service

 

Catálogos

Encabezado del catálogo: se muestra en la parte superior de la página del catálogo del servicio.

Especificaciones recomendadas

  • Formato: JPG
  • Tamaño de imagen: 400 x 400 px
  • Relación de aspecto: 1:1
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Para acceder y configurar este componente:

  1. En el CMS, ve a Contenido > Instalaciones/Servicios/Ocio/Mensaje de bienvenida.
  2. Haz clic en el tipo de servicio correspondiente (por ejemplo, Restaurants).
  3. Selecciona un servicio de la lista y haz clic en Editar.
  4. Ve a la pestaña Catálogo avanzado.
  5. Desplázate hasta la pestaña Diseño del catálogo (debes haber creado uno previamente).
  6. Selecciona Mostrar imagen de fondo en Encabezado del catálogo.
  7. Haz clic en el icono de imagen para añadir una imagen.
  8. Haz clic en Guardar cambios.

Catalog

 

Imagen de producto: imagen principal que se muestra en la parte superior de la página de detalle del producto.

Especificaciones recomendadas:

  • Formato: JPG
  • Tamaño de imagen: 400 x 400 px
  • Relación de aspecto: 1:1
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Para acceder y configurar este componente:

  1. En el CMS, ve a Contenido > Instalaciones/Servicios/Ocio/Mensaje de bienvenida.
  2. Haz clic en el tipo de servicio correspondiente (por ejemplo, Restaurants).
  3. Selecciona un servicio de la lista y haz clic en Editar.
  4. Ve a la pestaña Catálogo avanzado.
  5. Desplázate hasta la pestaña Productos del catálogo (debes haber creado uno previamente).
  6. Selecciona un producto y haz clic en Editar (icono de lápiz).
  7. Haz clic en el icono de imagen de la pantalla Información del producto para añadir una imagen.
  8. Haz clic en Guardar cambios.

Product

 

Pestaña Upsell

El pop-up de upsell se muestra al promocionar una oferta especial al huésped.

Especificaciones recomendadas para la imagen del pop-up de upsell:

  • Formato: JPG
  • Tamaño de imagen: 325 x 225 px
  • Relación de aspecto: 3:2
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Especificaciones recomendadas para la descripción del pop-up de upsell:

  • Título: 25-35 caracteres
  • Subtítulo: 40-60 caracteres
  • Texto: 150-200 caracteres para evitar el desplazamiento interno

Para acceder y configurar este componente:

  1. En el CMS, ve a Contenido > Instalaciones/Servicios/Ocio.
  2. Haz clic en el tipo de servicio correspondiente (por ejemplo, Restaurants).
  3. Selecciona un servicio de la lista y haz clic en Editar.
  4. Ve a la pestaña Upsell.
  5. Activa el botón Activato.
  6. Haz clic en el icono de imagen para añadir una imagen.
  7. Define el nombre, el subtítulo y la descripción.
  8. Haz clic en Guardar cambios.

Popup_Upsell

 

2.2. Leisure: Activities calendar

Esta sección detalla los requisitos de imagen para las actividades que se muestran en el Calendario de actividades.

Las actividades se agrupan dentro del calendario y se muestran individualmente en la app, cada una en su propia pantalla. La imagen de cada actividad aparece en la parte superior.

Especificaciones recomendadas para la imagen de una actividad:

  • Formato: JPG
  • Tamaño de imagen: 720 x 400 px
  • Relación de aspecto: 9:5
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Para acceder y configurar este componente:

  1. En el CMS, ve a Contenido > Ocio.
  2. Haz clic en Calendario de actividades.
  3. Selecciona un calendario de la lista y haz clic en Editar.
  4. Ve a la pestaña Lista de actividades.
  5. Selecciona una actividad y haz clic en Editar (icono de lápiz).
  6. En la sección Imagen de la pestaña Información, haz clic en el icono de imagen para añadir una imagen.
  7. Selecciona una y haz clic en Insertar.
  8. Haz clic en Guardar.

Activity

 

2.3. Otros: Agrupaciones de contenido

Esta sección recoge las especificaciones de imagen para los iconos de agrupaciones de contenido que se muestran en la app para huéspedes.

Iconos de pestaña

Iconos visibles en la parte superior de la pantalla de la app para representar grupos de contenido.

Especificaciones recomendadas para los iconos:

  • Formato: JPG
  • Tamaño de imagen: 200 x 200 px
  • Relación de aspecto: 1:1
  • Espacio de color: sRGB
  • Tamaño de archivo: máximo 1 MB

Para acceder y configurar este componente:

  1. En el CMS, ve a Contenido > Otros.
  2. Haz clic en Agrupaciones de contenido.
  3. Selecciona un grupo de contenido de la lista y haz clic en Editar.
  4. Ve a la pestaña Grupos.
  5. Selecciona o crea un grupo.
  6. Haz clic en el icono de imagen cuadrado para añadir un tab icon.
  7. Haz clic en Guardar cambios.

Grouping (1)

 

Próximos pasos

Ahora que ya conoces las especificaciones de imagen recomendadas:

  • Revisa las imágenes que ya tienes en el CMS y actualiza las que no cumplan con los formatos recomendados.
  • Prepara varias versiones de una misma imagen (por ejemplo, 4:3 y 1:1) para los contenidos clave, de modo que tengas más flexibilidad en los distintos componentes.
  • Utiliza convenciones de nomenclatura claras y coherentes para simplificar la gestión de imágenes.
  • Comprueba cómo se muestran las imágenes en la app para huéspedes después de publicar para asegurarte de que se visualicen correctamente.

 

¿Necesitas más ayuda?

Si tienes más preguntas o necesitas asistencia adicional:

  • Contáctanos a través del chat
  • Envía un ticket a nuestro equipo de Soporte
  • Visita STAY Academy