Escolha pela função que a imagem precisa cumprir
Comece pelo ativo, não pela extensão. Uma fotografia é conteúdo de tons contínuos, então alguma perda pode ser aceitável na escala exibida. Uma captura de tela, gráfico, logotipo ou desenho linear tem bordas e textos nítidos, onde artefatos são conspícuos. Preserve isso com saída sem perdas ou aprovação cuidadosa. Use SVG para um logotipo ou diagrama vetorial quando disponível.
Em seguida, identifique capacidades. Alpha significa transparência por pixel. Animação é uma sequência de quadros. Cobertura necessária de navegadores, volume de publicação e tempo de build são restrições de entrega que podem sobrepor um formato menor.
Teste AVIF e WebP com perdas primeiro. Mantenha JPEG disponível quando for preciso um fallback opaco amplamente compatível.
Mantenha uma fonte sem perdas. Compare PNG com WebP ou AVIF lossless na escala de exibição real antes de escolher.
Use AVIF, WebP ou PNG; não escolha JPEG porque ele não transporta canal alfa.
Entenda o que cada formato entrega
AVIF armazena imagens codificadas com AV1 em um formato baseado em HEIF. Sua especificação inclui imagens estáticas, sequências de imagem e itens de imagem com alpha. Suporta codificação com perdas e sem perdas, transparência e animação. As economias não são fixas: conteúdo-fonte, encoder, velocidade, qualidade alvo e metadados alteram o resultado.
WebP suporta modos com perdas e sem perdas, transparência e animação. JPEG é um formato de imagem estática com perdas e com suporte histórico muito amplo, útil como fallback para fotos opacas. PNG é sem perdas com alpha, tornando-se um fallback sólido para gráficos exatos, embora PNGs fotográficos sejam frequentemente ineficientes. PNG comum é estático; teste um formato separado para animação quando houver movimento necessário.
A melhor opção a explorar para imagens raster de alto valor onde a redução de transferência pode justificar o trabalho de codificação e fallback.
Útil como opção raster moderna e de uso geral, incluindo transparência e sequências animadas.
Use como fallback fotográfico opaco, não para logotipo transparente ou recortes.
Use para fallback raster sem perdas e transparente e para ativos onde fidelidade de pixels importa mais que o menor número de bytes.
Construa um caminho de fallback em vez de apostar em um formato
O elemento picture permite que um navegador avalie alternativas. Coloque AVIF primeiro, depois WebP e então um img de fallback em JPEG ou PNG, com o tipo MIME correto. O navegador ignora uma source não suportada e usa o fallback quando nenhuma source é utilizável. Mantenha o mesmo texto alternativo significativo, a menos que você mude intencionalmente a crop.
O fallback por formato não substitui dimensionamento responsivo. Forneça candidatos baseados em largura e um values verdadeiro em sizes quando o slot variar. Inclua width e height para que o navegador possa reservar espaço. Um arquivo de formato pequeno em uma dimensão de pixel sobredimensionada ainda desperdiça bytes.
AVIF primeiro, WebP segundo, depois JPEG para fotos opacas ou PNG quando o fallback precisar de transparência ou bordas sem perdas.
Se um servidor seleciona formatos a partir das capacidades da requisição em vez de marcação picture, configure a variação de cache corretamente e teste que cada cliente recebe uma representação decodificável.
Use um cliente sem o decodificador preferido ou desative deliberadamente uma source em staging; confirme que a imagem, dimensões e texto alternativo permanecem corretos.
Orce tempo de codificação e proteja a qualidade visual
Compressão moderna desloca trabalho para a codificação. O encoder de referência do AVIF oferece uma faixa de velocidade de 0, mais lento, a 10, mais rápido; WebP também troca mais trabalho de encoder por tempo, tamanho de saída e qualidade. Trate uma re-codificação em lote ou transformação on-demand como uma decisão operacional, não uma configuração gratuita.
Estabeleça uma política repetível por classe de ativo e revise os originais nas dimensões comuns de exibição. Inspecione rostos, gradientes, texto, bordas e limites transparentes. Mantenha o master e registre versão do encoder e configurações para que um defeito possa ser reproduzido e revertido.
Codificação mais rápida pode reduzir pressão de build, mas pode produzir um arquivo maior ou compressão menos eficiente; faça benchmarking com seu próprio conjunto de fontes.
Uma pontuação ou preset não substitui a revisão visual das regiões da imagem que carregam significado para os visitantes.
Faça mudanças de formato de imagem uma prática pró-ativa de confiabilidade
For Status Is UP, otimização de imagem é trabalho de uptime pró-ativo quando previne que um lançamento degrade uma página crítica. Inventarie URLs de imagem críticas, faça uma conversão representativa em staging e verifique content type, comportamento do CDN e invalidação de cache antes de uma migração em larga escala.
Implemente em lote reversível. Compare renderização e comportamento de transferência no candidato a release e mantenha a representação antiga até que o novo caminho esteja comprovado. Se uma transformação ou regra de cache falhar, restaure a fonte conhecida como boa. Esta é uma direção resiliente de entrega, não um mandato universal por AVIF ou múltiplos formatos.
Priorize a imagem principal e imagens de conteúdo que influenciam a primeira visualização útil, não todo arquivo de uma vez.
Mantenha nomes de ativos determinísticos ou um mapeamento versionado para que o caminho anterior JPEG, PNG ou WebP possa ser restaurado rapidamente.