Saltar al contenido

Guía definitiva de imágenes de héroes [Best Practices + Examples]

febrero 15, 2022
hero images.jpgkeepProtocol

Ya sea que te des cuenta o no, juzgas cada sitio web por su atractivo visual. Y solo toma alrededor 0,05 segundos para formar una opinión. Eso significa que la imagen principal (la primera foto, gráfico o video que ven las personas) debe ser lo suficientemente llamativa para que las personas sigan navegando por el sitio.

Las imágenes destacadas de alta calidad son la clave para una excelente primera impresión. Si se hace bien, representa la esencia de la identidad de su marca y el tema general de su página web.

Sí, es mucho peso para una pieza de contenido visual. Por eso es el más heroico de todos.

Esta guía le explicará cómo subir de nivel su sitio web con la imagen de héroe perfecta, desde elegir un gráfico inspirado en las últimas tendencias de diseño hasta asegurarse de que su imagen tenga el tamaño óptimo. También veremos ejemplos de imágenes destacadas para generar ideas para su propio sitio web. Prepárate para un poco de atractivo visual de diseño.

→ Descargar ahora: más de 50 plantillas gratuitas de imágenes de redes sociales

Imagen de héroe en diseño web

Si las imágenes atractivas son la guinda de cada gran sistema de diseño, una imagen destacada es la cereza roja y brillante. Atrae tu atención y te hace querer más.

En el diseño web, una imagen destacada es la primera foto, gráfico, ilustración o video que la gente ve en una página web. Por lo general, incorpora tanto una imagen como un texto para transmitir el mensaje central de una empresa. Las imágenes destacadas se ubican en la parte superior de la página y, a menudo, incluyen una llamada a la acción (CTA) que anima a las personas a profundizar en el sitio web. El objetivo de esta imagen es agregar energía y emoción a una página. Desea que muestre el estilo de su marca, comparta el propósito de su sitio y haga que las personas se entusiasmen por explorar.

Una buena imagen de héroe puede elevar su tráfico y conversiones al hacer que las personas quieran interactuar con su sitio. La animación, los carruseles y los efectos activados por desplazamiento son formas de flexibilizar su creatividad más allá de la típica fotografía de archivo. Pero una mala imagen puede derribar un gran diseño. Las imágenes fuera de marca, los archivos grandes que ralentizan la velocidad de carga y las copias sin sentido pueden arruinar la experiencia del usuario.

Un error común al diseñar una imagen de héroe es obtener el tamaño de archivo correcto. Demasiado grande, su velocidad de carga cae en picado. Demasiado pequeño, todo se ve pixelado. Repasemos los diferentes tamaños de imagen de héroe para que pueda crear una imagen sorprendente cada vez.

Dimensiones de la imagen principal

Encontrar la relación de aspecto y el recorte correctos puede ser confuso al dimensionar una imagen principal. Las imágenes de héroe de banner no son lo mismo que las imágenes de pantalla completa, y cada imagen debe escalarse para adaptarse al espacio. También hay que tener en cuenta que nadie navega exactamente de la misma forma. Personalmente, mi pantalla suele estar ampliada al 120%, pero otros pueden tener docenas de pestañas abiertas que son todas de diferentes tamaños.

Es probable que se produzcan algunos recortes de imágenes a medida que la imagen principal se escala para adaptarse a una variedad de pantallas, por lo que es mejor pensar en las siguientes dimensiones como pautas, no como reglas rígidas.

1. Dimensiones de la imagen de pancarta y pantalla completa

El tamaño ideal para una imagen principal de pantalla completa es de 1200 píxeles de ancho con una relación de aspecto de 16:9. Para una imagen principal de banner, el tamaño ideal es de 1600 x 500 píxeles.

Si necesita imágenes nítidas o su público objetivo navega en pantallas grandes, es posible que deba ajustar el tamaño hasta 1800 píxeles. Tenga en cuenta que esto puede resultar en un archivo de gran tamaño que ralentiza su sitio.

Puede verificar su velocidad de carga para computadoras de escritorio y dispositivos móviles con Google Perspectivas de PageSpeed. Brinda una visión integral de qué contenido del sitio se carga primero y dónde se puede mejorar. Apunta a un tiempo de carga de la página de uno a dos segundos porque es probable que pierda personas si son más de cinco segundos.

2. Dimensiones de la imagen del héroe móvil

El tamaño ideal para una imagen de héroe móvil es de 800 x 1200 píxeles.

Si bien es importante considerar cómo se ve la imagen de su héroe en una computadora de escritorio, no puede ignorar la experiencia móvil. Por poco 55% del tráfico global del sitio web en 2021 se genera en un teléfono móvil.

