Como criar uma imagem de destaque de alto impacto para o seu site

A primeira coisa que alguém vê ao visitar o seu site é uma hero image.

As pessoas são influenciadas pela forma como as imagens as fazem sentir. Na verdade, provavelmente você já reparou que seus sites e marcas favoritos usam imagens para cativar e motivar seus usuários. Afinal, uma imagem vale mais que mil palavras… certo? Portanto, a hero image certa pode valer milhões de dólares!

Isso é especialmente verdadeiro para empresas modernas, que usam esse tipo de imagem para converter leads em clientes. Mas como isso acontece?

Uma imagem, seja uma única imagem ou uma série de hero images, ajuda você a transmitir sua mensagem e o conceito geral da marca. Mas por que transmitir sua mensagem por meio de uma imagem é importante? Simples: isso ajuda a influenciar como alguém se sente em relação à sua marca. Pode fazer com que a pessoa se sinta empolgada, confiante, irritada ou feliz.

Por isso, vamos falar sobre hero images. Vamos ver alguns fatos sobre hero images que é bom saber, noções sobre conversão por imagens e até alguns exemplos. Vamos mergulhar em como você pode persuadir usuários com apenas uma imagem.

Antes de nos aprofundarmos muito nas coisas boas, vamos voltar ao básico e explicar o que é, de fato, uma hero image.

Simplificando, uma hero image é a grande foto ou elemento gráfico que alguns sites usam no topo da página. Mais formalmente, é uma grande imagem promocional localizada acima da dobra (a parte superior da página) usada para atrair a atenção do visitante.

A boa notícia é que ela é bastante fácil de implementar no design do seu site. Você pode adicionar um pouco de HTML ou CSS à sua página para produzir uma imagem responsiva. Você também pode usar uma hero image do Bootstrap, em que você cria uma grande caixa, um cabeçalho de página ou um 'jumbotron' que exibe conteúdo especial.

Muitas vezes essas hero images contêm texto, CTAs ou são compostas por uma série de imagens. Mas essas adições frequentemente apresentam problemas para o design web responsivo. Felizmente, existem maneiras de contornar isso, o que significa que criar uma hero image responsiva é possível para empresas de todos os tamanhos.

Uma imagem responsiva é uma imagem que pode ser exibida adequadamente em vários ecrãs e em diferentes plataformas. Isto pode envolver a substituição de uma imagem por outra adequada ao dispositivo, ou a alteração do texto ou das sobreposições para que se ajustem corretamente a cada caso de uso.

Portanto, uma imagem de destaque responsiva é simplesmente a imagem principal do site, otimizada para se adaptar a uma variedade de condições de visualização.

Agora que você entende o que é uma hero image, vamos falar sobre algumas melhores práticas e requisitos para elas.

Pense nisso como uma landing page… Está lá para cumprir uma função: transmitir sua mensagem e atrair novos leads. Isso também pode aumentar o reconhecimento da sua marca e potencialmente ser o que as pessoas comentarão ao mencionar sua marca.

Então, aqui vão algumas dicas importantes a considerar ao configurar sua hero image:

As pessoas respondem e se lembram das coisas de maneira muito mais significativa quando há emoção envolvida. Isso não significa que você precise exagerar, mas se conseguir inserir algo sutil que faça as pessoas se sentirem bem ou que provoque uma emoção intensa, sua imagem principal terá impacto.

Sua imagem principal pode reforçar qualquer emoção ou sensação que você esteja tentando transmitir.

Pampers, uma marca popular de fraldas, usa o famoso cantor John Legend e captura um momento autêntico de um pai ou de uma mãe (a expressão que você faz ao trocar uma fralda suja). Isso confere mais credibilidade à marca. Saber que alguém famoso escolhe a Pampers e troca fraldas torna a marca mais atraente.

Além disso, dá para realmente sentir o momento capturado, o que facilita a identificação da maioria dos pais.

Sabe o que é confuso? Chegar a um site e ver uma imagem que não tem nada a ver com o que eles vendem. Isso meio que faz você questionar se digitou o endereço certo, não é?

Sua imagem principal precisa estar ligada ao que você faz. Se você vende guloseimas gourmet para cães, por exemplo, não precisa necessariamente mostrar as guloseimas, mas pode mostrar algo relacionado a cães. Isso pode ser um cachorro pulando na praia, um cachorro devorando uma grande tigela de comida ou até mesmo um cachorro sentado. Sua imagem precisa se relacionar com o seu negócio, ponto final.

Barkbox mostra seu tipo de cliente favorito junto com o produto. Eles também deixam tudo mais atraente usando cores vibrantes.

Você já entrou em um site que usa imagens pixeladas? Como você se sentiu? A maioria das pessoas perde a confiança na qualidade do produto ou serviço que poderia receber quando a primeira coisa que veem, como potenciais clientes, é um site de baixa qualidade com uma grande imagem de destaque mal colocada.

Se você usar fotos de alta qualidade, com resoluções adequadas aos dispositivos em que serão exibidas, isso pode causar uma boa primeira impressão.

