Você vai tocar em Contato. A foto termina de carregar, empurra o botão e o dedo cai em outro lugar. Esse salto pode acontecer quando a página ainda não sabe quanto espaço a imagem ocupa.
Comece pela proporção da foto. O navegador pode reservar a altura certa antes de receber o arquivo, inclusive quando a imagem encolhe para caber no celular.
Informe as duas dimensões da imagem
O padrão HTML usa os atributos width e height de uma imagem como indicação de proporção. Com essa informação, o navegador consegue calcular o espaço antes do carregamento. Use dimensões que correspondam ao arquivo.
No estilo responsivo, a imagem pode acompanhar a largura disponível e deixar a altura automática. Uma foto retangular continua com a mesma proporção mesmo quando a página fica mais estreita.
Confira se a versão de celular tem outro recorte
Se os arquivos menores são apenas reduções da mesma foto, mantenha a proporção entre as variantes. Quando o celular recebe um recorte mais alto, o espaço reservado também precisa seguir aquele formato.
A orientação do web.dev mostra como declarar dimensões nas fontes do elemento picture quando a página troca a proporção por largura de tela.
Referências: [2]
Observe o botão enquanto o arquivo chega
Faça a conferência numa prévia. No navegador, reduza a velocidade da rede e recarregue a página.
- Observe onde o botão aparece antes de a foto terminar de carregar.
- Compare a posição depois do carregamento.
- Repita em celular e desktop, especialmente se a página usar imagens diferentes.
- Se ainda houver salto, observe outros elementos carregados depois, como fontes e conteúdo inserido acima do botão.
Minha recomendação para uma página de contato
Eu começaria pela área que contém a primeira ação importante. Se o visitante precisa esperar a foto para conseguir tocar com segurança, a página perde previsibilidade justamente na hora do contato.
Reserve o espaço e teste de novo. Depois avalie o tamanho do arquivo e a prioridade de carregamento como decisões próprias.
Fontes e referências
Referências consultadas em 04 nov. 2026. Recursos e condições podem mudar.
Conteúdo produzido com apoio de inteligência artificial e aprovado para publicação. Os exemplos são ilustrativos; não representam testes próprios ou resultados de clientes. Conheça a política editorial.
