Como automatizar a otimização de imagens na publicação

Automação pode reduzir trabalho manual, desde que não descarte qualidade, metadados necessários ou alternativas.

Antes de começar

Registre formatos de entrada, dimensões máximas, versões necessárias e responsáveis por aprovar exceções.

Passo a passo

1. Adicione transformação ao pipeline de publicação e preserve origem e saída com nomes previsíveis.

2. Processe um lote de teste, confira HTML gerado, visual e bytes e então monitore falhas.

Um fluxo reproduzível pode ser: (a) aceitar JPEG, PNG ou TIFF original numa pasta de entrada; (b) preservar o original fora do diretório público; (c) corrigir orientação e remover metadados privados quando aplicável; (d) gerar variantes AVIF/WebP e um fallback JPEG/PNG nas larguras definidas pelo layout; (e) produzir nomes estáveis e srcset/sizes; (f) bloquear a publicação se uma transformação falhar; (g) conferir amostras visuais e o HTML final. Exemplo de contrato da tarefa: produto-orig.jpg de 2400×1600 → produto-640.avif, produto-1280.avif e fallback produto-1280.jpg; a escolha de tamanhos depende do componente, não é recomendação universal.

Limites e cuidados

Automatizar não corrige imagens sem direitos ou arquivos de origem de baixa qualidade.

Continue na biblioteca

Fonte oficial: Como escolher formatos de imagem — web.dev.

Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.