Imagine que você entrou em um site que vende artigos de praia. Se eles tentassem esticar uma imagem para ajustá-la, ela ficaria borrada e pixelizada. Se usarem uma imagem de tamanho adequado, como a da direita, o resultado ficaria muito melhor.

Se você for usar uma chamada para ação (CTA), ela precisa se destacar. Ao mesmo tempo, não deve roubar a cena. Então encontre um equilíbrio entre os dois que funcione.

Algumas coisas a considerar são a cor e a localização. Você não quer que a cor seja ofuscada pela imagem ao redor. Também não quer colocar o botão de CTA perto de outros botões (como itens do menu ou menus suspensos).

Você pode fazer um teste rápido: borrando a imagem para ver se o botão é perceptível o suficiente. Se o seu olhar captar onde está o botão, você acertou!

Considere a hero image da Sock Fancy’s referral landing. A imagem tem cores marcantes; eles posicionaram o CTA a uma distância suficiente da barra de menu e usaram um bom botão preto para destacá-lo do restante da imagem.

Quando fazemos o teste de desfoque, a imagem se destaca e o seu olhar é atraído por ela. Você repara mais na imagem e no botão. No entanto, o botão não parece excessivamente dominante.

Você pode, essencialmente, usar qualquer coisa que quiser como sua imagem principal. Mas, se você usar pessoas, um cliente pode se enxergar na mesma posição.

Ao usar pessoas, o cliente pode sentir uma conexão e, assim, sentir-se mais ligado à sua marca. Evite ser genérico demais. Uma foto excessivamente encenada não tem o mesmo impacto. Em vez disso, opte por fotografias de pessoas que realmente correspondam ao seu público-alvo. 

Sites como Pikwizard oferecem uma excelente variedade de imagens de stock que evitam as fotos encenadas do passado e, em vez disso, oferecem imagens com as quais as pessoas se identificam.

A Acer optou por mostrar uma variedade de utilizadores em diferentes situações, o que demonstra que se trata de um produto destinado a qualquer pessoa.

Mas, se sessões fotográficas como estas não couberem no seu orçamento, opte por imagens neutras de banco de imagens que retratem pessoas do dia a dia com as quais os utilizadores possam identificar-se.

Esperar não é divertido, e as pessoas têm um tempo de atenção muito curto; por isso, a velocidade de carregamento é imprescindível para manter os usuários engajados.  Estudos recentes mostram que você tem 7 segundos para captar a atenção de alguém. Todos nós já passamos por isso, esperando uma página carregar e seguindo em frente antes mesmo de piscarmos.

Faça alguns testes para garantir que sua página carregue rapidamente. A última coisa que você quer é que alguém abandone o site porque as imagens não carregam.

Pense na sua estratégia de SEO: o tamanho da imagem e a velocidade de carregamento fazem parte disso!

Parte de ter uma imagem hero responsiva é garantir que você leve em conta todos os diferentes tamanhos de tela que podem ser usados para visualizá-la.

Otimizar para todos os dispositivos é essencial e ajudará a manter sua imagem consistente para todos os usuários. Existem muitas ferramentas que você pode usar, como um gerador de breakpoints de imagem responsiva. Isso verificará sua imagem em uma variedade de tamanhos de tela para que você possa escolher o tamanho mais adequado.

Ou você pode usar um software de design gráfico que ajude a criar conteúdo para vários dispositivos. Você pode acabar cortando a imagem ou usando uma versão diferente da imagem principal (hero) para se adequar a dispositivos com telas menores, como smartphones.

Dê uma olhada no Gold’s Gym. Eles têm uma grande imagem em destaque que mostra quatro pessoas diferentes, juntamente com a promessa da marca. Mas isso não caberia em um dispositivo menor; o texto não seria legível.

Então, eles fizeram uma versão para celular para resolver esse problema. Como você pode ver, a mensagem continua clara — eles a combinaram com uma versão recortada da imagem existente. Você verá o mesmo cara, a mesma promessa e uma imagem ligeiramente diferente. Ainda assim, transmite a mesma ideia.

Às vezes, mudar a sua imagem principal para combinar com a estação, ou com um feriado específico, pode gerar interesse e empolgação nos usuários. Também pode despertar ideias e incentivá-los a comprar um item que você possa exibir nessa ocasião.

A Build A Bear altera sua imagem principal com bastante frequência e, cada vez que o faz, mostra o ursinho de pelúcia perfeito para a ocasião ou feriado.

Neste caso, ela usa um ursinho vestido com uma 't-shirt tux' e algumas flores para simbolizar o feriado que se aproxima – o Dia dos Namorados. Ela também brinca com as palavras, deixando claro que ainda há bastante tempo para conseguir um urso igual a este para o seu próprio valentim.

Usar um tema ou feriado também é uma ótima maneira de aumentar seu marketing de boca a boca!

Este é opcional, mas existe uma maneira correta de fazer isso. As próprias imagens não devem conter texto. Em vez disso, você deve usar HTML e CSS para sobrepor o texto às imagens.

Muitos sites simplesmente substituem a imagem e deixam o código do texto como está. Isso exige que você use constantemente imagens que se alinhem bem ao posicionamento do texto. Mas se você não troca as hero images com tanta frequência, isso pode funcionar muito bem.

