Pega em qualquer website que te perdeu nos primeiros segundos e volta ao topo. É provável que as imagens tenham tido que ver com isso. Uma fotografia de banco de imagens de desconhecidos sorridentes que não se parecem nada com as pessoas que este negócio realmente serve. Uma imagem principal tão vaga que podia pertencer a qualquer empresa de qualquer setor. Ou nenhuma imagem, deixando a página com ar vazio e inacabado. As imagens num website não são decoração. São comunicação. Este artigo explica o que as imagens de um website realmente fazem, como escolher as certas, onde devem ficar em cada página e o que acontece quando erras.
Os visitantes processam imagens mais depressa do que palavras. Antes de alguém ler o teu título, o cérebro já formou uma primeira impressão a partir do visual. Isso significa que as tuas imagens estão a fazer um argumento sobre o teu negócio antes de tu o poderes fazer. A questão é se esse argumento é o que queres fazer.
O que fazem realmente as imagens de um website?
Cada imagem do teu site diz alguma coisa ao visitante. A imagem principal da tua página inicial diz "este é o tipo de negócio que somos e é para estas pessoas que trabalhamos". A fotografia da tua página sobre nós diz "aqui há pessoas reais". A fotografia do produto na tua página de serviços diz "isto é o que recebes quando trabalhas connosco".
Quando esses sinais são claros e relevantes, os visitantes sentem-se orientados. Quando são vagos ou genéricos, os visitantes não sentem nada, que é o pior resultado. Um visitante que não sente nada não tem motivo para continuar a ler.
As imagens também guiam para onde vai o olhar. Este é o centro da hierarquia visual de uma página. Uma imagem bem colocada puxa a atenção para a secção que importa. Uma mal colocada divide a atenção, deixando o visitante sem saber para onde olhar a seguir. Cada imagem deve ganhar a sua posição ajudando o visitante a seguir na direção certa.
Fotografias reais ou de banco de imagens: importa?
Sim. Mais do que a maioria das pessoas espera.
Os visitantes são melhores a detetar fotografias de banco de imagens do que eram há cinco anos. A sala de reuniões perfeitamente iluminada com quatro profissionais a acenar para um portátil. O aperto de mão em frente a uma paisagem urbana. A mulher sorridente a segurar uma chávena de café. Estas imagens são tão comuns que os visitantes desenvolveram uma espécie de imunidade visual a elas. Veem-nas e não registam nada.
As fotografias reais fazem o contrário. Uma fotografia da tua loja a sério, da tua equipa a sério, do teu trabalho concluído a sério. Estas imagens são específicas de ti e só de ti. Um visitante que as vê obtém prova de que existe um negócio real por trás do website, que é uma das coisas mais valiosas que uma imagem pode comunicar. Mesmo uma fotografia de telemóvel tirada com boa luz é muitas vezes mais eficaz do que uma imagem de banco de imagens polida, porque é real.
Dito isto, as fotografias de banco de imagens têm o seu lugar. Para artigos de blogue, para ilustrar conceitos abstratos, para preencher espaços de imagem secundários onde a especificidade importa menos, uma fotografia de banco de imagens bem escolhida cumpre. A regra é: usa fotografias reais onde a confiança está em jogo e usa fotografias de banco de imagens onde a imagem apenas apoia o conteúdo em vez de fazer uma afirmação sobre o teu negócio.
Como escolher a imagem certa para cada página?
Antes de procurares uma imagem, pergunta que função ela tem de cumprir nessa página específica.
Na tua página inicial, a imagem principal tem de comunicar o que fazes e para quem, antes de alguém ler uma palavra. Se um visitante pudesse olhar só para a tua imagem principal e não fazer ideia do teu setor, a imagem não está a fazer o seu trabalho.
Na tua página sobre nós, a imagem tem de ser pessoal. Mostra as pessoas. Mostra o espaço. Mostra algo que faça o negócio parecer humano e específico em vez de corporativo e anónimo.
Numa página de serviços ou de produto, mostra o resultado. Um antes e depois para um negócio de remodelações. Uma captura de ecrã do painel para uma ferramenta de software. Uma fotografia do prato final para uma empresa de catering. As imagens de resultado são mais persuasivas do que as imagens de processo porque respondem à pergunta que o visitante realmente faz: o que vou ter quando isto estiver feito?
Quando souberes a função, aí procuras a imagem. Nunca ao contrário.
O que faz uma imagem trabalhar contra ti?
Irrelevância
Uma imagem que não tem nada de específico a dizer sobre o teu negócio, o teu serviço ou o teu cliente diz ao visitante que ninguém pensou com cuidado na experiência visual do site. Essa impressão fica.
Desajuste
Se o teu texto é caloroso e de conversa mas as tuas imagens são frias e corporativas, a página parece inconsistente. Os visitantes notam essa dissonância mesmo sem a saberem nomear. O tom das imagens e o tom do texto têm de estar de acordo.
Carregamento lento
Imagens grandes e não comprimidas são a razão mais comum para os websites carregarem devagar. Uma página que demora mais de três segundos a carregar no telemóvel perde uma parte significativa dos visitantes antes de se ver o que quer que seja. Cada imagem que carregas deve ser comprimida para a web. A maioria das plataformas de websites trata de parte disto automaticamente, mas vale a pena saber o que estás a carregar. Vê como a velocidade do website afeta os visitantes e o posicionamento nas pesquisas para teres a imagem completa.
Texto alternativo em falta
Cada imagem do teu site precisa de uma descrição curta do que mostra, escrita no campo de texto alternativo (alt text). Isto importa por duas razões. Os visitantes que usam leitores de ecrã dependem do alt text para perceber o que a imagem contém. Os motores de busca usam o alt text para indexar imagens. Ignorá-lo é uma forma rápida de perder pontos de acessibilidade e valor de SEO.
Onde devem aparecer as imagens nas tuas páginas?
Não há uma regra universal para a colocação de imagens, mas há alguns padrões que funcionam de forma consistente.
Põe a tua imagem mais forte onde os visitantes olham primeiro. Na maioria das páginas, é a secção do topo, acima da dobra. Se um visitante faz scroll antes de se comprometer a ler, o segundo espaço de imagem, algures a meio da página, apanha-o durante o scroll. Uma terceira imagem perto do fim de uma página longa volta a envolver os visitantes que leram quase tudo.
Usa imagens para quebrar secções longas de texto, mas só quando a imagem acrescenta algo. Uma imagem que ilustra o ponto referido no parágrafo ao lado está a fazer um trabalho. Uma imagem colocada ali só porque a secção parecia demasiado longa é enchimento, e os visitantes notam.
No telemóvel, a colocação das imagens muda porque o ecrã é estreito e as imagens ficam empilhadas na vertical. Uma imagem que fica ao lado do texto no computador vai aparecer por cima ou por baixo no telemóvel. Testa como cada página fica num telemóvel e garante que a imagem continua a fazer sentido na nova posição. Isto faz parte de garantir que o teu site segue os princípios de design responsivo em todas as páginas.
Que formato de ficheiro devem ter as tuas imagens?
A versão curta:
- JPEG para fotografias. Ficheiros pequenos, alta qualidade, funciona em todo o lado.
- PNG para logótipos, ícones e tudo o que tenha fundo transparente ou texto nítido.
- WebP para ambos, se a tua plataforma o suportar. Produz ficheiros mais pequenos do que o JPEG e o PNG com o mesmo nível de qualidade. A maioria dos navegadores modernos lida com WebP sem problemas.
- SVG para ícones e ilustrações simples. Ajusta-se na perfeição a qualquer tamanho, com ficheiros minúsculos.
Quanto ao tamanho dos ficheiros, aponta para menos de 200 kilobytes nas imagens normais das páginas. As imagens principais podem chegar a cerca de 400 kilobytes. Tudo o que for maior precisa de ser comprimido antes de o carregares. Uma fotografia de cinco megabytes do telemóvel não tem lugar numa página web.
O que é o texto alternativo e porque precisa dele cada imagem?
O texto alternativo (alt text) é uma descrição escrita curta associada a uma imagem. Fica na etiqueta da imagem na página, invisível para visitantes que veem, mas lida por leitores de ecrã e motores de busca. Ambos precisam dele para perceber o que as tuas imagens contêm.
Na acessibilidade, o alt text é a forma como os visitantes que usam leitores de ecrã vivem as imagens do teu site. Sem ele, esses visitantes não ouvem nada quando a imagem carrega, o que deixa uma lacuna no que pretendias comunicar. No SEO, os motores de busca não conseguem ver as imagens como as pessoas. O alt text é como percebem o que uma imagem mostra e se é relevante para a página que apoia.
Escrever bem o alt text é descrever o que está realmente na imagem, de forma concreta e simples. Uma fotografia de uma remodelação de cozinha concluída recebe um alt text como "cozinha branca estilo shaker com bancadas de mármore depois da remodelação" e não "foto da cozinha" ou "imagem1". Se a tua palavra-chave couber com naturalidade na descrição, inclui-a. Mas escreve primeiro para descrever. O alt text que só existe para repetir palavras-chave falha as duas funções.
Cada imagem que carregas deve ter alt text escrito antes de a página ir para o ar. Demora menos de um minuto por imagem e afeta quem pode aceder ao teu conteúdo e como as tuas páginas se posicionam.
Como o WEMASY trata das imagens
O criador de websites do WEMASY inclui blocos de imagem que podes acrescentar a qualquer secção de uma página. Carregas diretamente no criador, posicionas e redimensionas sem tocar em código e acrescentas o alt text no mesmo passo. As imagens são servidas automaticamente de forma responsiva, por isso ajustam-se a todos os tamanhos de ecrã sem precisares de criar versões separadas para computador e telemóvel.
As secções de página do WEMASY suportam imagens ao lado de texto em layouts de colunas flexíveis, ou como fundos de largura total para secções em que um visual forte define o tom. Seja como for, a imagem fica ligada ao conteúdo que apoia em vez de flutuar solta no layout.
Vê o que está incluído no criador de websites do WEMASY ou consulta os planos na página de preços.
Perguntas frequentes sobre imagens de websites
Preciso de fotografias profissionais para o meu website?
As fotografias profissionais fazem uma diferença real nas páginas principais, em especial na página inicial e na página sobre nós, onde a confiança se forma. Para imagens secundárias, artigos de blogue e elementos visuais de apoio, uma fotografia bem iluminada tirada com um telemóvel moderno funciona bem. A prioridade é que a imagem seja real e relevante para o teu negócio, não que tenha sido tirada por um profissional. Com o criador de websites do WEMASY, podes configurar isto diretamente no teu website.
Quantas imagens deve ter uma página inicial?
Quantas forem precisas para apoiar as secções, sem tantas que a página pareça sobrecarregada ou carregue devagar. Uma imagem principal forte, uma ou duas imagens no corpo da página e, opcionalmente, uma fotografia da equipa ou do espaço de trabalho mais abaixo é uma estrutura razoável para a maioria das páginas iniciais de pequenos negócios. Cada imagem deve ganhar o seu lugar em vez de preencher espaço.
Posso usar imagens de sites de bancos de imagens no meu website?
Sim, com algumas condições. Os sites de bancos de imagens oferecem imagens com licenças que permitem uso comercial, mas verifica os termos de cada imagem antes de a usares. A limitação prática é que estas imagens aparecem em muitos outros sites, por isso usa-as em espaços de imagem de apoio e secundários e não como visual principal em páginas de grande confiança, como a página inicial ou a página sobre nós.
Que tamanho devem ter as imagens que carrego no meu website?
Comprime antes de carregar. Aponta para menos de 200 kilobytes na maioria das imagens das páginas e menos de 400 kilobytes nas imagens principais. Usa JPEG para fotografias, PNG para logótipos e imagens transparentes e WebP se a tua plataforma o suportar. Redimensiona sempre a imagem para a largura máxima a que vai ser mostrada antes de a carregares, em vez de deixares o navegador reduzi-la.
As imagens afetam o posicionamento do meu website nas pesquisas?
Sim, de duas formas. As imagens grandes e não comprimidas tornam a página mais lenta, e os motores de busca têm isso em conta no posicionamento. As imagens sem alt text perdem a oportunidade de dizer aos motores de busca o que a página contém. Imagens com o tamanho certo e alt text descritivo contribuem tanto para a velocidade da página como para a visibilidade nas pesquisas.