Hero image para sitios web: tamaños ideales, mejores prácticas y ejemplos

Los visitantes del sitio web forman su primera impresión en cuestión de segundos. Si algo no capta su atención de inmediato, corres el riesgo de perder su interés para siempre. Si un usuario se queda en una página web o se aventura más allá, se determina en parte por el diseño de tu sitio web. Una parte fundamental de eso es la hero image de tu sitio web.

La hero image de un sitio web, a veces llamada hero image de banner, es una imagen de encabezado destinada a captar la atención y lograr que los visitantes permanezcan allí. Las hero images de un sitio web generalmente comunican algo sobre tu negocio o marca y dirigen a los visitantes hacia algún tipo de acción, como hacer clic en las páginas de productos. 

Los elementos de diseño web de tu sitio son un elemento crucial de la narrativa de la marca, y la imagen o el video que elijas para el fondo de una página de inicio es el primer paso. 

¿Qué es la hero image de un sitio web? 

La hero image de un sitio web es la foto grande, ilustración o video que aparece en la parte superior de una página web, cerca de la barra de navegación. Estas imágenes suelen aparecer en la página de inicio de un sitio web y actúan como punto focal. A menudo se superponen con una llamada a la acción o un título.

A veces, las hero images incluso ocupan la totalidad de una página de inicio. Pero el tamaño y el tipo dependen de lo que quieras que esta inspire. También puedes tener hero images en las páginas de productos, tiendas, acerca de o página de contacto en tu sitio. 

Una buena regla general es usar una hero image cuando quieres llamar la atención sobre un mensaje específico, dar más importancia a una página o si la imagen contribuye al propósito de dicha página. Por ejemplo, una hero image realza la importancia de una tienda o página de productos, mientras que una imagen del equipo puede contar la historia de tu negocio en una página Acerca de. 

5 tipos de hero images para sitios web

Existen diversas formas de utilizar una hero image y diferentes tipos que explorar y usar. A continuación, se muestran cinco tipos comunes de hero image para sitios web, incluidas las opciones tradicionales, como una imagen de fondo de pantalla completa, y las no tradicionales, como animaciones o un carrusel. 

1. Imagen estática con superposición de texto

Una imagen estática es uno de los tipos de hero images más comunes para atraer a los visitantes. Esta imagen no necesita ocupar la totalidad de la página, pero por lo general ocupa un espacio significativo “por encima del pliegue”, es decir, la primera parte de la página que alguien ve. 

El texto superpuesto suele incluir un titular que resume tu negocio o una llamada a la acción que dirige a los visitantes a una página importante. El objetivo es llamar la atención con una imagen que se ajuste a tu marca e introduzca tu misión o lo que representas.

La plantilla web de Crosby es un ejemplo de una imagen estática de fondo completo con una superposición de texto mínima. Es limpia, concisa y, con la foto correcta, puede dejar una impresión duradera.

2. Imagen de fondo a pantalla completa

Una imagen de fondo a pantalla completa para la hero image de tu sitio web es una manera sugerente y efectiva de atraer visitantes. Por ejemplo, muchas empresas de moda eligen una hero image a pantalla completa porque muestra sus productos de una manera editorial e interesante. También crea un compromiso más profundo entre tú y el usuario. 

Al igual que las imágenes estáticas, las hero images a pantalla completa suelen estar en superposición con un titular y una llamada a la acción. Para que esta hero image sea efectiva, las imágenes deben ser de alta resolución para generar impacto, pero no deben ralentizar la capacidad de respuesta en el sitio web. 

La plantilla Belisa es un ejemplo de una imagen de fondo completa con texto que combina una navegación clara con una fotografía impresionante. 

3. Hero video de fondo

Utilizar un video para una hero image o banner de un sitio web es una forma no tradicional de crear una experiencia más inmersiva con tu potencial cliente. Un video te permite presentar más productos o contar más de la historia de tu marca de una manera interesante.

Sin embargo, un video de alta calidad requiere más planificación para producirlo correctamente. Para ofrecer la mejor experiencia de usuario, considera que el video sea relativamente corto o fácil de reproducir en bucle, algo que no ralentice ni entorpezca el rendimiento del sitio web. 

La plantilla Strade de Squarespace presenta un video en bucle con texto a un lado para que no interfiera con el punto focal de la hero image. 

4. Carrusel de imágenes

La mayoría de estos tipos de hero images para sitios web usan solo una imagen o un video. Si quieres tener varias imágenes que muestren productos, promociones o contenido, considera usar un carrusel. 

Estas imágenes suelen tener un tamaño similar al de una imagen de encabezado tradicional, solo que con más imágenes para mostrar más información o productos. El carrusel puede desplazarse automáticamente o tener un desplazamiento manual.

Mantén el número de imágenes que utilizas en un carrusel entre tres y cinco. Si se requiere más, usa tu criterio, pero es mejor que sean rápidas y fáciles de recorrer, para que los visitantes no se sientan abrumados.

