@zaix/image-optimizer

Otimizador de imagens para Next.js e sites estáticos com Sharp. Gera múltiplos formatos (WebP, AVIF) e tamanhos responsivos, com um componente React para fácil integração.

Features

• Otimização de Imagens: Usa Sharp para converter e redimensionar imagens para os formatos WebP e AVIF.
• CLI Poderosa: Ferramenta de linha de comando para processar imagens em lote.
• Componente React: Componente OptimizedImage para renderizar imagens otimizadas com as melhores práticas de performance.
• Geração de Manifesto: Cria um image-manifest.json com metadados das imagens processadas.
• Placeholders de Blur: Gera placeholders de baixa resolução para o efeito "blur-up".
• Configuração Flexível: Suporte a configuração via arquivo (image-optimizer.config.js) e opções de CLI.

Instalação

npm install -D @zaix/image-optimizer

Uso do CLI

A CLI permite processar um diretório de imagens, gerando versões otimizadas.

# Uso básico (usa a configuração padrão)
npx optimize-images

# Especificando diretórios
npx optimize-images -i ./assets/images -o ./public/optimized

# Customizando formatos e qualidade
npx optimize-images --formats webp,avif --quality 85

# Limpar diretório de saída antes de processar
npx optimize-images --clean

Adicionar ao package.json

"scripts": {
  "optimize:images": "optimize-images",
  "build": "optimize-images && next build"
}

Componente OptimizedImage

O componente OptimizedImage é uma alternativa ao next/image para sites estáticos, focada em performance.

import { OptimizedImage } from '@zaix/image-optimizer/component';

// Uso básico
<OptimizedImage 
  src="/images/hero.jpg" 
  alt="Hero image"
  width={1920}
  height={1080}
/>

// Com prioridade (para imagens "above the fold")
<OptimizedImage 
  src="/images/hero.jpg" 
  alt="Hero image"
  priority
  sizes="100vw"
/>

// Preenchendo o container pai
<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <OptimizedImage 
    src="/images/background.jpg" 
    alt="Background"
    fill
  />
</div>

Props

• src (string): Caminho para a imagem original.
• alt (string): Texto alternativo.
• priority (boolean): Se true, carrega a imagem com prioridade (eager loading).
• fill (boolean): Se true, a imagem preenche o container pai.
• sizes (string): Atributo sizes para a imagem responsiva.

Configuração

Crie um arquivo image-optimizer.config.js na raiz do seu projeto para customizar o comportamento.

// image-optimizer.config.js
module.exports = {
  input: './public/images',
  output: './public/images/optimized',
  sizes: [320, 640, 768, 1024, 1280, 1920],
  formats: ['webp', 'avif'],
  quality: {
    webp: 80,
    avif: 75,
    jpeg: 85,
  },
  generateManifest: true,
  generateBlurPlaceholders: true,
  preserveMetadata: false,
  concurrency: 4,
};

Performance e Lighthouse

O componente OptimizedImage foi desenhado para obter a pontuação máxima no Lighthouse:

• LCP Otimizado: Com priority e fetchPriority="high".
• Prevenção de CLS: Dimensões explícitas para evitar layout shift.
• Lazy Loading: Imagens fora da tela são carregadas de forma tardia.
• Formatos Modernos: Usa AVIF e WebP com fallback para o formato original.
• srcset e sizes: Suporte completo para imagens responsivas.

Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues e pull requests.

Licença

MIT