Imagem hero do site: tamanho ideal, recomendações e exemplos

A primeira impressão dos visitantes sobre o site é definida nos primeiros segundos. Se algo não chamar imediatamente a atenção deles, você corre o risco de perdê-los para sempre. Em parte, é o design do site que determina se o usuário fica em uma página da web ou vai embora. Parte fundamental disso é a imagem hero do site.

Às vezes chamada de imagem hero do banner, imagem hero de site é uma imagem no cabeçalho destinada a chamar a atenção e fazer os visitantes ficarem no site. Essa imagem geralmente comunica algo sobre sua empresa ou marca e direciona os visitantes para alguma ação, como clicar na página de um produto. 

Os elementos de web design do seu site são essenciais à narrativa da marca, e a imagem ou o vídeo selecionado para o plano de fundo da página inicial é a primeira etapa. 

O que é imagem hero do site? 

Imagem hero do site é aquela foto, ilustração ou vídeo grande que aparece no topo de uma página da web, próximo à barra de navegação. Essas imagens geralmente aparecem na página inicial do site e servem como ponto focal. Elas geralmente são sobrepostas por uma chamada para ação ou um título.

Algumas imagens hero ocupam toda a página inicial. Porém, o tamanho e o tipo dependem do que a imagem hero deve inspirar. Você também pode ter uma imagem hero nas páginas dos produtos, na loja, na página "Sobre" ou na página para contato do seu site. 

Uma boa regra geral é usar a imagem hero para chamar a atenção para uma mensagem específica, dar mais importância a uma página ou se a imagem contribuir para o propósito da página. A imagem hero aumenta a importância de uma loja ou página de produto, por exemplo, enquanto uma imagem da sua equipe pode contar a história da empresa na página “Sobre”. 

Cinco tipos de imagem hero de site

Há várias formas de usar uma imagem hero e diferentes tipos para usar. Confira abaixo cinco tipos comuns de imagem hero de site, incluindo opções tradicionais (como uma imagem de fundo em tela cheia) e alternativas (como animações ou carrossel). 

1. Imagem estática com sobreposição de texto

A imagem estática é um dos tipos de imagem hero mais comuns para envolver os visitantes. A imagem não precisa ocupar toda a página, mas geralmente ocupa bastante espaço "acima da dobra" — a primeira parte da página que alguém vê. 

O texto de sobreposição normalmente inclui um título resumindo a empresa e/ou uma chamada para ação direcionando os visitantes para uma página importante. O objetivo é chamar a atenção com uma imagem que combine com a marca e apresente sua missão ou o que você pretende.

O template de site Crosby é um exemplo de imagem estática de fundo completo, com sobreposição mínima de texto. Ele é sóbrio, conciso e, com a foto certa, pode deixar uma impressão duradoura.

2. Imagem de fundo em tela cheia

Uma imagem de fundo em tela cheia como hero do seu site é uma forma eficaz de atrair os visitantes. Muitas empresas de moda escolhem uma imagem hero em tela cheia porque ela apresenta os produtos de uma forma editorial e interessante, além de criar uma interação mais profunda entre você e os usuários. 

Assim como a imagem estática, a imagem hero em tela cheia geralmente é sobreposta com um título e uma chamada para ação. Para que seja eficaz, essa imagem hero precisa ter alta resolução, a fim de causar impacto, mas sem reduzir a responsividade da página da Web. 

O template Belisa é um exemplo de imagem de fundo completo com texto, combinando navegação clara com uma fotografia impressionante. 

3. Hero com vídeo de fundo

Usar um vídeo como imagem hero ou banner de um site é uma forma alternativa de criar uma experiência mais imersiva para potenciais clientes. O vídeo apresenta mais produtos ou conta mais sobre a história da sua marca de uma forma interessante.

No entanto, um vídeo de qualidade exige mais planejamento para ser bem produzido. Para a melhor experiência dos usuários, use um vídeo relativamente curto ou fácil de repetir; algo que não atrase nem prejudique o desempenho do site. 

O template Strade do Squarespace apresenta um vídeo em loop com texto ao lado para não interferir no ponto focal da imagem hero. 

4. Carrossel de imagens

A maioria desses tipos de imagem hero de site usa apenas uma imagem ou um vídeo. Para ter mais imagens que mostrem produtos, promoções ou conteúdo, use um carrossel no hero do seu site. 

Essas imagens geralmente têm tamanho semelhante a uma imagem tradicional de cabeçalho, mas com mais imagens para mostrar mais informações ou produtos. O carrossel pode rolar automaticamente ou ter rolagem manual.

