WebP vs AVIF vs JPEG XL: qual formato usar em 2026
Os três prometem imagens mais leves que JPEG e PNG, mas não são intercambiáveis. Este guia resume suas diferenças reais e como combiná-los.
Resumo rápido
- AVIF: a melhor compressão que você pode servir hoje para quase todos os navegadores. Use como formato principal para fotografias.
- WebP: compatibilidade universal e codificação rápida. O melhor fallback do AVIF e uma opção sólida por si só.
- JPEG XL: tecnicamente o mais completo, mas com suporte limitado nos navegadores. Útil para arquivamento e como fonte adicional em
<picture>.
Se você só tem tempo para uma decisão: gere AVIF + WebP (ou AVIF + JPEG se precisar de compatibilidade com softwares antigos) e sirva os dois com <picture>.
Como eles comprimem
Os três formatos se baseiam em ideias parecidas —dividir a imagem em blocos, transformá-los para o domínio da frequência e descartar a informação que o olho percebe menos—, mas com ferramentas de gerações diferentes.
O WebP (2010) deriva do codec de vídeo VP8. Usa blocos de tamanho fixo, predição intraquadro e um filtro de desbloqueio que suaviza as bordas entre blocos. Seu modo com perdas sempre reduz a resolução da cor pela metade (4:2:0).
O AVIF (2019) usa o AV1, um codec de vídeo muito mais moderno. Suporta blocos de tamanhos variáveis (de 4×4 até 128×128), dezenas de modos de predição, filtros de restauração e profundidade de 10 ou 12 bits. Por isso se destaca em qualidades médias e baixas: onde o JPEG mostra blocos e o WebP borra, o AVIF mantém bordas limpas.
O JPEG XL (2021) foi projetado especificamente para imagens. Combina uma transformada variável (VarDCT) com um modo modular sem perdas, decodificação progressiva real e a possibilidade de recomprimir um JPEG existente sem perdas, economizando cerca de 20%.
Tamanho de arquivo
Os números exatos dependem de cada imagem, mas em fotografia, com a mesma qualidade percebida, a ordem habitual é:
| Formato | Tamanho relativo ao JPEG (MozJPEG) |
|---|---|
| JPEG | 100% |
| WebP | 70-80% |
| JPEG XL | 55-70% |
| AVIF | 50-65% |
A vantagem do AVIF cresce quanto mais agressiva é a compressão. Em qualidades muito altas (quase sem perdas), o JPEG XL costuma igualá-lo ou superá-lo.
Em gráficos planos —capturas de tela, diagramas, ícones—, o vencedor muda: WebP sem perdas e JPEG XL sem perdas costumam superar o AVIF, e ambos são melhores que o PNG.
Qualidade visual e artefatos
Cada formato falha de um jeito diferente quando é exigido demais:
- JPEG: blocos de 8×8 e "mosquitos" ao redor das bordas.
- WebP: perda de textura fina, aspecto "plástico" e cor vazando em bordas saturadas por causa do 4:2:0.
- AVIF: suavização de texturas muito finas (grama, tecidos) em qualidades baixas, embora as bordas continuem nítidas.
- JPEG XL: degradação mais gradual e parecida com ruído, menos chamativa.
Para capturas de tela ou imagens com texto, a subamostragem de cor importa mais que o formato. AVIF e JPEG XL suportam 4:4:4; o WebP com perdas não, por isso para texto convém o WebP sem perdas.
Velocidade de codificação e decodificação
O WebP é, de longe, o mais rápido de codificar. O AVIF é o mais lento: uma foto grande pode levar vários segundos com esforço alto. O JPEG XL fica entre os dois e é muito rápido de decodificar.
Para um site, o tempo de codificação só importa na hora de publicar. A decodificação afeta o usuário, mas nos três formatos ela é rápida o bastante em dispositivos atuais para não ser um problema.
Compatibilidade em 2026
| Formato | Chrome / Edge | Firefox | Safari | Cobertura aproximada |
|---|---|---|---|---|
| WebP | Sim | Sim | Sim (14+) | ~97% |
| AVIF | Sim (85+) | Sim (93+) | Sim (16.4+) | ~95% |
| JPEG XL | Em desenvolvimento | Em desenvolvimento | Sim (17+) | Limitada |
Fora do navegador, WebP e AVIF abrem no Windows 11, macOS recente, Android e iOS. O JPEG XL tem bom suporte em editores profissionais (Photoshop, GIMP, Affinity), mas não em todos os visualizadores.
Qual formato usar em cada caso
| Caso | Recomendação |
|---|---|
| Imagem principal (hero) | AVIF 55-65 + WebP ou JPEG de fallback |
| Fotos de produto | AVIF 60-65 + WebP |
| Miniaturas e listagens | WebP 75-80 (a economia extra do AVIF é pequena em imagens pequenas) |
| Capturas de tela e UI | WebP sem perdas, ou AVIF 4:4:4 em qualidade alta |
| Logotipos | SVG; se for bitmap, WebP sem perdas |
| Arquivo fotográfico | JPEG XL sem perdas ou recompressão de JPEG |
| E-mail, documentos, redes | JPEG otimizado com MozJPEG |
Como servi-los juntos
O elemento <picture> permite oferecer vários formatos e deixar o navegador escolher o primeiro que suportar:
<picture>
<source type="image/avif" srcset="foto.avif">
<source type="image/webp" srcset="foto.webp">
<img src="foto.jpg" width="1600" height="900" alt="Descrição">
</picture>
A ordem importa: do mais eficiente ao mais compatível. Se incluir JPEG XL, coloque-o primeiro; o Safari vai usá-lo e os demais navegadores vão ignorá-lo. No guia sobre o elemento picture explicamos os detalhes.
Perguntas frequentes
O AVIF é sempre melhor que o WebP?
Em fotografia com qualidades médias, quase sempre. Em imagens pequenas, gráficos planos ou quando você precisa codificar muito rápido, o WebP pode ser a melhor opção.
Vale a pena usar JPEG XL em um site?
Só como fonte adicional dentro de <picture>. Sozinho, a maioria dos usuários não conseguiria vê-lo.
Preciso continuar gerando JPEG?
Se o seu público usa navegadores modernos, AVIF + WebP é suficiente. O JPEG continua útil para Open Graph (algumas redes não aceitam formatos modernos), e-mails e downloads.
Que qualidade é equivalente entre os formatos?
Como orientação: AVIF 60 ≈ JPEG XL 75-80 ≈ WebP 80 ≈ JPEG 85. Confira sempre com suas próprias imagens no comparador.