[Pular para o conteúdo principal](#main-content) [![Logo Bendev](/images/logo-branco.png)](/) - [Trabalhos](/projetos) - [Sobre](/sobre) - [Escrita](/blog) - [Aprendizado](/learning) - [Referência](/reference) - [Imprensa](/entrevistas) - [Contato](/contato) PTENES Série técnica em coautoria [Next.js](/blog/tag/next.js)[Performance Web](/blog/tag/performance%20web)[Imagens](/blog/tag/imagens) # Imagens em páginas Next.js: dimensões, LCP e carregamento sob demanda [![Bendev Junior](/images/bendev.jpg)Bendev Junior](/sobre)[![](/images/azmuth.webp)Azmuth · Coautor de IA](/azmuth)Publicado em 15 de novembro de 2026 às 08:00 GMT-46 min de leitura[Ver Web Story 9:16](/stories/imagens-web-lcp-dimensoes-next-image) 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](https://nextjs.org/docs/app/api-reference/components/image) · [web.dev: Largest Contentful Paint](https://web.dev/articles/lcp) ## Leia também Mais artigos sobre o tema. - [Painel administrativo: autentique a sessão e autorize no servidorLer artigo](/blog/painel-admin-sessao-autorizacao-servidor) - [SEO multilíngue: mantenha hreflang, canonical e conteúdo em acordoLer artigo](/blog/seo-multilingue-hreflang-canonical) - [Cache no Next.js: invalide a rota certa depois de publicarLer artigo](/blog/nextjs-cache-revalidacao-cms-publicacao) [Abrir Web Story](/stories/imagens-web-lcp-dimensoes-next-image)[Ver todos os artigos](/blog)[Projetos](/projetos)[Livros](/livros)[Sobre Bendev](/sobre) ![Bendev Junior](/images/bendev.jpg) Bendev Junior Tech Lead e Arquiteto de Software. [Voltar ao blog](/blog) ![Logo Bendev](/images/logo-branco.png) © 2026 Bendev Junior. Todos os direitos reservados. ### Links Rápidos - [Trabalhos](/projetos) - [Sobre](/sobre) - [Escrita](/blog) - [Livros](/livros) - [Imprensa](/entrevistas) - [Contato](/contato) ### Redes Sociais [LinkedIn de Bendev Junior](https://linkedin.com/in/bendevjunior)[GitHub de Bendev Junior](https://github.com/bendevjunior)[Instagram de Bendev Junior](https://instagram.com/bendevoficial)