next/image no Next.js: Como Otimizar LCP e Evitar Faturas Surpresa na Vercel

Em qualquer aplicação web moderna — seja uma loja virtual com milhares de produtos, um catálogo de imóveis ou a página inicial de um software B2B —, as imagens representam entre 60% e 80% de todo o peso em bytes transferido pela rede.

Por essa razão, o componente <Image /> do Next.js (next/image) é celebrado como uma das maiores inovações do framework. Ele converte automaticamente arquivos pesados em formatos modernos como WebP e AVIF, redimensiona imagens sob medida para a tela de cada celular e elimina saltos visuais de layout (Cumulative Layout Shift - CLS).

Porém, existe um lado sombrio que muitas empresas só descobrem no fim do mês: a fatura da infraestrutura de nuvem.

Se você não compreender a mecânica exata de como a Vercel e os servidores Node.js cobram e processam cada transformação gráfica, o que deveria ser uma melhoria de performance pode se transformar em um ralo financeiro de milhares de dólares.

Neste manual corporativo, vamos analisar a engenharia do next/image, como eliminar cobranças desnecessárias e a arquitetura ideal integrando com Supabase Storage.

---

1. A Armadilha Financeira da Otimização de Imagens

Para entender o risco financeiro, precisamos desmistificar como o Next.js lida com imagens:

Quando o seu navegador requisita uma imagem usando <Image src="https://seu-bucket.com/foto.jpg" width={400} height={300} alt="..." />, o Next.js não entrega o arquivo estático diretamente. Uma função servidora é acionada, faz o download do arquivo original, consome processamento de CPU para redimensioná-lo, converte para WebP/AVIF e armazena essa variação em cache.

A Política de Cobrança da Vercel

• Plano Hobby (Gratuito): Inclui apenas 1.000 imagens otimizadas de origem por mês.
• Plano Pro: Inclui 5.000 imagens por mês. Cada lote adicional de 1.000 imagens custa $5 a $9 dólares.

Onde Empresas Gastam Rios de Dinheiro Sem Saber?

1. Queries Dinâmicas na URL: Se a URL da imagem contiver parâmetros variáveis ou timestamps (ex: foto.jpg?t=123), a Vercel interpreta cada variação como uma "nova imagem de origem", recalculando e estourando a cota em poucas semanas.
2. Uso de Imagens de Usuários sem Moderação: Se o seu SaaS permite que clientes subam dezenas de fotos em alta resolução (4K/8K de celulares) e o next/image tenta redimensionar todas sob demanda no servidor, a CPU da sua função serverless atinge o teto.
3. Imagens de Ícones e SVGs Passando pelo Otimizador: Ícones e ilustrações vetoriais não precisam ser redimensionados via CPU. Passá-los pelo otimizador é literalmente queimar dinheiro.

---

2. A Arquitetura Padrão Ouro: Supabase Storage + remotePatterns

A maneira mais limpa e barata de operar imagens em larga escala em 2026 é manter a responsabilidade dividida:

• O Supabase Storage atua como o repositório de arquivos seguro e definitivo, protegido por políticas de Row Level Security (RLS).
• O Next.js consome essas imagens através de regras estritas declaradas no next.config.ts.

Configuração Segura no next.config.ts

Nunca utilize a propriedade obsoleta images.domains. Utilize sempre remotePatterns delimitando estritamente o protocolo, hostname e caminho:

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'SEU_PROJETO.supabase.co',
        pathname: '/storage/v1/object/public/**',
      },
    ],
  },
};

export default nextConfig;

---

3. Quando Usar a Propriedade unoptimized?

Nem toda imagem deve passar pelo pipeline de transformação do Next.js. O parâmetro unoptimized={true} instrui o framework a servir o arquivo diretamente da CDN, com custo zero de processamento na Vercel:

Casos Mandatórios para unoptimized:

1. Imagens em Formato SVG: SVGs são vetores matemáticos e não têm perdas. Usar o otimizador da Vercel para SVGs é inútil.
2. Gifs Animados: O processamento serverless de animações pode gerar travamentos ou arquivos estáticos corrompidos.
3. Ambientes de Desenvolvimento Local: Para acelerar o boot local com Turbopack, você pode desativar o otimizador em NODE_ENV === 'development'.
4. Imagens Já Redimensionadas na Origem: Se você utiliza serviços de CDN ou transformações nativas do Supabase Storage Image Transformation, entregue a URL final e marque unoptimized.

// Exemplo: Ícone ou logo vetorial com custo ZERO de otimização
<Image
  src="/images/logo-corporativa.svg"
  alt="Logo da Empresa"
  width={180}
  height={40}
  unoptimized
  priority
/>

---

4. Otimização Cirúrgica de LCP (Largest Contentful Paint)

O LCP mede o tempo que o maior elemento visual da tela leva para ser desenhado no navegador do cliente, sendo uma das métricas vitais monitoradas pelo Vercel Speed Insights. Se o seu elemento de maior impacto for uma imagem de capa (Hero Image):

1. Adicione a Propriedade priority: Ela instrui o navegador a fazer o preload do arquivo no cabeçalho HTML, antes mesmo de processar os scripts React.
2. Defina Dimensões Reais (width e height): Nunca deixe o navegador adivinhar o tamanho da imagem. Declare a proporção exata para prevenir qualquer salto de tela (CLS = 0).
3. Use a Propriedade sizes de Forma Responsiva: Evita que um celular com tela pequena baixe a mesma versão gigantesca de um monitor 4K:

// Exemplo: Banner Hero com carregamento prioritário instantâneo
<Image
  src="https://SEU_PROJETO.supabase.co/storage/v1/object/public/banners/hero.jpg"
  alt="Dashboard Corporativo de Alta Performance"
  width={1200}
  height={630}
  priority
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  className="w-full h-auto rounded-xl shadow-2xl"
/>

---

Conclusão: Engenharia Limpa Gera Economia Real

O componente next/image é uma ferramenta poderosa, mas exige disciplina arquitetural. Tratar o consumo de recursos de nuvem como uma métrica de engenharia de primeira classe é o que separa protótipos amadores de sistemas corporativos escaláveis e financeiramente saudáveis.

Se a sua empresa precisa estruturar plataformas de alto tráfego, otimizar faturas de infraestrutura ou modernizar aplicações legadas com Next.js e Supabase, conheça nossos serviços de desenvolvimento sob medida ou solicite um diagnóstico de arquitetura.