Imagem hero de site — o tamanho certo
Solte sua foto de cabeçalho — o everyimg a recorta para 1920 × 1080 px (16:9), converte para WebP e comprime abaixo de 200 KB. Nítida no computador, rápida no celular.
Solte imagens aqui ou clique para escolher
A imagem hero é a velocidade da sua página
O Google mede o Largest Contentful Paint (LCP) — quanto tempo até o maior elemento do primeiro viewport ser renderizado. Na maioria dos sites, esse elemento é a imagem hero. O limite do Google para “bom” é 2,5 segundos; uma única foto não otimizada de 4–8 MB estoura isso sozinha. Isso prejudica o ranking e custa visitantes: a maioria abandona páginas que levam mais de cerca de 3 segundos para carregar.
Os números que funcionam
- 1920 px de largura — cobre telas de computador Full-HD 1:1. Vá para 2560 px só se sua análise mostrar uma fatia significativa de telas maiores.
- Formato WebP — 25–35% menor que JPG com qualidade visível idêntica, suportado por todos os navegadores atuais.
- Abaixo de 200 KB — realista para quase qualquer foto de 1920 px em WebP sem perda visível.
Retina, celular e a armadilha do “ficou borrado”
Um hero de 1920 px exibido em largura total fica nítido em telas padrão e aceitável em telas Retina (que teoricamente quereriam 2× de pixels — mas em fotos grandes a diferença mal aparece, e dobrar os pixels quadruplica o peso). O que realmente causa heros borrados é enviar imagens menores que a largura de exibição, que o navegador então amplia. O everyimg avisa quando o seu original é pequeno demais em vez de esticá-lo silenciosamente.
Perguntas frequentes
Qual deve ser o tamanho de uma imagem hero de site?
1920 px de largura (16:9, ou seja 1920 × 1080 px) cobre com nitidez as telas de computador padrão. Para layouts muito grandes, 2560 px é o máximo sensato — mais largo não ajuda ninguém e deixa a página lenta.
Quanto a imagem hero deve pesar em KB?
Abaixo de 200 KB é um bom alvo para WebP, abaixo de 500 KB o máximo absoluto. A imagem hero costuma ser o maior elemento da página e determina diretamente sua nota de Core Web Vitals do Google (LCP).
Por que minha imagem de cabeçalho deixa meu site lento?
Porque quase sempre é o elemento LCP — a maior coisa no primeiro viewport. Uma foto de celular de 4 MB como hero adiciona segundos ao tempo de carga. Redimensione para 1920 px, converta para WebP, mantenha abaixo de 200 KB e o problema some.
Qual proporção para uma imagem hero?
Não há resposta universal — depende do seu tema. 16:9 é o ponto de partida mais seguro; muitos temas recortam em banners de aprox. 2:1 ou 3:1. Verifique o que o seu tema mostra e recorte nessa proporção antes de enviar, para controlar o que é cortado.