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
-
Adicione transformação ao pipeline de publicação e preserve origem e saída com nomes previsíveis.
-
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.