Hero image: qué es, para qué sirve y 6 ejemplos

Ya sea de manera consciente o inconsciente, todo el tiempo juzgamos los sitios web por su apariencia visual, y solamente nos lleva 0,05 segundos crearnos una opinión sobre la calidad de su formato.

Esto significa que las hero images (aquellas fotografías, gráficos o videos que ven inmediatamente los visitantes al entrar a un sitio electrónico) deben captar la atención de su audiencia para mantenerla interesada en el contenido que ofrece el portal.

Contar con hero images de alta calidad es un factor clave para lograr una primera buena impresión. Si estas imágenes son las adecuadas, representarán la esencia de tu marca y lograrán comunicar el tema de tu sitio web de manera efectiva. Por ello, estos elementos tienen un peso importante a la hora de construir tu sitio digital. No por nada su nombre sugiere el carácter heroico que tienen para mantener la atención de tu público.

Esta guía te explicará cómo llevar tu sitio web al siguiente nivel mediante el uso de hero images. Descubrirás cómo elegir una presentación visual acorde a las nuevas tendencias en diseño digital, así como algunas recomendaciones para elegir la posición y tamaño de tus imágenes de bienvenida. Asimismo, te presentaremos algunos ejemplos de hero images que te servirán de inspiración para crear tu propio sitio web.

¿Para qué sirven las hero images en el diseño web?

Si bien las imágenes presentes a lo largo de un contenido web son de suma importancia para retener la atención de los visitantes a un sitio electrónico, las hero images son la joya de la corona. Estos recursos visuales son lo primero que los visitantes ven en una página web y los responsables por engancharlos para querer saber más del contenido de tu sitio.

Muchas veces estas imágenes asumen incluso una posición activa, interpelando al visitante directamente con el fin de invitarlo a adentrarse en el sitio. En estos casos, el objetivo de estas imágenes es dar mayor energía y dinamismo a la página. Ten en mente que el objetivo de tu sitio web es dejar claro el estilo de tu marca y transmitir tu mensaje, valores y misión empresarial, por lo que estos recursos son un excelente aliado a la hora de querer contagiar emociones.

Elegir una buena hero image puede elevar el tráfico de visitantes en tu página, así como de interacciones con tus contenidos. Por ello, diseñar animaciones y recursos que interactúen con el apuntador de los visitantes o con su desplazamiento por la página son buenas estrategias para explorar tu creatividad y mantener entretenida a tu audiencia. Por otro lado, una mala elección de imágenes puede producir el efecto contrario. Imágenes de baja calidad o que tardan demasiado en cargar por su peso pueden arruinar la experiencia de los visitantes, disminuyendo su interacción con tu sitio o, incluso, llevarlos a abandonar la página.

Un reto común a la hora de diseñar estas imágenes es la elección del tamaño perfecto que se ajuste al contenido de tu sitio. Si es demasiado grande, el tiempo de carga se eleva exponencialmente; si, por el contrario, es muy pequeña, la calidad de la imagen se ve afectada y resulta pixelada. Veamos cómo establecer el tamaño de tus hero images para crear experiencias únicas para tus visitantes.

¿Cuáles deben ser la dimensiones de una hero image?

Encontrar la proporción correcta para una imagen puede resultar muy confuso a la hora de dimensionar una hero image. Además, en cada caso las necesidades pueden variar, por lo que no existe un único método para evaluar el tamaño de estas imágenes. Las hero image de tamaño banner no son lo mismo que las imágenes de pantalla completa, por lo que cada proceso de dimensionamiento debe atender las particularidades de la imagen para hacerla caber en el espacio que tenemos pensado para ella. 

Además, debes tener en cuenta que existe una gran diversidad de formatos de navegadores y de formatos de visualización. Mientras que algunas personas utilizan únicamente los ordenadores de escritorio para navegar en la red, hay audiencias que transitan entre teléfonos móviles, tabletas y otros dispositivos para visitar sitios electrónicos. Asimismo, hay personas que preferirán hacer zoom a las páginas o que constantemente cambian el formato de sus ventanas.

En algunos casos será necesario recortar algunas partes de la imagen para ajustarla a distintas pantallas. Las siguientes dimensiones son guías de los formatos más utilizados, pero no son los únicos que existen.

