Resposta rápida: escolha pela pipeline, não pelo hype
Para a maioria dos sites em 2026, WebP é a atualização mais segura de formato único a partir de JPG e PNG. AVIF é a melhor primeira escolha quando a sua pipeline também consegue servir fallbacks WebP ou JPEG.
Essa última frase é a parte que muitos comparativos AVIF vs WebP pulam. O melhor formato não é apenas o que gera o menor arquivo em um benchmark. É o que o seu CMS, sua CDN, seu processo de build, seu mix de navegadores e seus tipos de imagem conseguem entregar de forma confiável.
Como ponto de partida prático:
- Use WebP quando quer um formato moderno simples, conversão em lote rápida, amplo suporte e menos surpresas em navegadores antigos, clientes de e‑mail, plugins de CMS ou navegadores dentro de apps.
- Use AVIF com fallbacks quando as imagens têm peso grande na performance, você pode codificar em tempo de build ou via CDN de imagens, e consegue conferir a saída visual antes de subir.
- Mantenha fallbacks JPEG ou PNG quando a imagem precisa funcionar em todo lugar, incluindo Safari/iOS antigos, navegadores corporativos travados, crawlers, clientes de e‑mail e plataformas de terceiros.
AVIF vs WebP num relance
| Aspecto | WebP | AVIF |
|---|---|---|
| Melhor uso padrão | Um formato moderno para a maioria dos sites | Primeiro source em uma pipeline multiformato |
| Compressão | Menor que JPEG/PNG; ótimo generalista | Costuma ser menor que WebP em fotos |
| Suporte de navegadores, jul 2026 | Cerca de 96 % de uso global no Can I use | Cerca de 93 % de uso global no Can I use |
| Velocidade de codificação | Rápido o suficiente para fluxos locais e em lote | Mais lento; melhor em tempo de build, CDN ou offline |
| Risco de decodificação | Muito maduro nos navegadores | Em geral ok, mas teste hero grandes em celulares de entrada |
| Transparência | Sim | Sim |
| Animação | Sim, amplamente usada | O formato suporta, mas os fluxos de ferramenta/navegador são menos previsíveis |
| Profundidade de cor e HDR | Voltado a 8 bits para entrega web | Melhor para alta profundidade de bits, HDR e gama de cor ampla |
| Melhores tipos de imagem | Fotos de produto, imagens de blog, capturas, thumbnails, ativos web em geral | Páginas cheias de fotos, hero grandes, galerias, ativos estáticos de alto tráfego |
De onde eles vêm
O WebP foi desenvolvido pelo Google e lançado em 2010. O modo com perdas se baseia no codec de vídeo VP8, e o modo sem perdas usa um método de compressão separado. A documentação WebP do Google indica que o WebP suporta compressão com perdas, sem perdas, transparência e animação, e tem suporte nativo nos principais navegadores.
O AVIF, sigla de AV1 Image File Format, se baseia no codec de vídeo aberto AV1. O web.dev descreve o AVIF como um formato raster mais recente que busca cobrir necessidades comuns da web — transparência, animação e melhor qualidade por byte em relação aos formatos antigos.
A diferença prática é a idade. O WebP teve mais de uma década para se acomodar em navegadores, plugins de CMS, ferramentas de design, bibliotecas de imagem e sistemas de build. O AVIF já não é exótico, mas continua sendo o formato em que é mais provável esbarrar num encoder lento, numa opção de exportação ausente ou numa plataforma que precisa de fallback.
Eficiência de compressão
O AVIF costuma gerar arquivos menores que o WebP para qualidade visual semelhante, especialmente em imagens fotográficas. Isso não quer dizer que todo AVIF será 30, 40 ou 50 % menor. O número real depende do encoder, do ajuste de qualidade, do conteúdo da imagem e de como você julga "mesma qualidade".
A diferença aparece mais em:
- fotos hero grandes com céu, tons de pele, sombras e degradês;
- imagens de galeria onde cada kilobyte se repete em muitas fotos;
- páginas mobile em que uma transferência menor ajuda diretamente o LCP e o consumo de dados.
A diferença encolhe em:
- thumbnails pequenos, onde o overhead de requisição e o resize pesam mais que a eficiência do codec;
- capturas de tela, imagens de UI e diagramas com texto nítido;
- imagens ruidosas ou com bastante textura;
- gráficos sem perdas, em que PNG ou WebP lossless podem fazer mais sentido.
Para um site real, teste numa pasta representativa em vez de numa única imagem perfeita. Um bom conjunto de teste inclui uma foto hero, uma imagem de produto, um retrato, uma captura de tela, uma ilustração e uma thumbnail. Compare tamanho de arquivo e qualidade visual nas dimensões que você realmente publica.
Suporte de navegadores em 2026
Os dois formatos têm suporte amplo, mas a cobertura não é idêntica. Na checagem de julho de 2026, o Can I use aponta cerca de 96,15 % de uso global para WebP e cerca de 93,42 % para AVIF. Ambos são viáveis para entrega web moderna, mas isso não os iguala.
O intervalo que resta importa mais em:
- iPhones e iPads antigos, sobretudo iOS 15 e anteriores;
- versões antigas do Safari desktop;
- máquinas corporativas com versões congeladas de navegador;
- navegadores embutidos em apps, quiosques e WebViews antigas do Android;
- clientes de e‑mail e plataformas de terceiros que não se comportam como navegadores comuns.
Para WebP, muitos sites conseguem seguir com WebP + fallback JPEG para clientes antigos. Para AVIF, o setup seguro em produção continua sendo AVIF primeiro, WebP em segundo e JPEG ou PNG por último.
<picture>
<source srcset="/images/hero.avif" type="image/avif">
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" alt="Foto do produto em uso">
</picture>
A ordem importa. Os navegadores usam o primeiro source que suportam, então o AVIF precisa vir antes do WebP se você quer que navegadores com AVIF recebam AVIF.
Velocidade de codificação
Velocidade de codificação é a diferença que você sente ao manter um site de verdade.
O WebP é rápido o suficiente para conversão local, ferramentas em lote, fluxos de CMS e builds simples de sites estáticos. O AVIF pode ser bem mais lento porque o encoder trabalha mais para achar um resultado menor. Existem presets AVIF mais rápidos, mas eles em geral abrem mão de parte da compressão.
Isso pesa em quatro lugares:
- Builds estáticos: um blog com 30 imagens vai bem. Um site de viagens com 2.000 fotos originais pode transformar a geração de AVIF num custo relevante de build.
- Uploads de usuário: se as pessoas sobem imagens esperando pré-visualização imediata, a codificação AVIF adiciona latência e custo de CPU.
- Funções serverless: codificações lentas podem bater em timeouts ou limites de custo.
- Fluxos locais: se você converte uma pasta manualmente antes do upload, WebP é menos cansativo.
Regra útil: AVIF brilha quando codifica uma vez e serve muitas. WebP brilha quando importam velocidade, simplicidade e conversão em lote repetível.
Qualidade visual por tipo de imagem
AVIF vs WebP não é uma decisão única para todas as imagens do site.
| Tipo de imagem | Melhor primeira escolha | Por quê |
|---|---|---|
| Hero fotográfica grande | AVIF + fallback WebP | O AVIF pode aliviar o ativo above-the-fold mais pesado |
| Foto inline de blog | WebP, ou AVIF + fallback se automatizado | WebP é simples; AVIF vale quando o build já gera variantes |
| Foto de produto em e‑commerce | WebP como base; testar AVIF | O detalhe do produto precisa continuar limpo — compare bordas, tecido, etiquetas e cor |
| Captura de tela ou imagem de UI | WebP ou PNG | AVIF em baixa qualidade pode borrar texto pequeno e bordas duras |
| Logo ou ícone | SVG ou PNG/WebP | AVIF raster não é a ferramenta certa para artes tipo vetor |
| Imagem animada | WebP ou vídeo | Fluxos de AVIF animado ainda são menos maduros em ferramentas e plataformas |
| Imagem para compartilhar em rede social | JPEG ou WebP | Muitas plataformas sociais e de mensagem recomprimem de qualquer jeito |
Recursos avançados
O AVIF oferece recursos que o WebP não cobre igual. Para imagens web sRGB comuns pode não fazer diferença. Passam a importar em fotografia, conteúdo HDR e pipelines de tela de alto nível.
- Alta profundidade de bits: AVIF pode ir além dos 8 bits típicos da web.
- HDR e gama ampla: AVIF se encaixa melhor quando sua pipeline preserva esses sinais.
- Ferramentas modernas de AV1: o AVIF herda partes do ecossistema AV1, incluindo compressão intra-frame eficiente.
Não escolha AVIF por esses recursos se a sua pipeline inteira não conseguir preservá-los. Se as imagens de origem são JPEGs sRGB normais, exportados por um CMS que apaga metadados e informação de cor, o benefício prático costuma ser o tamanho de arquivo, não a mágica HDR.
Maturidade do toolchain
O WebP é a opção madura e "sem graça" — e isso é elogio. Bem suportado por navegadores, ferramentas de design, bibliotecas de imagem, plugins de build, plugins de CMS e CDNs. Quando algo dá errado, o debug em geral é tranquilo.
O suporte AVIF melhorou muito, mas as arestas ainda são mais frequentes:
- seu CMS pode subir AVIF mas não gerar todos os tamanhos de thumbnail;
- um plugin pode gerar AVIF mas não escrever o markup de fallback;
- uma CDN pode suportar AVIF só em certos planos ou com certos cabeçalhos Accept;
- a codificação local no navegador pode funcionar em um e falhar em outro;
- seu build pode ficar mais lento ao gerar AVIF para cada imagem.
Antes de assumir AVIF num site grande, teste a pipeline exata: upload, resize, geração de variantes, render de HTML, deploy, crawl e abertura do resultado no Safari, no Chrome, no Firefox e num celular de entrada.
O que escolher
Para a maioria dos projetos web em 2026, WebP é a escolha pragmática. AVIF é a escolha de performance quando a pipeline está pronta.
Escolha WebP quando
- Você quer um formato moderno que funcione em quase todo lugar.
- Precisa de conversão rápida local ou via navegador.
- O site é pequeno o suficiente para que o transfer de imagens não seja o maior gargalo.
- Seu CMS ou plataforma de e‑commerce não gera fallbacks AVIF limpos.
- Suas imagens incluem muitas capturas, diagramas, capturas de UI ou thumbnails pequenos.
- Você manda imagens para e‑mail, marketplaces ou plataformas terceiras onde o suporte AVIF é incerto.
Escolha AVIF (com fallback WebP ou JPEG) quando
- As imagens dominam o peso da página ou o LCP.
- Você tem muitas fotos grandes, galerias, hero ou landings pesadas em mídia.
- Você codifica em tempo de build, por CDN ou em pipeline offline.
- Seu tooling emite AVIF, WebP e markup de fallback JPEG/PNG automaticamente.
- Você consegue avaliar qualidade em imagens reais em vez de confiar num único benchmark.
- Seu público está majoritariamente em navegadores modernos.
Mantenha JPEG ou PNG quando
- A imagem precisa sobreviver a clientes antigos, e‑mails, documentos ou downloads.
- Você precisa de um arquivo master para editar ou arquivar.
- A imagem é um logo, ícone, diagrama ou captura onde saída sem perdas importa.
- Uma plataforma vai recomprimir o upload de qualquer forma.
Como testar AVIF vs WebP no seu próprio site
Não decida só a partir de um benchmark genérico. Teste com suas imagens de verdade.
- Escolha de 10 a 20 imagens reais: fotos hero, fotos de produto, thumbnails, capturas e qualquer imagem com texto.
- Exporte WebP e AVIF em configurações razoáveis. Numa primeira passada, compare WebP na faixa de 80–85 e AVIF na faixa de 60–75, depois ajuste no olho.
- Confira a saída no tamanho final renderizado, não só a 100 %.
- Olhe de perto rostos, céus, degradês, tecidos, etiquetas de produto, texto e bordas duras.
- Compare o peso total de imagens da página, não só um arquivo.
- Rode o Lighthouse ou sua ferramenta de performance antes e depois.
- Teste o render do fallback desativando o suporte AVIF ou abrindo a página em um navegador/dispositivo sem AVIF.
Se AVIF economiza só alguns kilobytes em um thumbnail, pule a complexidade. Se remove centenas de kilobytes da hero LCP, use com markup de fallback.
Usando o PhotoTools para conversões rápidas
O PhotoTools ajuda quando você precisa inspecionar ou preparar arquivos manualmente antes de subir para o site.
- Use o conversor de JPG para WebP quando quer um export rápido no navegador que funciona na maioria dos sites modernos.
- Use o conversor de JPG para AVIF quando quer comparar uma versão AVIF com WebP antes de investir numa pipeline.
- Use a conversão de AVIF para JPG ou PNG quando um arquivo AVIF precisa ir para uma ferramenta, cliente ou plataforma que não consegue abrir.
O conversor roda no navegador usando a Canvas API nativa. É conveniente para lotes rápidos e fluxos sem upload, mas não substitui uma CDN automatizada ou um pipeline de build num site grande.
Fontes consultadas
Este artigo foi revisto em 18 de julho de 2026 frente às recomendações atuais de formato e suporte: documentação WebP do Google, guia AVIF do web.dev, orientações do Chrome Lighthouse sobre imagens modernas, Can I use AVIF e Can I use WebP.