JPG vs PNG vs WebP vs AVIF: Escolhendo o Formato de Imagem Certo em 2026

Se você publica imagens na web, o formato que escolhe tem mais impacto no peso da página do que quase qualquer outra decisão individual. Uma imagem de hero de 4 MB versus uma de 180 KB é a diferença entre um site que parece instantâneo e um que se arrasta em um Android intermediário sobre uma conexão 4G instável. Em 2026 temos quatro concorrentes mainstream que vale a pena considerar: o veterano JPG, o lossless PNG, o agora universal WebP, e o cada vez mais maduro AVIF.

Este guia percorre como cada formato realmente funciona por baixo dos panos, de onde vêm as economias de bytes, quais compensações você aceita, e uma recomendação clara de quando usar qual. Ao final você deve conseguir responder à pergunta "qual é o melhor formato de imagem para a web em 2026?" sem floreios, e deve saber exatamente o que fazer quando um designer te entregar um PNG de captura de tela de 28 MB às 17h de sexta-feira.

O elenco de personagens

O JPG (às vezes escrito JPEG) foi padronizado em 1992 e ainda é o formato no qual a maioria das câmeras fotografa. Ele usa uma transformada discreta de cossenos (DCT) em blocos 8x8, quantiza os coeficientes de frequência e codifica o resultado com Huffman. É lossy por design e não tem canal alfa, mas é rápido, barato de decodificar e suportado literalmente em todo dispositivo construído nos últimos trinta anos.

O PNG chegou em 1996 como um substituto sem patentes para o GIF. Ele usa DEFLATE (o mesmo algoritmo do zip e do gzip) sobre filtros de linha opcionais, então é totalmente lossless. O PNG suporta um canal alfa real de 8 bits, paletas indexadas e até cores de 16 bits por canal. O preço a pagar é o tamanho do arquivo: conteúdo fotográfico comprime mal com DEFLATE.

O WebP foi publicado pelo Google em 2010 e atingiu suporte total entre navegadores por volta de 2020. WebP lossy usa codificação intra-frame VP8 (os mesmos modos de predição do codec de vídeo VP8) em vez do DCT puro. WebP lossless usa VP8L, um formato customizado com truques de cache de cor e transformação de preditor. O WebP suporta alfa em ambos os modos além de animação.

O AVIF é o perfil de imagem estática do AV1, o codec de vídeo finalizado em 2018 e adotado por praticamente todos até 2024. Ele usa blocos de predição muito maiores e mais inteligentes, mais opções de transformação e um codificador de entropia vastamente melhor que o do VP8. O AVIF suporta cor de até 12 bits, alfa, HDR e animação.

Como a compressão realmente funciona

O JPG divide a imagem em blocos 8x8, aplica um DCT a cada bloco e depois divide os coeficientes resultantes por uma matriz de quantização. Frequências altas são esmagadas mais do que frequências baixas porque o olho humano é menos sensível a detalhes finos. Configurações de qualidade mais baixas apenas multiplicam essa matriz de quantização por um escalar maior. É por isso que artefatos JPG parecem ringing em blocos em torno de bordas duras: o codificador literalmente não pode se dar ao luxo de manter os coeficientes de alta frequência que descrevem a borda.

O PNG não faz nenhuma compressão perceptual. Cada linha de pixels recebe um prefixo de filtro de um byte (None, Sub, Up, Average ou Paeth) que prediz cada pixel a partir de seus vizinhos, e então o DEFLATE comprime os resíduos. Se sua imagem é uma fotografia, os resíduos ainda são ruído de alta entropia e você economiza muito pouco. Se for uma captura de tela cheia de cores sólidas repetidas e bordas nítidas, as economias são enormes.

O WebP lossy pega emprestada a predição intra espacial do VP8: cada bloco 4x4 ou 16x16 é predito a partir de pixels vizinhos já decodificados usando um dos dez modos de predição, e apenas o resíduo é transformado e quantizado. Predição melhor significa resíduos menores, o que significa menos bits. WebP lossless (VP8L) vai além com um cache de cor customizado, transformações de paleta e um codificador de entropia adaptativo ao contexto.

O AVIF essencialmente usa um codificador de keyframe de vídeo moderno inteiro. Tamanhos de bloco vão de 4x4 até 128x128, transformações incluem DCT, ADST e identidade em múltiplos tamanhos, e há mais de 56 modos de predição intra incluindo preditores direcionais em granularidade angular fina. O codificador aritmético estilo CABAC empacota significativamente mais informação por bit do que as tabelas de Huffman do JPG. O resultado é arquivos cerca de 50% menores que JPG na mesma qualidade visual, ao custo de codificação muito mais pesada.

Tamanho de arquivo de relance

