Como o next/image otimiza WebP, srcset e o preload no Next.js 16

O componente next/image, do Next.js (o framework por trás de boa parte dos sites institucionais e landing pages construídos em código), já otimiza a imagem sozinho: troca o formato por um mais leve, gera várias larguras da mesma foto e atrasa o carregamento do que está fora da tela. O problema aparece quando duas propriedades, sizes e preload, ficam mal configuradas. Aí a imagem certa não chega no tamanho certo, e o site perde nota de velocidade mesmo usando o componente certo.

Este texto mostra o que o Next.js faz por padrão, o que ainda depende da sua configuração e o que mudou na versão 16, quando a propriedade priority foi substituída pela preload.

Em poucas palavras

• O next/image converte a imagem para WebP (formato mais leve criado pelo Google) e gera várias larguras sozinho, sem plugin.
• A propriedade sizes decide se o navegador recebe um srcset completo (várias larguras) ou só duas versões fixas da imagem.
• Desde o Next.js 16, quem quer priorizar o carregamento de uma imagem usa preload, não mais priority.
• Nada disso troca width e height corretos: sem eles, o layout ainda pula na tela enquanto a imagem carrega.

O que o next/image otimiza sozinho

Por padrão, o Next.js entrega a imagem em WebP e ajusta a qualidade para 75, valor que a própria documentação do framework aponta como padrão desde a versão 16. Não é preciso instalar nada: a otimização roda no momento em que a imagem é pedida pela primeira vez, e fica em cache depois disso.

WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Fonte: Google Developers, página oficial do WebP.

Dá para ativar também o formato AVIF, que comprime ainda mais, mas demora mais para ser gerado na primeira vez que a imagem é pedida. Para a maioria dos sites institucionais, o WebP sozinho já resolve: a própria documentação do Next.js recomenda esse formato para a maioria dos casos, deixando o AVIF como opção extra em next.config.js.

Sizes e srcset como o navegador escolhe

O next/image sempre gera um atributo srcset (a lista de versões da mesma imagem em tamanhos diferentes) para o navegador escolher sozinho qual baixar. O que muda é a propriedade sizes: sem ela, o Next.js entrega só duas versões, para telas comuns e telas de alta densidade, pensadas para uma imagem de tamanho fixo. Com sizes preenchida, ele gera uma lista completa, com várias larguras, pensada para imagens que mudam de tamanho conforme a tela.

Quando falta sizes numa imagem que usa a propriedade fill (ocupar o espaço do elemento pai) ou que muda de largura por CSS, o navegador assume que ela vai ocupar a tela inteira e baixa uma versão maior do que precisa, segundo a própria documentação oficial do componente Image. Um card de blog que mostra a foto em 400 pixels de largura, sem sizes, pode acabar baixando a versão pensada para tela cheia.

<Image
  src="/consultorio.jpg"
  alt="Sala de atendimento do consultório"
  fill
  sizes="(max-width: 768px) 100vw, 400px"
/>

O preload que substituiu o priority

Até o Next.js 15, quem queria carregar uma imagem antes das outras (a maior foto da tela, geralmente a que decide o LCP, o tempo até o maior elemento visível aparecer) usava a propriedade priority. A partir do Next.js 16, essa propriedade foi descontinuada em favor de preload, para deixar mais claro o que ela faz: inserir uma marcação de carregamento antecipado no cabeçalho da página.

• Antes (Next.js 15 e anteriores): <Image src="/hero.jpg" alt="foto de capa" priority />
• Agora (Next.js 16): <Image src="/hero.jpg" alt="foto de capa" preload />

A regra de quando usar continua a mesma: só na imagem que é o LCP da página, normalmente a foto grande do topo. Usar preload em várias imagens ao mesmo tempo anula o ganho, porque o navegador passa a disputar banda carregando várias fotos antes de qualquer uma aparecer pronta na tela.

O que ainda depende de você

O componente cuida do formato e do tamanho, mas quatro decisões continuam manuais:

• Definir width e height (ou fill) sempre, para o navegador reservar o espaço da imagem antes dela carregar.
• Usar preload só na imagem do topo, nunca em fotos abaixo da dobra (a parte da página que só aparece ao rolar a tela).
• Configurar remotePatterns no next.config.js quando a imagem vem de outro domínio, como um banco de fotos ou uma CDN, senão o Next.js recusa otimizar.
• Escrever o texto do alt com cuidado: ele ainda é o que o Google e os leitores de tela usam para entender a imagem, e o next/image não escreve isso sozinho.

Perguntas frequentes

O next/image funciona com fotos de bancos de imagens como Pexels?

Funciona, mas precisa autorizar o domínio da imagem em images.remotePatterns, no arquivo next.config.js. Sem essa configuração, o Next.js bloqueia a otimização por segurança.

Preciso converter minhas fotos para WebP antes de subir para o site?

Não. O next/image faz essa conversão sozinho, a partir do JPEG ou PNG original, toda vez que a imagem é pedida num formato que o navegador do visitante aceita.

Colocar preload em todas as imagens deixa o site mais rápido?

O contrário. Cada preload soma uma disputa por banda logo no início do carregamento. Usado em excesso, atrasa justamente a imagem que devia aparecer primeiro.

Que valor de qualidade usar no next/image?

O padrão, 75, atende a maioria dos sites institucionais. Só vale subir para fotos com muito detalhe fino, como tecido ou textura, e mesmo assim depois de comparar o resultado lado a lado.

Uma imagem rápida também é decisão de negócio

Site lento perde paciente e cliente antes mesmo do texto ser lido: a velocidade de carregamento é um dos fatores que o Google usa para decidir quem aparece primeiro na busca. Configurar sizes, trocar priority por preload e revisar o alt de cada imagem é trabalho técnico, mas o resultado aparece para o visitante em segundos a menos de espera.

A Visuapp entrega sites institucionais e landing pages em código puro, com essas otimizações de imagem já configuradas desde a entrega, sem depender de plugin. Alguns exemplos estão no portfólio da Visuapp. Se quiser saber como está a velocidade do seu site hoje, fale com a gente.