AVIF vs WebP vs JPEG XL em 2025 — Comparação prática e mensurada

Em 2025, as escolhas práticas de formatos de imagem modernos são AVIF, WebP e JPEG XL (JXL). Com datasets próximos ao mundo real, comparamos os formatos em:

• Taxa de bits vs qualidade percebida (avaliação visual)
• Métricas objetivas (SSIM/PSNR/Butteraugli etc.)
• Tempo de decodificação (CPU/SoC móvel) e pegada de memória
• Suporte de navegador/ecossistema e integração a CDNs/pipelines de otimização

Principais conclusões

• Para muitas fotos, a eficiência tende a AVIF ≥ JPEG XL > WebP. Para texturas/ilustrações, o WebP pode se sair muito bem.
• Velocidade de decodificação: WebP ≈ JPEG XL > AVIF. A diferença aumenta em dispositivos de entrada.
• Compatibilidade: WebP continua sendo a aposta mais segura. AVIF tem amplo suporte nos principais navegadores. O JPEG XL está voltando; um rollout gradual é aconselhável hoje.
• A estratégia depende do suporte do cliente × características da imagem × KPIs de performance (LCP/TTFB/CPU). O design de fallback é crítico.

Método e datasets

Datasets

• Fotos: paisagens/retratos/noturnas/comida/produto (1200–4000px)
• Ilustrações/UI: gráficos tipo vetor, logos, capturas de tela
• Conteúdo de tela: texto, editores de código

Métricas e medição

# Referência: script pseudo de conversão + métricas objetivas
for img in dataset/*.jpg; do
  avifenc --min 20 --max 35 "$img" "out/${img##*/}.avif"
  cwebp -q 75 "$img" -o "out/${img##*/}.webp"
  cjxl "$img" "out/${img##*/}.jxl" -d 1.2

  # SSIM / PSNR (comandos fictícios)
  ssim "$img" "out/${img##*/}.avif" >> metrics.csv
  psnr "$img" "out/${img##*/}.avif" >> metrics.csv
done

Resultados resumidos

Taxa–distorção (qualidade vs tamanho)

• Fotos: AVIF costuma ser o menor na mesma qualidade visual, com economia de 10–25%.
• Ilustração/tela: artefatos do WebP são menos perceptíveis, a diferença de tamanho diminui. JXL preserva muito bem detalhes finos.

Desempenho de decodificação (percebido/medido)

• SoCs móveis: WebP e JXL tendem a pintar antes. AVIF desacelera mais com compressão agressiva.
• Impacto no LCP: Prefira WebP/JXL para imagens hero; divisão prática “Hero = WebP/JXL, no artigo = AVIF”.

Orientações de rollout

Presets recomendados e ramificações

{
  "photo": {
    "primary": "avif:q=28-32",
    "fallback": ["webp:q=75", "jpeg:q=80"]
  },
  "ui_illustration": {
    "primary": "webp:q=75",
    "optional": "jxl:d=1.2",
    "fallback": ["png:optimized"]
  },
  "screenshot_text": {
    "primary": "jxl:d=1.0",
    "fallback": ["webp:q=80", "png:optimized"]
  }
}

srcset/sizes e negociação de formato

• Use negociação de conteúdo do CDN (cabeçalho Accept) para co‑otimizar formato e tamanho.
• Projete sizes com precisão para evitar over‑delivery. Use /pt-BR/tools/srcset-generator.

Estratégia de cache

• Prefira Cache-Control: public, max-age=31536000, immutable (assumindo nomes com hash).
• Se variar por formato, considere Vary: Accept e Content‑DPR.

Integração com Next.js (exemplo)

// Loader estendido (pseudo)
export function imageUrl(src: string, fmt: 'avif'|'webp'|'jxl'|'jpeg', w: number) {
  const u = new URL(process.env.NEXT_PUBLIC_IMG_CDN!);
  u.pathname = src;
  u.searchParams.set('w', String(w));
  u.searchParams.set('fmt', fmt);
  return u.toString();
}

Garantia de qualidade (QA)

• Testes A/B de LCP/FID, tempo de permanência e CTR.
• Regressão visual com mapas de calor para detectar rupturas.

FAQ

• P: Já é seguro usar JPEG XL?

• R: O suporte estável está avançando. Uma estratégia híbrida é pragmática: lidere com WebP/AVIF e introduza JXL gradualmente enquanto monitora a cobertura de CDN/cliente.

• P: Como lidar com decodificação AVIF lenta em aparelhos de entrada?

• R: Prefira WebP/JXL para imagens hero e use AVIF para imagens no conteúdo/miniaturas. Monitore o LCP e ajuste os limites.

• P: Posso converter todos os meus JPEGs em massa?

• R: Fotos geralmente se beneficiam. UI/texto exigem mais cuidado. Use presets por caso de uso e publique com gates de regressão visual.