Mesma foto 4000x3000 (paisagem diurna, sem transparência):
JPG  (q=85)   ->  1.180 KB
JPG  (q=92)   ->  1.940 KB
PNG  (24-bit) -> 12.420 KB
WebP (q=85)   ->    810 KB
WebP (lossless) -> 9.860 KB
AVIF (q=60)   ->    495 KB
AVIF (q=80)   ->    760 KB

Mesma captura de UI 1920x1080 (cores chapadas, texto nítido):
JPG  (q=92)   ->    410 KB  (bordas do texto com franjas visíveis)
PNG  (8-bit indexado) ->  92 KB
PNG  (24-bit) ->    280 KB
WebP (lossless) ->  74 KB
AVIF (lossless) ->  88 KB

Duas conclusões desses números. Primeiro, em fotografias naturais o AVIF é cerca de 40 a 60 por cento menor que JPG e 30 a 40 por cento menor que WebP em qualidade percebida equivalente. Segundo, em conteúdo sintético como capturas de tela e exportações de UI, o WebP lossless normalmente vence completamente, com o PNG-8 em segundo lugar quando a paleta cabe.

Suporte de navegadores em 2026

JPG e PNG: 100 por cento. Não há nada a discutir. Funcionam em todo lugar onde existe um navegador, incluindo tablets Android de dez anos atrás e WebViews embutidos que você esqueceu.

WebP: efetivamente 100 por cento do tráfego de navegadores. O Safari lançou suporte no iOS 14 e no macOS Big Sur em 2020, o Chrome e o Firefox o têm há muito mais tempo, e até a maioria dos navegadores in-app agora o decodifica. Em 2026, servir WebP sem um fallback JPG não é mais imprudente para um site consumidor típico.

AVIF: aproximadamente 95 a 97 por cento dos navegadores em 2026. Chrome, Edge, Firefox, Safari (16.4+) e os principais WebViews Android todos o decodificam. A lacuna restante é principalmente Android muito antigo, alguns WebViews embutidos em TVs inteligentes mais antigas e uma longa cauda de dispositivos corporativos bloqueados. Para um site público, AVIF com fallback WebP ou JPG é um padrão seguro.

Transparência, animação e profundidade de cor

O JPG não tem canal alfa nenhum. Se você precisa de qualquer tipo de transparência, não pode usá-lo. Essa é a razão mais comum pela qual designers recorrem ao PNG quando não deveriam.

O PNG oferece um verdadeiro canal alfa de 8 bits e suporta até 16 bits por canal de cor, o que o torna útil para intermediários de alta precisão em pipelines gráficos. Não há animação no PNG padrão; o APNG existe mas o suporte é irregular fora de stickers e emojis.

O WebP suporta alfa em ambos os modos lossy e lossless e tem suporte sólido de animação significativamente mais eficiente que o GIF animado. A profundidade de cor é 8 bits por canal, o que é suficiente para quase todo conteúdo web.

O AVIF suporta alfa, animação, cor de 10 e 12 bits, gamas amplas e funções de transferência HDR. Se você está publicando fotografia HDR ou arte em gama ampla, o AVIF é atualmente o único formato web mainstream que pode carregar os dados fielmente.

Decodificação por hardware e energia

A decodificação de JPG é tão barata em hardware moderno que realmente não importa; até um celular de 2015 decodifica JPGs mais rápido do que a tela pode exibir. A decodificação de PNG é mais pesada por pixel porque o DEFLATE não é amigável ao paralelismo, mas payloads de PNG geralmente são menores por imagem em uso de capturas de tela, então isso se equilibra na prática.

A decodificação WebP lossy usa o mesmo caminho de silício VP8 que os chips móveis têm há mais de uma década. A decodificação é rápida e eficiente em energia. A decodificação WebP lossless é apenas em software na maioria dos chips, mas ainda dentro do orçamento.

O AVIF é onde as coisas ficam interessantes. A decodificação em software é genuinamente mais pesada que JPG ou WebP, ocasionalmente por um fator de três a cinco em uma única imagem. A boa notícia é que a maioria dos celulares lançados após 2022 tem decodificação AV1 por hardware que o navegador pode rotear imagens estáticas; nesses dispositivos o AVIF é de fato tão rápido quanto JPG ou mais rápido. Em laptops mais antigos sem silício AV1, decodificar uma parede de miniaturas AVIF pode aparecer em perfis de CPU, então use-o com critério e apoie-se em markup de imagem responsiva para que a menor variante seja sempre a decodificada.

Quando usar cada um: a versão curta

