Em resumo
Uma página não tem uma imagem, mas cinco ou seis espaços com exigências diferentes. O primeiro bloco precisa de espaço para o título e baixo peso; o bloco do produto, de uma cena concreta; o de confiança, de pessoas; o fundo, de uma superfície calma; e a prévia do link, de uma imagem horizontal própria. Não se escolhe tudo do mesmo modo: cada espaço tem tamanho, proporção e custo de erro específicos.
Uma landing page costuma nascer assim: encontra-se uma imagem impactante para o primeiro bloco, e o resto é preenchido com “algo parecido”. Um mês depois, parece uma colagem, carrega devagar e vira um retângulo cinza no mensageiro. Vamos separar os espaços da página e entender o que cada um pede.
Uma página típica tem seis espaços, cada um com exigências diferentes.
Quais espaços de uma página precisam de imagem?
Normalmente são seis, e não são intercambiáveis.
- Primeiro bloco. A imagem mais cara da página: todos a veem, ela define o tom e quase sempre é o elemento mais pesado.
- Bloco do produto. Mostra o objeto ou interface. Exige honestidade: o leitor compara a promessa com o que vê.
- Bloco de confiança. Pessoas, equipe, processo e clientes. Funciona pelo reconhecimento, não pela beleza.
- Fundos e divisores. Superfícies calmas entre blocos; sua função é não atrapalhar.
- Cards em listas. Imagens pequenas que precisam ser entendidas no tamanho de uma moeda.
- Prévia do link. O que aparece no mensageiro ou na rede social antes da própria página.
Como deve ser a imagem do primeiro bloco?
Calma nas bordas e leve no arquivo. O primeiro bloco costuma conter o maior elemento da página, usado para medir Largest Contentful Paint. O Google recomenda manter essa métrica em até 2,5 segundos no 75º percentil dos carregamentos (web.dev). Uma imagem pesada é a maneira mais comum de ultrapassar esse limite.
Requisitos práticos:
- Espaço para o título. Uma área uniforme, sem detalhes importantes, para texto e botão.
- Composição simples. Um centro de sentido; uma cena complexa compete com o título e enfraquece ambos.
- Tolerância ao recorte. No celular, resta o centro da imagem horizontal, e o protagonista deve continuar nele.
- Facilidade de compressão. Gradientes suaves e poucos detalhes pesam muito menos que cenas carregadas com a mesma qualidade.
Imagem em largura total ou em uma coluna?
As duas soluções funcionam; escolha conforme o mais importante no bloco: atmosfera ou explicação.
Imagem em largura total
Cria atmosfera e dá aparência mais sofisticada. Precisa de margem: no monitor largo aparece o centro; no celular, um centro ainda mais estreito. Tolera mal detalhes pequenos e texto dentro da cena. Pesa mais e quase sempre entra na medição da velocidade.
Imagem em uma coluna
Fica ao lado do texto e o explica. A proporção é estável, o recorte previsível e o peso menor. Aceita detalhes porque é vista de perto. Não cria o mesmo impacto, mas não atrapalha a leitura e pode ser substituída sem refazer o bloco.
O que usar nos blocos de produto, serviço e confiança?
Neles, a imagem responde “o que recebo?” e “em quem posso confiar?”. A abstração funciona pior que algo concreto.
MockupsMockups e cenas de produto mostram aplicativos, embalagens e materiais impressos como se já existissem.
Trabalho, negociações e equipes atendem ao bloco “sobre nós” e às páginas de serviços.
Ambientes e espaços profissionais ajudam quando o serviço acontece offline, de estúdios a clínicas.
Para uma imobiliária, use a categoria de imóveis. Para divisores e fundos, superfícies abstratas não competem com o texto e aceitam ajuste de cor. Para listas de benefícios, é mais simples usar ícones do que redesenhá-los.
Como preparar o arquivo sem deixar a página pesada?
O processo é o mesmo em qualquer espaço.
Recorte para o espaço
Primeiro faça o recorte na proporção do bloco. Uma imagem recortada pelo navegador ainda é baixada inteira: você paga por pixels que ninguém verá.
Defina o tamanho real
A largura deve corresponder à largura de exibição, com margem para telas de densidade dupla, e não ter “quatro mil pixels por garantia”.
Comprima e compare
Salve em formato moderno e compare com o original no tamanho de exibição. Uma diferença invisível nesse tamanho representa economia pura.
Adie as imagens inferiores
Tudo abaixo do primeiro bloco pode carregar sob demanda. A imagem inicial, ao contrário, não deve ter carregamento tardio: isso atrasaria a principal métrica da página.
Verifique no celular
Abra a página em uma tela móvel e confira o que sobrou de cada imagem após o recorte e quanto tempo o primeiro bloco levou.
O que aparece na prévia do link?
Uma imagem separada, definida pela tag og:image. A Meta recomenda no mínimo 1200 × 630 pixels; o mínimo permitido é 200 × 200, o arquivo deve ter até 8 MB e a proporção deve ficar próxima de 1.91:1 para evitar recortes (documentação da Meta para desenvolvedores). Abaixo de 600 × 315, ela aparece como um quadrado pequeno ao lado do link — o “retângulo cinza” que estraga o compartilhamento.
O que escrever no alt?
Descreva o que aparece, de modo curto e objetivo. Leitores de tela e robôs de busca leem o alt; o Google recomenda texto descritivo, não uma lista de palavras-chave, e informa que nomes de arquivo e legendas relevantes também ajudam (Google Search Central).
Regra prática: descreva por telefone para alguém que tomará uma decisão. “Barista prepara café atrás do balcão” é melhor que “café, cafeteria, barista, expresso, comprar café”.
Como montar um conjunto para a página, e não uma coleção de achados?
Olhe a página inteira. As imagens devem combinar em temperatura de luz, ponto de vista e densidade de detalhes. Isso é mais fácil quando vêm do mesmo briefing ou categoria, pois a linguagem comum já está prevista.
O artigo como escolher uma imagem de IA para seu projeto explica como avaliar cada cena. Se a página virar posts, veja imagens para redes sociais; se receber tráfego pago, leia criativos para anúncios.
Pontos principais
- Uma página tem seis espaços de imagem com exigências diferentes.
- A imagem inicial quase sempre determina a velocidade: não deve carregar tarde nem ser grande “por garantia”.
- A proporção vem do espaço, não do original: recorte antes de enviar, não no navegador.
- Escolha a prévia do link separadamente, conforme as exigências da plataforma.
- O alt descreve o conteúdo; fundos decorativos ficam sem descrição.
Quantas imagens uma landing page precisa?
Tantas quantos forem os blocos que precisam mostrar algo, geralmente de quatro a oito. Uma imagem sem função é peso e ruído; um bloco sem imagem quando o leitor precisa ver o objeto perde a explicação.
Posso usar a mesma imagem no primeiro bloco e na prévia?
Sim, se ela resistir às duas proporções e continuar clara em tamanho pequeno. Em geral, duas imagens da mesma série funcionam melhor porque a prévia tem outra escala.
Qual deve ser a largura da imagem inicial?
A largura do espaço multiplicada pela densidade da tela, e não mais. Não há número universal: uma coluna de 720 pixels e uma imagem em largura total pedem respostas diferentes.
O que fazer se a imagem for bonita, mas carregada?
Use-a onde não haja texto sobreposto: produto, galeria ou divisor. O primeiro bloco precisa de uma área sem detalhes, seja em outra imagem, seja em uma versão mais calma da mesma narrativa.
As imagens da página precisam de legenda?
Quando trazem dados ou exigem explicação, sim: diagramas, comparações e interfaces. Uma ilustração decorativa não precisa; a legenda roubaria atenção do título.
Como saber se as imagens deixam a página lenta?
Meça quando o maior elemento aparece em uma conexão móvel e identifique-o. Se for a imagem inicial, comece por ela, não pelos scripts.
Como substituir a foto se o produto ainda não existe?
Use um mockup ou ilustração do processo. Mostrar um produto inexistente em uma cena fotorrealista é arriscado: uma promessa diferente da realidade custa mais que a ausência da imagem.
