Comparativo de formatos: JPEG, PNG, WebP e AVIF
Quatro formatos cobrem mais de 99% das imagens na web moderna, com trade-offs distintos entre compressão, transparência, animação e suporte. Guia prático para escolher o certo.
Comparativo lado a lado
Visão geral; abaixo, cada formato em detalhe.
| Propriedade | JPEG ? | PNG ? | WebP ? | AVIF ? |
|---|---|---|---|---|
| Compressão | Com perda | Sem perdas | Com e sem perdas | Com e sem perdas |
| Alfa (transparência) | Não | Sim (8 bits) | Sim (8 bits) | Sim (completo) |
| Animação | Não | Somente APNG | Sim | Sim |
| Profundidade máx. de bits | 8 bits | 16 bits | 8 bits | 10/12 bits |
| Tamanho típico vs JPEG (fotos) | 100% | 300–1000% | 65–75% | 40–60% |
| Suporte em navegadores | Universal | Universal | Chrome 32, Firefox 65, Safari 14 | Chrome 85, Firefox 93, Safari 16 |
| Velocidade típica de codificação | Rápida | Rápida | Média | Lenta |
JPEG — a base universal
Como funciona
O JPEG (Joint Photographic Experts Group) foi padronizado em 1992 e é o mais antigo dos quatro. Usa DCT com perda em blocos de 8×8 pixels, seguida de quantização e codificação entrópica. A qualidade é controlada por um número de 1 a 100. Codificadores modernos como MozJPEG retiram mais 10–20% sem alterar o bitstream, de modo que qualquer decodificador JPEG os lê.
Ideal para
Conteúdo fotográfico com gradientes suaves e bastante detalhe: retratos, paisagens, produto, imagens principais.
Vantagens
- Suportado por praticamente qualquer visualizador de imagens.
- Decodificação acelerada por hardware na maior parte dos dispositivos.
- Ecossistema maduro de otimizadores (MozJPEG, jpegli).
Limitações
- Sem canal alfa: fundos precisam ser opacos.
- Artefatos de bloco em texto, linhas e bordas nítidas.
- Apenas 8 bits por canal.
PNG — sem perdas e com transparência
Como funciona
O PNG (Portable Network Graphics) surgiu nos anos 90 como substituto livre do GIF. É estritamente sem perdas: compressão DEFLATE sobre filtros de pixels por linha. Otimizadores como oxipng (Rust) testam combinações de filtro/compressão para a representação mínima sem alterar um único pixel.
Ideal para
UI, ícones, capturas, diagramas, linhas, logotipos de cores planas e tudo o que exija alfa fiel.
Vantagens
- Sem perdas: os pixels chegam inteiros na ida e na volta.
- Alfa de 8 bits, até 16 bits por canal.
- Suporte universal.
Limitações
- Grande em fotos: muitas vezes várias vezes maior que JPEG/WebP/AVIF.
- Sem animação na especificação original (APNG é extensão posterior).
WebP — o formato web do Google
Como funciona
O WebP (2010) baseia-se no codec de vídeo VP8 e traz um modo sem perdas separado. Um único contentor cobre compressão com e sem perda, alfa e animação opcionais. Com perda, costuma vencer o JPEG em 25–35% na mesma qualidade. Sem perda, costuma vencer o PNG em 20–30%.
Ideal para
Entrega web geralmente quando o AVIF ainda não é seguro no público-alvo: fotos, sprites com transparência, substitutos de GIF animado e camada de fallback abaixo do AVIF.
Vantagens
- Um formato cobre fotos, gráficos, alfa e animação.
- Claramente menor que JPEG e PNG em qualidade comparável.
- Amplo suporte: navegadores atuais desde 2020.
Limitações
- 8 bits por canal: sem HDR.
- Em alguns dispositivos modestos, decodifica mais devagar que o JPEG.
AVIF — referência em compressão
Como funciona
O AVIF (AV1 Image File Format) é um perfil de imagem estática do codec de vídeo AV1
(2019, Alliance for Open Media). Suporta até
12 bits, alfa completo, HDR, gama amplia e grão. O
codificador de referência (aom-av1 via libavif) é lento, mas
oferece hoje a melhor compressão em fotos reais.
Ideal para
Imagens principais, galerias e onde a largura de banda importa mais que a CPU. Boa camada de topo no
<picture>.
Vantagens
- Compressão de referência: frequentemente 40–60% menor que JPEG.
- Alfa, animação, HDR, gama ampla e 10/12 bits.
- Livre de royalties e aberto.
Limitações
- Lento ao codificar: melhor no build ou de forma assíncrona.
- O Safari só adicionou suporte na versão 16 (2022).
- Em gráficos sintéticos, perde para WebP sem perdas ou PNG.
Qual formato devo usar?
- Fotos e heróis a página cheia: AVIF primeiro, WebP e JPEG como fallback via
<picture>. - UI com transparência (ícones, logotipos): PNG para legado, WebP sem perdas para peso.
- Linha, capturas, diagramas: PNG (ou WebP sem perdas); JPEG/AVIF destroem bordas duras.
- Substituir GIFs animados: WebP ou AVIF, bem menores, com alfa real.
- Um formato em todo lugar, hoje: JPEG para fotos, PNG para gráficos. Não é o menor tamanho, mas zero dívida de compatibilidade.
Na prática, não precisa escolher só um. Sirva AVIF, depois WebP e, por fim,
JPEG ou PNG dentro de
<picture>: cada navegador pega a menor variante que consegue decodificar.
Perguntas frequentes
Como converto JPG em WebP?
Abra PicBrewery, solte o JPG na área de envio e o WebP será gerado automaticamente com JPEG, PNG e AVIF. Escolha a célula WebP e o ícone para descarregar. Tudo acontece no navegador; o ficheiro não é enviado.
Como converto PNG em AVIF?
Solte o PNG no PicBrewery. A recodificação em JPEG, WebP e AVIF roda em paralelo em Web Workers. Use a coluna AVIF para descarregar, ou várias linhas em um ZIP com a variante menor por origem.
AVIF é melhor que WebP?
Em fotos, o AVIF costuma ser 20–30% menor que o WebP na mesma qualidade aparente, graças ao AV1. O WebP ganha em velocidade de codificação e em compatibilidade em dispositivos antigos; eles se complementam.
O Safari suporta WebP?
Sim, desde a versão 14 (macOS Big Sur, iOS 14, 2020). As versões atuais decodificam WebP com e sem perda.
PNG é sempre sem perdas?
Sim. O DEFLATE do PNG é estritamente sem perdas: os pixels decodificados são idênticos à fonte. A economia vem de filtros e ajuste DEFLATE (por exemplo, oxipng), nunca de descartar dados de imagem.
JPEG pode ter transparência?
Não. O JPEG clássico não tem alfa. Para transparência, PNG, WebP ou AVIF. O JPEG XL adiciona alfa, mas ainda sem suporte amplo.
Quanto o AVIF é menor que o JPEG?
Com codificador AVIF moderno (aom / libavif), as fotos costumam ficar 40–60% abaixo do MozJPEG em qualidade similar. Em gráficos simples, a economia é menor.
Meu navegador decodifica AVIF?
Chrome 85+, Firefox 93+, Edge 121+, Safari 16+. Para entrega
ampla, <picture> com fallback WebP ou JPEG.
O PicBrewery roda só no cliente?
Sim. Decodifica e recodifica em WebAssembly em Web Workers no seu aparelho. Nenhum byte de imagem é enviado: só a aplicação estática e os codecs são carregados.
Converter entre formatos
Procura uma conversão específica? Escolha um par: cada página traz passos, economia típica e FAQ próprio.
Teste com suas imagens
Solte um lote de JPGs no PicBrewery e veja WebP e AVIF na mesma linha. Nada é enviado.