Image Optimization

Core Idea

O componente <Image> (next/image) estende <img> com otimização de tamanho, estabilidade visual (evita layout shift), lazy loading nativo e redimensionamento sob demanda, inclusive para imagens remotas.

Key Concepts

• <Image>: componente de next/image; src pode ser local ou remoto.
• Imagens locais estáticas (public/): referenciadas a partir da base URL /; exigem width/height explícitos quando não importadas estaticamente.
• Import estático de imagem: quando src é um import estático, Next.js infere automaticamente width, height e blurDataURL, permitindo placeholder="blur".
• Import dinâmico em Server Component: await import(...) com prefixo estático no path também obtém width/height/blurDataURL automáticos; o path deve ter prefixo estático (ex.: ../content/blog/images/) para limitar o bundling e impedir que input externo escape do diretório.
• Imagens remotas: src como URL string; width/height (ou fill) devem ser fornecidos manualmente porque Next.js não acessa arquivos remotos no build.
• remotePatterns: configuração obrigatória em next.config.js (images.remotePatterns) para permitir hosts remotos específicos, prevenindo uso malicioso.
• fill: prop alternativa a width/height para a imagem preencher o elemento pai.

Code Examples

import Image from 'next/image'

export default function Page() {
  return (
    <Image src="/profile.png" alt="Picture of the author" width={500} height={500} />
  )
}

• O que demonstra: imagem local do public/ com dimensões explícitas.

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return <Image src={ProfileImage} alt="Picture of the author" />
}

• O que demonstra: import estático elimina a necessidade de width/height/blurDataURL manuais.

import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 's3.amazonaws.com', port: '', pathname: '/my-bucket/**', search: '' },
    ],
  },
}

export default config

• O que demonstra: whitelist explícita de host remoto para permitir otimização de imagens externas.

Anti-patterns

• Servir imagem remota sem remotePatterns: <Image> recusa/bloqueia por padrão; sempre declarar o padrão mais específico possível (protocolo, host, path) para evitar uso malicioso.
• Usar import dinâmico com path totalmente dinâmico (sem prefixo estático): faz todos os arquivos que casam com o prefixo entrarem no bundle; seja específico no diretório.
• Omitir width/height/fill em imagem remota: gera layout shift, já que Next.js não pode inferir a proporção sem acessar o arquivo no build.

Key Takeaways

1. Prefira import estático de imagem sempre que possível: ganha width, height e blurDataURL automáticos de graça.
2. Para imagens remotas, width/height (ou fill) e remotePatterns em next.config.js são obrigatórios.
3. Import dinâmico em Server Component é a ponte entre import estático e imagens montadas por variável (ex.: slug de blog), mantendo a inferência automática de dimensões.
4. remotePatterns deve ser o mais específico possível (não usar wildcard de host amplo) por segurança.

Connects To

• Font Optimization (ch014): mesmo princípio de self-hosting/otimização automática de asset aplicado a fontes em vez de imagens.