O número ideal de imagens no carrossel é entre três e cinco. Se for necessário mais, faça algo rápido e fácil de passar, para não sobrecarregar os visitantes.

O template Jotter Press é o exemplo ideal: os usuários usam duas setas estreitas na parte inferior para percorrer as imagens. 

5. Imagem hero animada

Para se destacar ou testar outro design menos tradicional, use uma imagem hero animada. Esse recurso visual pode destacar sua criatividade, mostrar a personalidade da sua marca e manter os visitantes interessados na sua página. 

A imagem hero animada é muito útil para designers gráficos e artistas, por exemplo. Além do seu portfólio, o hero animado pode apresentar suas habilidades para potenciais clientes. 

Assim como é no vídeo e no carrossel, considere a experiência dos usuários. As animações não podem deixar a página mais lenta, sobrecarregar nem limitar a acessibilidade das principais informações do site.

O template Otroquest mostra uma animação sutil e sóbria, que desliza a imagem hero para a página quando ela é carregada. Você pode testar diferentes estilos de animação ou animar apenas parte de um cabeçalho 

Recomendações para imagens hero no site

A imagem hero do site convida os visitantes a continuarem a jornada para conhecer seus produtos, serviços ou missão. Há algumas recomendações para maximizar o impacto e dar asas à sua criatividade. 

1. Concentre-se na história da sua marca

A imagem hero do seu site é a impressão inicial dos visitantes. Use essa oportunidade para mostrar visualmente o que sua marca representa. Você pode, por exemplo, vender camisetas de impressão por demanda. Dependendo dos designs reais das camisetas, e para mostrar a narrativa da sua marca, você pode selecionar imagens de um modelo usando o produto e colocar em um carrossel ou incorporar cores e elementos de design na imagem hero. 

Seja como for, sua imagem hero — não importa o estilo — pode dar aos visitantes um resumo do que é seu site e sua marca. 

2. O formato, o tamanho e as dimensões do arquivo são importantes

Uma recomendação importante para qualquer tipo de design é usar o formato, tamanho e dimensões corretos do arquivo. Nem todas as imagens hero são criadas iguais para a experiência dos usuários. Para otimizar a imagem hero, escolha uma imagem de alta resolução e qualidade, que apareça bem na tela do desktop ou do celular. 

São bons pontos de partida para otimizar sua imagem hero: 

• Celular: 800 pixels de largura por 1200 pixels de comprimento

• Desktop: 1600 pixels de largura por 500 pixels de comprimento ou 1920 pixels de largura por 1080 pixels de comprimento

• Proporção da imagem: 16:9

• Tamanho do arquivo: de 10 a 20 MB

• Tipo de arquivo: JPEG ou PNG para imagens, MP4 ou MOV para vídeos

Dito isso, os tamanhos de tela e os aparelhos variam. O ideal é que a plataforma do site seja responsiva, ou seja, que ela adapta seu site a telas de diferentes tamanhos. Em caso de dúvida, teste a qualidade da imagem e o tempo de carregamento do seu site em alguns browsers e telas.

3. Priorize a acessibilidade

Para priorizar a experiência dos usuários, considere o que você precisa para deixar sua imagem hero acessível. Se for um vídeo com diálogo, você precisa de legendas? Sua imagem estática exige um texto alternativo? Há outros elementos que você pode adicionar, como um botão de pausa no vídeo ou animações?

Muitas plataformas de criação de sites podem otimizar e priorizar a acessibilidade de visitantes com diferentes necessidades.  

Confira nosso guia de acessibilidade de sites

4. Adicione uma CTA clara

Sua CTA deve ser clara, concisa e fácil de localizar. A imagem hero faz a maior parte do trabalho de contar a história da marca e atrair os usuários para o site. Para que eles façam algo específico, como conferir uma nova linha de velas feitas à mão ou marcar um horário com você, use a chamada para ação para levá-los até lá. 

Veja exemplos de chamada para ação e recomendações

5. Teste as imagens hero do site

Nem todas as imagens hero causam impacto no seu público. Parte da diversão de fazer o marketing da sua empresa e montar o seu site é testar qual imagem causa o maior impacto.

Confira os dados do seu site para que a imagem hero ainda seja eficaz. Se você notar um aumento nas saídas rápidas de uma página com imagem hero ou descobrir que os visitantes não estão clicando na sua chamada para ação, é sinal de que é hora de mudar. Faça um teste com uma nova imagem para ver se ela muda o comportamento dos visitantes.