Uma imagem grande pode dominar a percepção de velocidade de uma página. Ela pode ser o elemento LCP, ocupar boa parte da tela inicial e deslocar o texto quando o arquivo termina de carregar. A escolha do componente e dos atributos deve partir do papel da imagem no layout, não de uma regra única para todos os arquivos.

Reserve o espaço antes do download

O navegador calcula o espaço de uma imagem quando conhece suas dimensões ou proporção. Sem essa informação, o texto pode ocupar a área e ser empurrado quando a imagem aparece. Esse deslocamento aumenta o CLS e atrapalha a leitura. Use width e height para informar a proporção intrínseca, ou defina uma caixa responsiva com aspect-ratio quando a imagem preenche um contêiner.

Com o componente Image do Next.js, declare sizes quando a largura visual muda entre breakpoints. Esse valor ajuda o navegador a escolher uma variante do srcset adequada ao espaço disponível. Sem uma descrição coerente, um telefone pode baixar um arquivo maior do que a caixa exige. Compare as dimensões renderizadas com os recursos transferidos na aba de rede.

Priorize apenas o que aparece no primeiro quadro

Se a imagem principal é o maior elemento visível no carregamento inicial, pode fazer sentido antecipar sua descoberta ou indicar prioridade alta. Em Next.js 16, a propriedade priority foi substituída por preload. A documentação também recomenda avaliar loading="eager" ou fetchPriority="high", conforme o caso. Essa propriedade não é atalho para deixar todas as imagens rápidas.

Precarregar muitas imagens compete por largura de banda e pode atrasar o elemento que determina o LCP. Imagens abaixo da dobra costumam funcionar melhor com carregamento preguiçoso. Identifique o elemento LCP em dispositivos e larguras diferentes; em alguns layouts, a imagem de destaque vira texto ou muda de posição no celular.

Entregue um arquivo do tamanho certo

A origem precisa ter qualidade suficiente para o maior tamanho de exibição, mas enviar sempre a imagem original transfere bytes desnecessários. Um pipeline de otimização pode gerar formatos modernos e dimensões menores, desde que o servidor permita a origem e o cache esteja configurado. Para imagens remotas, valide domínios aceitos e evite aceitar qualquer endereço vindo de conteúdo editorial.

A compressão deve ser conferida visualmente. Qualidade muito alta pode aumentar o arquivo sem diferença perceptível; compressão agressiva cria halos e torna texto dentro da imagem ilegível. Gere variantes para os tamanhos usados de fato e observe peso, formato e nitidez em telas de alta densidade.

Meça no contexto da página

Um relatório de laboratório ajuda a encontrar regressões, mas a experiência de campo depende da conexão, do aparelho e do conteúdo real. Confira LCP, CLS e INP da rota em uma sessão com cache frio e em outra recorrente. Redimensione a janela para testar a seleção de variante e use uma conexão limitada para observar se o layout permanece estável.

Não confunda uma nota agregada com a causa do problema. Se o LCP está alto, verifique quando o recurso foi descoberto, quanto levou para transferir e quanto bloqueou a renderização. Se o CLS sobe, localize a mudança de posição e confira se os elementos tinham espaço reservado. Corrija o elemento identificado e meça novamente na mesma condição.

Next.js: componente Image · web.dev: Largest Contentful Paint