1. Imágenes de pantalla completa y tamaño banner

El tamaño ideal para una imagen de pantalla completa es de 1200 píxeles de ancho con una proporción 16:9. Si vas a optar por un tamaño banner, las dimensiones ideales son de 1600 x 500 píxeles.

Si requieres incluir imágenes demasiado nítidas o si prevés que tu audiencia utilizará pantallas de grandes dimensiones, deberás considerar aumentar la calidad de tu imagen a 1800 píxeles. Ten en mente que esto puede resultar en un mayor tiempo de carga y una ralentización de tu sitio web.

Para monitorear la velocidad de tu sitio puedes utilizar la herramienta PageSpeed Insights, de Google. Con ella podrás conocer la rapidez de carga de tus sitios en ordenadores y en teléfonos móviles para su optimización. Es recomendable que mantengas tu tiempo de carga en máximo uno o dos segundos, ya que tu audiencia puede perder el interés si la carga demora demasiado.

2. Hero images para formatos móviles

El tamaño ideal de una hero image para los navegadores móviles es de 800 x 1200 píxeles.

Si bien los sitios electrónicos generalmente se diseñan para ser presentados en pantallas de escritorios, es importante no olvidar la importancia de los formatos móviles. Cerca del 55 % del tráfico digital en 2021 fue generado desde teléfonos móviles, por lo que vale la pena optimizar tus contenidos para ser consultados desde estos dispositivos.

Tu hero image debe ser responsiva a estos formatos y debe caber de manera vertical (para teléfonos móviles), así como horizontalmente (especialmente para el uso de tabletas). Las hero images dinámicas, como los videos, funcionan muy bien para los navegadores de escritorios, pero en muchas ocasiones es mejor sacrificar estos contenidos para solamente mostrar imágenes en los formatos móviles. Recuerda que los videos tardan más en cargar y generalmente los usuarios de teléfonos móviles quieren una experiencia fluida al visitar un sitio. Además, nadie quiere agotar su plan de datos móviles solo para consultar tu página web.

3. Hero images comprimidas

Si tienes una imagen que pesa demasiado es muy probable que quieras comprimirla para reducir el tiempo de carga y el almacenamiento de tu sitio. Para ello puedes recurrir a herramientas como las ofrecidas por TinyJPG, Compress JPEG o por la paquetería de Adobe y disminuir el tamaño de tu imagen sin perder calidad. Ten en cuenta que deberás conocer las dimensiones que debe tener tu imagen; de lo contrario se verán borrosas o distorsionadas.

Para dimensionar tus hero images revisa las analíticas de Google para conocer las resoluciones promedio de las pantallas de tus visitantes. Solo así podrás crear diseños a la medida dirigidos a tu audiencia. Por último, recuerda hacer pruebas en múltiples dispositivos, navegadores y plataformas para saber si funcionan del modo esperado y si la información que buscas transmitir es clara. Una vez terminado este proceso, puedes entrar de lleno en la programación tu página web usando HTML y CSS.

HTML para hero images

HTML es un lenguaje de programación diseñado para dar instrucciones a un sitio web sobre qué debe mostrar, cómo y dónde. El código escrito en este lenguaje crea un orden y permite insertar contenidos (tales como las hero images) dentro del sitio.

Crear una hero image con HTML asegura que la imagen aparecerá en tu página, mientras que el código CSS la hará lucir bien en la pantalla. La escritura de ambos códigos requiere una amplia experiencia en programación, por lo que si quieres emplear HTML y CSS desde cero en el diseño de tu sitio deberás estar entrenado o bien contar con el apoyo de un desarrollador profesional.

Los factores más relevantes que debes tener presente a la hora de crear estos diseños son:

• La hero image debe estar centrada.
• El texto que la acompaña debe ser fácil de leer.
• Debe verse bien en cualquier tamaño de pantalla.
• La imagen debe cubrir la totalidad del campo de visión.

A continuación, observa el procedimiento.

Ten en cuenta que los siguientes ejemplos incluyen líneas de código HTML y CSS. Sus diferencias serán abordadas más adelante.