El diseño de la imagen principal debe ser receptivo y ajustarse a una orientación vertical (teléfono) y horizontal (tableta). Las imágenes de héroe dinámicas, como los videos, funcionan bien en una computadora de escritorio, pero a menudo tienen que cambiarse por una imagen estática para dispositivos móviles. Los videos tardan más en cargarse y nadie quiere recibir un golpe masivo en su plan de datos solo para ver su sitio.

3. Compresión de imagen de héroe

Desea comprimir su imagen de héroe si tiene un tamaño de archivo grande (cualquier cosa de más de 1 MB es demasiado grande). Puedes usar sitios como diminutoJPG, Comprimir JPGo Compresor Photoshop de Adobe para disminuir el tamaño sin reducir la calidad. Solo asegúrese de obtener las dimensiones correctas de antemano o la imagen puede aparecer borrosa o estirada.

Al dimensionar una imagen destacada, consulte Google Analytics para ver la resolución de pantalla típica de los visitantes de su sitio web. Luego, diseñe con ese público objetivo en mente. Solo recuerda probar tu imagen de héroe en múltiples navegadores, pantallas y teléfonos para ver cómo escala. Una vez que tenga las dimensiones correctas, es hora de trabajarlo en su página web usando HTML y CSS.

Imagen destacada HTML

HTML es un lenguaje de codificación compuesto por elementos utilizados para dar estructura a una página web. Crea orden y le permite incrustar contenido (como imágenes destacadas) en un sitio.

La creación de una imagen principal con HTML garantiza que su visual aparezca en una página web, mientras que CSS hace que se vea bien en una pantalla. Ambos requieren habilidades de codificación, por lo que es posible que deba refrescar sus conocimientos de HTML y CSS o solicitar la ayuda de un desarrollador.

Las principales cosas a tener en cuenta son:

  • La imagen del héroe debe estar centrada.
  • El texto debe ser fácil de leer.
  • Tiene que verse bien en todos los tamaños de pantalla.
  • La imagen debe cubrir toda la ventana gráfica.

Siga estos pasos para configurar una imagen de héroe llamativa. Nota: Los ejemplos a continuación incluyen elementos HTML y reglas CSS, pero explicaré la diferencia entre los dos más adelante.

1. Crea la estructura.

Configure dos contenedores para su imagen principal utilizando las convenciones de codificación de su sitio web. Por ejemplo, el primer ejemplo a continuación utiliza .héroe para la estructura y .hero-contenido para la imagen, el texto y el botón, mientras que el segundo utiliza .imagen-contenedor y .inner-container.

cómo crear una estructura HTML para imágenes de héroesFuente de imagen

hero-image-html-estructuraFuente de imagen

2. Agrega tu contenido.

Una vez que la estructura está en su lugar, es hora de personalizar su imagen. Agregue una imagen, elija una fuente personalizada, cree un encabezado y un subtítulo, y cree un botón con una llamada a la acción atractiva. Si desea agregar un filtro a su imagen de fondo (sin aplicarlo al texto), DeveloperDrive recomienda incluir el filtro antes de su .hero-contenido código.

cómo personalizar tu imagen de héroe con HTML

Fuente de imagen

Observe cómo el ancho y la altura debajo de la .héroe están configuradas en 100vw y 100vh. Esto garantiza que la imagen se ajuste a toda la ventana gráfica, tanto vertical como horizontalmente, de modo que abarque toda la pantalla.

Ninguna imagen destacada está completa sin un botón que impulse a las personas a actuar. Incorpora uno a tu imagen con el elemento. Solo asegúrese de incluir el Familia tipográfica ya que el texto no se traduce automáticamente desde el .hero-contenido elemento.

3. Centre el contenido.

No todas las imágenes principales tienen texto centrado, pero la mayoría tiene una imagen centrada. Para alinear su imagen de fondo, puede hacer un contenedor flexible incorporando monitor, justificar-contenido y alinear elementos bajo tu .héroe elemento.

cómo centrar el contenido en las imágenes de los héroes

Fuente de imagen

Para texto centrado, incluya un .text-alinear: centro regla bajo su elemento de contenido central. En el siguiente ejemplo, el texto está anidado bajo el .hero-contenido código.

la regla del centro en HTML

Fuente de imagen

4. Haz que responda.

Desea que su imagen de héroe se vea bien sin importar el tamaño de la pantalla. La configuración de consultas de medios le permite crear parámetros para que su imagen responda en un ancho de pantalla particular.

cómo crear una imagen de héroe receptiva en HTML

Fuente de imagen

5. Pruebe la vista.