La plantilla Jotter Press es un ejemplo ideal: dos flechas estrechas en la parte inferior permiten a los usuarios desplazarse por las imágenes. 

5. Hero image animada

Para destacar o experimentar con otro diseño menos tradicional, prueba las hero images animadas para sitios web. Este elemento visual puede mostrar tu ventaja creativa, exhibir la personalidad de tu marca y mantener a los visitantes interesados en tu página. 

Las hero images animadas para sitios web pueden ser increíblemente útiles para diseñadores gráficos o artistas, por ejemplo. Además de tu portafolio, pueden demostrar tus habilidades a clientes potenciales. 

Similar a los videos y carruseles, ten en cuenta la experiencia del usuario. Asegúrate de que las animaciones no ralenticen tu página, se sientan abrumadoras o limiten la accesibilidad de la información clave en tu sitio.

La plantilla Otroquest muestra una animación sutil y limpia que desliza la hero image sobre la página al cargar. Puedes experimentar con diferentes estilos de animación o animar solo una parte de un encabezado. 

Las mejores prácticas para las hero image de sitios web

Una hero image de sitios web invita a los visitantes a continuar su recorrido, descubriendo tus productos, ofertas o misión. Hay algunas mejores prácticas a considerar para maximizar el impacto y mostrar tu creatividad. 

1. Concéntrate en la historia de tu marca

La hero image de tu sitio web es la primera impresión que se llevan los visitantes. Aprovecha la oportunidad para mostrar visualmente de qué trata tu marca. Por ejemplo, puedes vender camisetas de impresión bajo demanda. Según cuáles sean los diseños reales en las camisetas, puedes mostrar la narrativa de tu marca seleccionando imágenes de un modelo usando el producto en un carrusel, o incorporando combinaciones de colores y elementos de diseño en la hero image. 

En cualquier caso, tu hero image, independientemente del estilo, puede ofrecer a los visitantes una visión concisa de lo que trata tu sitio web y tu marca. 

2. El formato, el tamaño y las dimensiones del archivo son importantes

Una de las mejores prácticas cruciales en cualquier tipo de diseño es usar el formato de archivo, tamaño y dimensiones adecuados. No todas las hero image de los sitios web se crean de la misma manera en cuanto a la experiencia del usuario. Para optimizar tu hero image, elige una imagen de alta resolución y calidad que se vea bien en las pantallas de computadoras de escritorio o dispositivos móviles. 

Estos son buenos puntos de partida para optimizar tu hero image: 

• Dispositivo móvil: 800 píxeles de ancho por 1200 píxeles de largo

• Computadora de escritorio: 1600 píxeles de ancho por 500 píxeles de largo o 1920 píxeles de ancho por 1080 píxeles de largo

• Relación de aspecto: 16:9

• Tamaño del archivo: de 10 a 20 MB

• Tipo de archivo: JPEG o PNG para imágenes, MP4 o MOV para video

Dicho esto, los tamaños de pantalla y los dispositivos varían. Idealmente, tendrás una plataforma para sitios web que sea adaptable, lo que significa que ajustará tu sitio web a diferentes tamaños de pantalla. En caso de duda, prueba la calidad de imagen y el tiempo de carga de tu sitio en diversos navegadores y pantallas.

3. Prioriza la accesibilidad

Para que la experiencia del usuario sea lo más importante, piensa en lo que necesitas para que tu hero image sea accesible. Si es un video con diálogo, ¿necesitas leyendas? ¿Tu imagen estática requiere texto alternativo? ¿Hay otros elementos que podrías agregar, como un botón de pausa para videos o animaciones?

Muchas plataformas de creación de sitios web pueden ayudarte a optimizar y priorizar la accesibilidad para visitantes con diferentes necesidades.  

Consulta nuestra guía de accesibilidad para sitios web

4. Agrega una llamada a la acción clara

Mantén tu llamada a la acción clara, concisa y fácil de localizar. Tu hero image es la que se encarga principalmente de contar la historia de la marca y de atraer a los usuarios para que exploren tu sitio web. Si deseas que ese usuario haga algo específico, como ver una nueva línea de velas hechas a mano o reservar una cita contigo, usa tu llamada a la acción para guiarlo allí. 

Consulta ejemplos y mejores prácticas de llamada a la acción

5. Hero images de prueba para sitios web

No todas las hero images van a tener un impacto en el público. Parte de la diversión de comercializar tu negocio y configurar tu sitio web es probar qué imagen tiene el mayor impacto.

Revisa los datos del sitio web para asegurarte de que siga siendo efectiva. Si notas un aumento en las salidas rápidas de una página con una hero image o descubres que los visitantes no hacen clic en tu llamada a la acción, eso puede ser una señal de que es hora de un cambio. Ejecuta una prueba con una nueva imagen para ver si eso cambia los comportamientos de los visitantes.