Optimice las imágenes de banner de Hero para todos los dispositivos

¿Cómo funciona el Banner de Héroe?

GemPages cambia automáticamente el tamaño de las imágenes de Hero Banner para mejorar la velocidad de carga de la página para diferentes dispositivos:

• Vista de tableta: La imagen se redimensiona a un ancho máximo de 1024 px.
• Vista móvil: La imagen se redimensiona a un ancho máximo de 768 px.

Este cambio de tamaño puede reducir la calidad de la imagen al usarla tanto en computadoras de escritorio como en dispositivos móviles. Para que tu Banner Hero se vea de maravilla, tienes dos opciones:

• Utilice el misma relación de imagen para todos los dispositivos.
• Usa imágenes separadas para cada dispositivo.

¿Cómo optimizar las imágenes del banner de héroe para todos los dispositivos?

Opción 1: Utilizar una única relación de aspecto de imagen para todos los dispositivos

Si desea utilizar la misma imagen en computadoras de escritorio, tabletas y dispositivos móviles, haga clic en el Elemento héroe Para abrir su configuración y seguir estos pasos:

Paso 1: Sube tu imagen al Banner del Héroe. 

• Desde la aplicación Configuración pestaña en la barra lateral izquierda, desplácese hacia abajo hasta la Fondo .
• Haga clic en el botón ""Añadir…""botón al lado del Imagen Opción para ampliar la configuración del fondo de la imagen.
• Cuando haya terminado, haga clic en Subir una nueva imageny asegúrese de que la imagen tenga al menos 1920 px amplio.

Paso 2: Establezca la relación tamaño/banner para la vista de cada dispositivo.

• Encuentre el elemento Marco en la sección de Tamaño .
• Elija el Como fuente de banner desde el desplegable.

El banner se redimensionará automáticamente para adaptarse al tamaño de la pantalla manteniendo las proporciones originales de la imagen.

Opción 2: Utilizar imágenes independientes para cada dispositivo

Para computadoras de escritorio y tabletas:

Sube tu imagen al Banner principal. Asegúrate de usar una imagen con un ancho mínimo de 1920 px. Esto garantiza imágenes de alta calidad en pantallas grandes.

Para móvil:

Paso 1: Seleccione la ventana gráfica del dispositivo que desea optimizar.

Paso 2: Sube una imagen optimizada para dispositivos móviles. 

La imagen debe coincidir con la relación ancho-alto del banner y tener un ancho mínimo de 768 px.

Ejemplo: Si el ancho de su banner es 375 px y la altura del banner es 500 px, la imagen cargada debe mantener la misma relación de 375:500 pero tener un ancho de 768 px.

• Ancho mínimo = 768px
• Altura calculada = (768/375)×500=1024px
• El tamaño óptimo para este ejemplo sería 768×1024 px.