1. Crea la estructura

Prepara las cajas en las cuales insertarás la imagen que te interesa presentar a tu audiencia. Para ello, deberás utilizar las convenciones empleadas en la programación de tu sitio con el fin de evitar futuras confusiones. En este caso, el primer ejemplo utiliza .hero para la estructura, mientras que emplea .hero-content para las imágenes, textos y botones de interacción.

Imagen de Developer Drive

El segundo ejemplo, por su parte, utiliza .image-container e .inner-container.

Imagen de Code Instinct

2. Añade tu contenido

Una vez que has definido tu estructura es el momento de personalizar tu imagen. Para ello deberás adjuntar el archivo JPG y elegir una tipografía para el título de la imagen y, en su caso, la información que la acompañe. DeveloperDrive recomienda que, si quieres añadir un filtro a tu imagen de fondo (sin aplicarlo al texto), utilices el filtro antes del código .hero-content.

Imagen de Developer Drive

En este paso puedes notar que el ancho y el alto de la imagen están definidos como 100vw y 100vh. Esto asegura que la imagen abarca la totalidad del campo de visión, tanto vertical como horizontalmente.

Ten en cuenta que ninguna hero image está completa sin un botón de interacción que permita que los visitantes accedan a mayor contenido al seleccionarla. Puedes incorporar esta herramienta mediante el llamado <button>. Solamente deberás cerciorarte de incluir la tipografía elegida, ya que el texto no se traduce automáticamente de la caja .hero-content.

3. Centra la imagen

No todas las hero images tienen un texto centrado que las acompañe, pero la mayoría sí cuenta con una imagen que debe ir centrada. Para alinear tu imagen con la pantalla puedes crear una caja flexible incorporando los llamados display, justify-content y align-items dentro de tu caja .hero-element.

Imagen de Developer Drive

Para centrar un texto, incluye la indicación .text-align: center. En el siguiente ejemplo, esta indicación está anidada en la caja .hero-content.

Imagen de Developer Drive

4. Hazla responsiva

Un paso esencial a la hora de diseñar tu sitio es hacer que tu hero image se adecue a cualquier tamaño de pantalla. Para ello, deberás establecer parámetros que permitirán hacer que tu imagen sea responsiva a diferentes anchos de pantalla.

Imagen de Code Instinct

5. Prueba cómo luce

En este punto tu código HTML está listo. Realiza algunas pruebas para saber cómo se comportan las imágenes, los textos, los botones, los márgenes y los estilos a diferentes tamaños de pantalla. Si algo no se comporta del modo esperado, revisa tu código para ver si hay algún problema. DeveloperDrive ofrece algunos consejos para construir tu código y para resolver problemas en el uso de HTML. Si todo parece estar en orden es hora de añadir tu estilo con CSS.

CSS para hero images

Mientras que HTML permite crear orden en las instrucciones de un programa, CSS añade el factor atractivo. Una regla de diseño es que el código HTML tiene ser complementado con el estilo que solo el lenguaje CSS puede aportar. Por ejemplo, CSS te permite modificar los colores del texto sobre una imagen o hacerlo aparecer intermitentemente.

Si no incluyes CSS en tu hero image, los elementos que hayas programado en HTML aparecerán en el modo predeterminado del navegador elegido por tus visitantes. Esto puede resultar en una visualización de este tipo:

Inmediatamente, todos podemos reconocer que este no es el diseño más atractivo para una página web. Al incluir reglas CSS puedes generar recursos visuales que encanten a tus visitantes en lugar de espantarlos.

Los ejemplos previamente presentados en HTML incluyen algunas instrucciones en CSS. Sin embargo, revisaremos un diseño básico para que puedas utilizarlo en tus propias imágenes.

La siguiente plantilla muestra los recursos básicos en HTML y CSS que son necesarios para crear una hero image de pantalla completa. Puedes ajustar el estilo cambiando algunas reglas dentro de los conjuntos .hero o .hero-text, como la tipografía, el color o los márgenes.

Para mayor información y consejos en cómo emplear CSS para la presentación de imágenes, revisa el foro de GitHub sobre hero images. Mientras tanto, es momento de saber cómo luce un buen código optimizado para hero images y cómo pueden ayudar estos recursos a tu sitio web.