• Use JPG para fotografias quando você precisa do máximo de compatibilidade absoluta e não quer manter múltiplas variantes. Qualidade 82 a 88 é o ponto ideal usual.
• Use PNG para capturas de tela, exportações de UI, logos com bordas duras e qualquer coisa que precise de transparência lossless de emergência. Prefira PNG 8-bit indexado quando a paleta couber.
• Use WebP como formato web padrão em 2026. WebP lossy para fotos, WebP lossless para ativos de UI e ícones que antes seriam PNG.
• Use AVIF quando largura de banda e Core Web Vitals importam mais, quando você está servindo conteúdo HDR ou de gama ampla, ou quando você quer a menor imagem LCP possível. Sempre combine-o com um fallback WebP ou JPG através do elemento picture.
• Evite GIF inteiramente. WebP e AVIF animados são menores e parecem melhores no mesmo orçamento de bytes.

Um fluxo de conversão prático

A maioria das equipes não precisa de um pipeline de build elaborado para tirar proveito dos formatos modernos. O fluxo mínimo viável é simples: mantenha a exportação original da câmera ou da ferramenta de design como sua fonte de verdade, depois gere variantes JPG, WebP e AVIF no momento do deploy. Para conversões únicas, uma CLI faz o trabalho em segundos.

# Converter uma única foto para todas as três variantes modernas
cwebp -q 85 hero.jpg -o hero.webp
avifenc --min 20 --max 30 -s 6 hero.jpg hero.avif

# Use o elemento picture para que o navegador escolha o melhor que entende
# <picture>
#   <source srcset="hero.avif" type="image/avif">
#   <source srcset="hero.webp" type="image/webp">
#   <img src="hero.jpg" alt="..." width="1600" height="900">
# </picture>

Se você não quer instalar ferramentas de linha de comando e só tem um punhado de imagens, o Multilities oferece um conversor de imagem baseado em navegador em /tools/image-convert que lida com JPG, PNG, WebP e AVIF em qualquer direção sem enviar seus arquivos para lugar nenhum; tudo roda na sua aba. Para espremer bytes extras de um JPG ou PNG existente sem mudar o formato, /tools/image-compress re-codifica em uma qualidade que você escolhe e te mostra as contagens de bytes antes e depois.

WebP vs PNG: a pergunta que não morre

A confusão mais comum em 2026 ainda é WebP vs PNG. A resposta curta: WebP lossless é estritamente melhor que PNG para quase todo caso de uso web. Ele é menor, suporta o mesmo canal alfa, e todo navegador que importa o decodifica. As únicas razões para continuar usando PNG hoje são ferramentas downstream que não aceitam WebP (algumas redes de anúncios, alguns plugins de CMS legados, alguns fluxos de impressão) e o fato de que PNG é o formato de intercâmbio de facto entre designers.

Se você está construindo um novo produto do zero, padronize seu pipeline de ativos para WebP lossless para UI e AVIF lossy para fotos, e só caia para PNG e JPG quando algo se recusar a aceitar o formato moderno.

Pegadinhas comuns

• Não re-codifique um JPG como outro JPG em qualidade mais alta esperando que o arquivo pareça melhor. A quantização original já jogou fora informação; você só vai deixar o arquivo maior.
• Não salve capturas de tela como JPG. O ringing em blocos em torno do texto é inconfundível e irreversível. Use PNG ou WebP lossless.
• Atenção ao perfil de cor. AVIF e codificadores WebP modernos preservam perfis ICC por padrão; ferramentas mais antigas os removem e sua imagem vai mudar de matiz em telas de gama ampla.
• Teste a escala de qualidade do seu codificador AVIF. Codificadores diferentes usam convenções diferentes: libavif usa uma qualidade 0 a 100, enquanto avifenc historicamente usou um quantizador mín/máx de 0 a 63 onde menor é melhor.
• Se você está usando um CDN que re-codifica na hora, certifique-se de que ele esteja realmente negociando AVIF via o cabeçalho Accept. Muitos CDNs por padrão só negociam WebP, a menos que você ative uma configuração.

E quanto ao JPEG XL?

O JPEG XL é um formato genuinamente bom, tecnicamente competitivo com AVIF e com o truque único de poder transcodificar sem perdas JPGs existentes em cerca de 20 por cento menor. Em 2026 o Safari o distribui, o Firefox o suporta atrás de uma flag, e o Chrome ainda não o habilita por padrão. Até que isso mude, trate o JXL como um formato para observar, não para implantar. O AVIF é o formato moderno com suporte multi-navegador hoje.

A árvore de decisão em 30 segundos

Se é uma fotografia, gere AVIF e WebP, com fallback para JPG. Se tem transparência ou bordas nítidas, gere WebP lossless, com fallback para PNG. Se você não pode rodar um passo de build, envie JPG para fotos e PNG para todo o resto e siga sua vida. Formatos de imagem não são mais um projeto de pesquisa em 2026; as respostas estão majoritariamente decididas e o ferramental está maduro. Escolha o formato certo, configure um fallback e gaste o tempo economizado em outra coisa.