¡Felicitaciones, su estructura HTML está configurada! Pruebe cómo se ven la imagen, el texto, el botón, los márgenes, el relleno y el centrado en diferentes tamaños de pantalla. Si algo parece estar mal, revise su código para ver si puede encontrar problemas. Para obtener instrucciones detalladas sobre cómo crear y solucionar problemas con HTML, consulte este artículo de DesarrolladorDrive. Todo se ve bien? Es hora de agregar estilo con CSS.

Imagen principal CSS

Mientras que HTML crea orden, CSS (hojas de estilo en cascada) agrega estilo. Es un lenguaje basado en reglas que complementa los elementos HTML aplicando efectos de estilo. Por ejemplo, CSS le permite convertir el texto en un encabezado de imagen de héroe en amarillo brillante para que se destaque contra el fondo púrpura.

Si no incluye CSS dentro de su imagen de héroe, los elementos HTML predeterminados a las propiedades básicas del navegador como el ejemplo a continuación.

CSS para imágenes de héroesFuente de imagen

Esa no es la página web más atractiva, ¿verdad?

Al incluir reglas CSS, puede desarrollar una imagen que atraiga a los visitantes en lugar de asustarlos. Los ejemplos de HTML anteriores incluyen reglas CSS, pero analicemos un diseño básico para que pueda trabajarlo en su propia imagen.

La siguiente plantilla describe el HTML y el CSS básicos necesarios para crear una imagen principal de pantalla completa. Puede ajustar el estilo cambiando las reglas bajo el .héroe o .hero-texto elementos, como Familia tipográfica, color, fronterao acolchado superior.

cómo crear una imagen de héroe de pantalla completa en HTML y CSSFuente de imagen

Para obtener más información e inspiración sobre formas de usar CSS para imágenes, consulte la imagen de héroe foro en GitHub. Ahora es el momento de ver qué puede hacer una buena codificación de imagen de héroe para la página web de una empresa.

Ejemplos de imágenes de héroes

Como todos los medios creativos, las imágenes de héroes están influenciadas por las tendencias. ¿Recuerdas cuando las imágenes prediseñadas eran geniales? ¿Qué tal cuando todos los sitios de noticias te golpean con una página de bienvenida?

Para crear una imagen de héroe relevante hoy, observe estas tendencias de diseño.

1. Animación de paralaje y desplazamiento

Experimentamos paralaje todos los días cuando vemos pasar autos o caminar por la calle. Es la ilusión óptica que hace que los objetos cercanos a nosotros parezcan moverse más rápido que los objetos más lejanos. En el diseño web, el paralaje utiliza el primer plano y el fondo para recrear este efecto. El resultado parece mágico. Solo asegúrese de no abrumar a los visitantes incorporando demasiados elementos en movimiento. La simplicidad es clave aquí.

La animación de desplazamiento hace que la participación sea el objetivo. Una buena animación de desplazamiento alienta a las personas a seguir desplazándose antes de ofrecer una experiencia única y atractiva. Las animaciones de desplazamiento vienen en una variedad de paquetes y funcionan bien en una serie de industrias, como venta minorista, servicios creativos, publicaciones de noticias, educación y más.

2. Composiciones abstractas

Los círculos, triángulos, rayas y bloques de colores vuelven a estar de moda. En lugar de restringir el espacio y asegurarse de que todo esté en su lugar, las imágenes abstractas de los héroes evocan una sensación de libertad y creatividad. Puede encontrar esta tendencia dominando empresas tecnológicas y nuevas empresas, como este ejemplo de Zendesk que incorpora video dentro de un semicírculo abstracto para mantener el diseño divertido.

3. Combinaciones de colores suaves

El adulto promedio gasta casi ocho horas al día con medios digitales – y eso puede provocar mucha fatiga visual. Los diseñadores web han tomado nota y están comenzando a inclinarse hacia las imágenes destacadas con paletas de colores neutros y agradables. Esta tendencia está apareciendo en sitios web médicos, de bienestar y minoristas para ofrecer una experiencia más cómoda y agradable a la vista.

Un ejemplo de una imagen de héroeFuente de imagen

4. Productos como elementos de diseño

Los productos son la estrella del espectáculo cuando se trata de imágenes de héroes. Las empresas quieren mostrar sus ofertas y atraer a los visitantes para que aprendan más sobre las funciones. Para las imágenes destacadas, es común ver productos que se utilizan como elementos gráficos o se deconstruyen para que los visitantes puedan profundizar en los detalles. Las empresas minoristas y de tecnología a menudo usan este tipo de imagen de héroe, pero puede funcionar para cualquier marca que busque poner su producto a la vanguardia.

Diseñar elementos utilizando productos.Fuente de imagen

Un ejemplo de productos en imágenes de héroeFuente de imagen

5. Color realista

Hasta luego colores planos, hola fino sombreado 3-D. Esta tendencia en el diseño web de imagen de héroe tiene que ver con…