Como todos los medios creativos, las hero images están profundamente influenciadas por la moda. Por ello, es importante conocer las tendencias en diseño para adoptar las mejores estrategias de comunicación visual. A continuación, te presentamos algunos de los recursos más utilizados a la hora de diseñar hero images.

1. Paralaje y animaciones de desplazamiento

A pesar de su extraño nombre, el paralaje o efecto parallax es un fenómeno que experimentamos cotidianamente cuando vemos un automóvil pasar frente a nosotros o cuando caminamos por la calle. Este fenómeno es una ilusión óptica que hace que percibamos que los objetos más cercanos se desplazan a velocidades más rápidas que aquellos que están lejos. En el diseño web, el paralaje utiliza los planos visuales para crear este efecto y el resultado parece arte de magia. Para emplear este recurso es recomendable no excederse con la cantidad de elementos móviles, ya que pueden saturar la visión de los visitantes.

Apple es, sin lugar a dudas, el mejor representante de la utilización del paralaje para cautivar a los visitantes de su sitio web. Ten en cuenta que la simplicidad a veces gana.

Las animaciones de desplazamiento son recursos que adicionalmente ponen en interacción a los visitantes con el sitio web. Una buena animación de este tipo invita a su audiencia a continuar explorando los contenidos para descubrir información al ritmo de su desplazamiento en la página, lo cual ofrece una experiencia única al usuario.

Estas animaciones pueden ser de diferentes tipos y funcionan excelentemente a la hora de vender productos, ofrecer servicios creativos o en el área de noticias y de la educación.

2. Composiciones abstractas

Los triángulos, los círculos, las líneas y los colores en bloque son nuevamente tendencia y son los mejores aliados para quienes quieren aprovechar diseños simples para capturar la atención de los visitantes en un sitio. Las composiciones abstractas permiten incluir más dinamismo en la página para comunicar mayor libertad y creatividad visual. Esta tendencia es particularmente popular entre las compañías tecnologías y startups.

Por ejemplo, el sitio de la empresa Zendesk incorpora un video dentro de un semicírculo para sumar un elemento divertido a la visita a su página web.

3. Esquemas de color suaves

El adulto promedio pasa cerca de ocho horas diarias frente a una pantalla, y esto puede ocasionar cansancio visual. Algunos diseñadores han tomado en consideración estos datos y han comenzado a preferir hero images con paletas de colores suaves o neutras. Esta tendencia se ha vuelto especialmente popular entre los vendedores, empresas de bienestar y sitios que ofrecen servicios médicos para promover una experiencia más apacible y confortable a sus visitantes (y sus ojos).

Imagen de Zara Home

4. Productos como elementos de diseño

A la hora de querer vender productos, estos tienen que ser los protagonistas. Por ello, muchas empresas se esfuerzan en presentar de cualquier modo posible sus mercancías, así como información que puede atraer a los posibles consumidores. Para hacer esto de manera indirecta, es común ver que los productos forman parte de las hero images solamente como elementos de diseño que comunican algunas características del producto y que facilitan la interacción con el recurso visual para acceder a más información.

Las empresas tecnológicas y de ventas emplean este tipo de hero images, pero en realidad pueden funcionar para cualquier marca que quiera hacer de sus productos las estrellas del show.

Imagen de Tarte Cosmetics

5. Colores vivos

Si los colores en bloque son los preferidos por los minimalistas, las tonalidades y cambios de color son tendencia para los amantes del movimiento. Esta tendencia en diseño de hero images intenta que el espectador se sienta dentro de la pantalla. Los diseñadores crean estas experiencias hiperrealistas utilizando sombras, mezclas de colores y matices.

Imagen de Behance

6. Videos

De acuerdo con Wyzowl, el 84 % de las personas han sido convencidas de comprar un producto tras ver un video de la marca. Esto se traduce en que los videos son el recurso visual perfecto para crear hero images atractivas. Si decides optar por estos audiovisuales, es recomendable que no tengan más de 30 segundos de duración y que automáticamente se reinicien para evitar que el visitante tenga que dar clics de más. Sin embargo, ten en mente que, como hemos afirmado, estos recursos no son los mejores para ciertos tipos de experiencia de navegación, como los teléfonos móviles, por lo que es recomendable ponderar sus beneficios.

