O PIPELINE DE IMAGENS
O pipeline FAL plus Sharp que executo em todos os sites da Seahawk para atingir pontuações Lighthouse 100 de imagens por padrão, com números concretos de tamanho de arquivo.
Por que disciplina de imagens é metade da batalha de performance
Imagens são o elemento LCP em aproximadamente 70 por cento das páginas de marketing. Disciplina de imagens é a alavanca de performance de maior impacto que conheço. Os times que acertam nisso atingem Core Web Vitals sem esforço; os times que erram lutam contra Core Web Vitals para sempre.
A disciplina é estrutural: escolha o formato, redimensione no momento do upload, otimize a codificação, defina dimensões explícitas, carregue a imagem LCP. Cada um desses é um investimento em engenharia pontual que compensa em todas as páginas de todos os sites.
Geração de hero FAL
Gero imagens hero via FAL flux-pro/v1.1-ultra e Recraft v3. Ambos produzem JPEGs de 1200 por 675 pixels com qualidade de codificação completa, típicamente 600KB a 1.5MB por imagem. Fazer upload direto para Supabase Storage significa que cada página entrega ~1MB de hero apenas.
FAL custa aproximadamente 4 centavos por imagem hero, o que é negligenciável comparado à fotografia manual ou licenciamento de stock.
Re-codificação aguda para WebP
Antes de qualquer upload, a imagem passa por sharp(buf).resize({width:1600, fit:"inside"}).webp({quality:82}).toBuffer(). Isso produz um arquivo WebP 90 por cento menor que o JPEG original sem perda perceptível. Um hero de 900KB vira um hero de 80KB.
Em 53 imagens hero no gautamkhorana.com, a economia total foi aproximadamente 50MB em todo o site. O mesmo pipeline aplicado a sites de clientes na Seahawk entrega consistentemente ganhos similares. O código tem dez linhas; o impacto é durável.
Configurações de upload de armazenamento
Defina cacheControl: 31536000 no upload de armazenamento para que a CDN cache o arquivo por um ano. O formato WebP oferece aos navegadores modernos o que eles querem; navegadores mais antigos caem de volta para JPEG via o elemento picture.
Use um padrão de URL estável (slug-hero.webp) para que a história de invalidação de cache seja limpa. Quando um hero é atualizado, o slug deve rotacionar (slug-hero-v2.webp) e o banco de dados atualiza a URL atomicamente.
A integração frontend
Toda imagem hero deve ter atributos explícitos de width e height no HTML. Sem eles, há shifts de layout conforme a imagem carrega e CLS sobe. Os componentes Image do Astro e Next.js lidam com isso automaticamente; tags img brutas precisam disso manualmente.
A imagem hero acima da dobra deve ser pré-carregada com link rel="preload" as="image" no head do documento. Economiza típicamente de 100 a 400 milissegundos na métrica LCP. A mudança de uma linha com o impacto mais alto disponível na maioria dos sites de marketing.
Carregue preguiçosamente cada imagem abaixo da dobra com loading="lazy". Os navegadores lidam com isso nativamente agora; nenhuma biblioteca JavaScript necessária.
O pipeline completo em um helper
Extraí esse pipeline em scripts/lib/optimize-image.mjs que pega um buffer, executa o redimensionamento mais a codificação WebP, retorna o buffer otimizado. Usado em todo o pipeline de herói do auto-blog, os scripts de re-codificação em massa e o utilitário de upload manual.
O helper único significa que a disciplina é centralizada. Novos scripts que precisam fazer upload de imagens chamam o mesmo helper, obtêm a mesma compressão, produzem os mesmos tamanhos de arquivo. A disciplina não depende de nenhum engenheiro individual lembrando de executar sharp.