Ao posicionar seu texto dessa forma, você permite que a imagem seja mais responsiva, o que é ideal, especialmente quando os usuários acessam seu site por diferentes canais.

A imagem principal atual da Sephora apresenta uma variedade de produtos novos e recém-chegados. Se reparar, verá que também utilizam uma variedade de textos. Para conseguir isso, adivinhou — fizeram uma sobreposição de texto!

Existe um tamanho geral de hero image com o qual você deveria trabalhar? Bem: se você quer um site otimizado, então sim.

Você quer que a imagem seja grande o suficiente para se ajustar a qualquer tamanho de tela, mas pequena o bastante para não prejudicar a velocidade de carregamento da página.  Portanto, é preciso usar as dimensões corretas e encontrar o ponto ideal entre resolução e tamanho.

Há algumas dimensões que você pode usar como guia geral (já mencionamos algumas). Elas são o tamanho do arquivo, a resolução e, claro, o tamanho da imagem.

Muitos computadores têm uma resolução mínima de 1024 x 768 pixels. Você vai querer que sua hero image seja um pouco maior do que isso, em torno de 1600 x 500 pixels. No entanto, você pode reduzi-la se estiver trabalhando com telas menores (como um telefone ou tablet).

O tamanho da imagem hero para WordPress vai variar conforme o dispositivo, como em qualquer outro site. Deve-se usar um arquivo menor para dispositivos móveis, enquanto, em telas maiores, recomenda-se uma imagem de até 2880 px. Com o CSS certo, você pode usar uma variedade de tamanhos de imagem para diferentes dispositivos. Você pode optar por deixar o navegador redimensionar as imagens automaticamente, e muitas empresas fazem isso. O problema é que isso pode prejudicar a nitidez e a velocidade de carregamento. Mas isso pode não ser um grande problema; considere que a internet está cada vez mais rápida.

Você vai querer uma imagem relativamente grande e de alta resolução (algo acima de 2000 px). O truque é comprimir a imagem até que seu tamanho fique cerca de 70% menor. Você pode reduzir o tamanho do arquivo sem comprometer a integridade e a qualidade da imagem.

É sempre melhor começar com uma imagem de 2.000 px de largura. Além disso, o criador de sites da Limecube não exige que você otimize a imagem, já que a plataforma faz isso por você, convertendo as imagens de banner para WebP e acelerando o carregamento da página. As imagens também são redimensionadas automaticamente para diferentes dispositivos.

Felizmente, existem muitos compactadores de imagem gratuitos por aí, então pegue suas imagens grandes e comprima-as para obtenção da otimização máxima.

Para ser mais exato, você vai querer verificar o seu tema do Shopify para obter informações sobre os tamanhos de imagem.

Agora que você já entendeu o conceito de imagem principal, vamos rever algumas inspirações. Aqui estão algumas das nossas favoritas!

A imagem principal focada apenas no produto – exibe somente o produto.

A imagem principal emocional – retrata emoções intensas.

Uma imagem principal ilustrativa – usa ilustração para transmitir a mensagem.

Vamos rever algumas imagens principais para mobile, já que estamos nisso. Todas elas têm o mesmo impacto, adaptadas para um tamanho menor.

Focado no CTA – o principal motor desta imagem é o próprio CTA.

Imagem do produto centralizada – a imagem principal fica espaçada entre o menu e o texto.  

Uso de vídeo – algumas imagens principais são substituídas por um vídeo promocional.

O que temos visto é que muitas imagens individuais estão sendo usadas. Às vezes, porém, uma marca usa uma colagem ou galeria de fotos como sua imagem principal.

Por exemplo, a Overtone usa imagens para mostrar seu novo produto junto com usuários reais.

Há também empresas que usam um carrossel de imagens ou uma galeria que gira as imagens para oferecer ainda mais efeitos visuais ao usuário. Isso pode ser percebido pelas setas localizadas de cada lado da imagem, assim como pelos pontos na parte inferior.

Onde você consegue imagens para usar? Em muitos casos, você pode criar seu próprio conteúdo. Às vezes, você pode até usar conteúdo gerado por usuários. Mas se quiser tentar a sorte com fotos gratuitas de bancos de imagens, você tem muitas opções.

Muitos sites de imagens gratuitos oferecem imagens isentas de royalties que você pode usar no seu site. Em muitos casos, você pode encontrar fotos realmente boas que você pode tornar únicas para o seu negócio.

Alguns sites muito populares incluem…

Pikwizard – É gratuito e oferece mais de 1.000.000 de fotos. Você pode até obter vetores e ilustrações gratuitos.

Design Wizard – Há uma opção gratuita, mas é possível fazer um upgrade para obter ainda mais conteúdo. Existem muitas imagens gratuitas e opções de edição nesta ferramenta. Vale a pena conferir.

Não precisa ser difícil: como você pode ver, há muitas opções por aí para criar a imagem de destaque ideal para o seu site. Apenas certifique-se de considerar o tamanho da tela e o tempo de carregamento; o resto virá facilmente.