5 buenas prácticas para crear hero images

Las tendencias son solo una de las partes cruciales a la hora de diseñar una buena hero image. El resto de su éxito depende de saber aplicar sólidos principios del diseño. Incluso si no eres un experto en la materia, puedes seguir los siguientes consejos que determinan la efectividad de las hero images en la captación de audiencias.

1. Tamaño

Ya hablamos de las mejores dimensiones para las hero images (que deben ser de 1200 píxeles en una proporción 16:9), así que considera esto como un recordatorio de la importancia en la elección del tamaño correcto. No querrás que los navegadores redimensionen tu imagen, ya que esto puede ocasionar que tu mensaje se pierda o que termines con imágenes distorsionadas que disgustarán a los visitantes.

Los expertos recomiendan probar con imágenes en formato PNG y JPG para seleccionar aquellas que tarden menos tiempo en cargar.

2. Armonía

La gente suele fijarse en el mal diseño de una página y es probable que este los ahuyente de tu sitio web. Por ello, tienes que lograr una armonía entre la imagen que presentas de inicio con el tema general del portal electrónico. Mantén clara tu estética y haz que todos los elementos convivan para crear una buena experiencia de navegación. Aprovecha las tipografías, tamaños, colores y elementos visuales para producir un efecto armónico.

A la hora de crear una hero image puedes apoyarte en tu identidad de marca, así como en tus guías de estilo para mantener tu imagen y evitar que la gente abandone tu página antes de llegar a donde la quieres conducir.

3. Organización

La organización es fundamental a la hora de querer transmitir armonía en el estilo de tu sitio web. Por ello, tu hero image debe comunicar un contenido lógico y que sea prioritario para ameritar ser el encabezado de tu página.

Cuando una imagen está acompañada de información es más probable que se grabe en la mente de las audiencias, mientras que los textos por sí mismos no permanecen mucho tiempo en la memoria. Asegúrate de que tu mensaje sea claro y que se conecte con tus elementos visuales. Los diagramas de flujo te pueden ayudar a organizar la información de manera lógica y clara.

4. Originalidad

Si bien existen bases de datos con imágenes específicamente diseñadas para las campañas de publicidad y marketing, es probable que su abuso no ayude a la hora de crear hero images. Mientras que el 40 % de los creadores de contenido de marketing afirman que los gráficos originales ayudan a alcanzar más rápidamente los objetivos del negocio, solo el 13 % de ellos afirman lo mismo de las imágenes de stock.

Promueve tu creatividad creando tus propias hero images con el apoyo de programas como Canva o inspírate con las creaciones de Behance. Si no encuentras imágenes de buena calidad, puedes recurrir a Unsplash o Pexels para buscar entre miles de imágenes de alta calidad que pueden ser utilizadas con fines comerciales.

5. Consistencia

El mayor problema para crear elementos visuales atractivos radica en que es necesario producirlos constantemente. Para poder cumplir con los objetivos de creación de visuales deberás destinar recursos a su producción, así como tiempo y espacios definidos. Estos elementos son fundamentales para el éxito de una marca, por lo que no debes minimizar su importancia ni su impacto.

Si no encuentras tiempo para producirlos, puedes optar por retocar los gráficos y anuncios viejos. Este es un gran método para ahorrarte tiempo y algunos estudios afirman que 51 % de las empresas han recurrido a la reutilización para hacer más eficientes sus procesos.

No existe nada peor que visitar una página con un diseño sospechoso. Estas páginas hacen que los visitantes prefieran abandonarla debido a la desconfianza que las malas gráficas y la saturación de elementos visuales transmiten. Por el contrario, visitar una página con un gran diseño invita a los usuarios a permanecer en la página.

Al ser la primera interacción que los clientes tienen con tu marca, las hero images deben crear un impacto positivo en aquellos que visitan tu sitio. Es momento de que pongas en práctica los conocimientos adquiridos y diseñes tus propios elementos visuales que encanten a tu audiencia a primera vista.