Matriz 2025: AVIF vs WebP vs JPEG (e quando usar PNG ou JXL)
Guia de seleção de formato: qualidade percebida, compatibilidade, peso, custo de CPU e fallback em 2025.
Esta matriz responde a:
- Qual formato escolher conforme tipo de conteúdo e objetivo (SEO, peso, transparência)?
- Quando compensa o encode mais lento do AVIF em relação ao WebP?
- Onde o JPEG segue relevante por custo/compatibilidade?
- Atalhos rápidos: Converter | Comprimir | Redimensionar
Objetivo
Entregar uma matriz clara para escolher o formato ideal considerando tipo de conteúdo, restrições de CPU, compatibilidade e metas de Core Web Vitals.
1. Resumo executivo
- AVIF: melhor compressão com texturas complexas; encode mais lento.
- WebP: equilíbrio entre velocidade/qualidade; suporte consolidado.
- JPEG (clássico): encode/decodificação rápidos; eficiência menor na mesma qualidade perceptual.
- PNG: use apenas para transparência sem perda ou pixel-perfect.
- JXL (em progresso): potencial alto; suporte ainda parcial (verificar status 2025 antes de publicar definitivo).
2. Matriz de decisão (preliminar)
| Critério | AVIF | WebP | JPEG | PNG | JXL |
|---|---|---|---|---|---|
| Eficiência de compressão | Alta | Média-Alta | Média | Baixa (lossy não) | Muito Alta* |
| Velocidade de encode | Lenta | Média | Muito rápida | N/A | Lenta* |
| Transparência | Sim | Sim | Não | Sim | Sim* |
| Animação | Sim (limitada) | Sim | Não | Não | Sim* |
| Suporte navegador | Alto 2025 | Muito alto | Universal | Universal | Parcial* |
| Arte linear / UI | Bom (com tuning) | Bom | Regular (banding) | Excelente | Bom* |
| Fotos complexas | Excelente | Muito bom | Aceitável | Ineficiente | Excelente* |
| Energia de decodificação | Média | Baixa-Média | Baixa | Baixa | A definir* |
| (* Confirmar e atualizar antes do lançamento.) |
3. Fluxo recomendado
- Detecte capacidades (Accept header, feature tests).
- Sirva AVIF quando suportado e o ganho de peso for significativo.
- Use WebP como fallback se AVIF não estiver disponível.
- JPEG baseline como último recurso para fotografia.
- PNG apenas quando transparência ou pixel-perfect forem obrigatórios.
4. Heurísticas práticas
| Caso | Escolha principal | Notas |
|---|---|---|
| Hero fotográfico | AVIF | Verifique artefatos em degradês |
| Galeria de miniaturas | WebP | Qualidade ~80, encode rápido em massa |
| UI com transparência | PNG / WebP | WebP se não exigir pixel-perfect |
| Capturas de tela com texto | WebP (lossless) | Ou AVIF com quantização precisa |
| Animações leves | WebP animado | Fuja de GIF |
5. Métricas para coletar
- Percentual de bytes economizados (JPEG → AVIF / WebP).
- VMAF p95 versus referência.
- Tempo de encode p50/p95 (ms) por formato na sua infraestrutura.
- Impacto na bateria em mobile (testes A/B).
6. Considerações de implementação
- Pipeline híbrido: preprocesse AVIF, gere fallback WebP e JPEG.
- Controle granular de qualidade (fotográfico vs gráfico).
- Preserve metadados essenciais (EXIF) conforme política.
- Reencode AVIF com ajustes mais leves se a CPU saturar.
7. Riscos
| Risco | Mitigação |
|---|---|
| Encode AVIF lento em build | Paralelização + cache incremental |
| Artefatos em degradês | Ajustar parâmetros (CQ, subsampling) |
| Suporte desigual JXL | Feature detection e fallback |
8. Próximos passos antes de publicar
- Inserir tabela real com tamanhos exemplo (foto, UI, screenshot).
- Validar suporte JXL em Safari/Chromium (estado Q3 2025).
- Adicionar snippet de negociação de formato.
Conclusão
A matriz facilita decisões objetivas e repetíveis, alinhando eficiência a experiência do usuário sem depender de debates subjetivos.