Como a compressão de imagem funciona: JPEG, PNG, WebP e AVIF explicados

A resposta prática

A compressão de imagem não é uma competição em que um formato ganha sempre. É um conjunto de trade-offs: qual detalhe você pode descartar, qual detalhe precisa continuar exato, quanto tempo de CPU você pode gastar e onde o arquivo precisa funcionar depois da exportação.

Use isto como ponto de partida prático:

• Use JPEG para fotos que precisem de máxima compatibilidade, sobretudo em e-mail, downloads, apps antigos, portais de impressão e formulários de upload rígidos.
• Use PNG para capturas de tela, capturas de interface, diagramas, logotipos e gráficos transparentes quando os pixels precisam ficar exatos.
• Use WebP como formato web moderno do dia a dia quando quiser arquivos menores que JPEG ou PNG com amplo suporte de navegadores.
• Use AVIF para imagens fotográficas grandes e de alto tráfego quando seu site puder servir fallbacks WebP ou JPEG e tolerar uma codificação mais lenta.

Parece simples, mas os detalhes importam. Uma foto de produto, uma foto de passaporte, uma captura de software e uma marca-d’água transparente são todas "imagens". Elas não se comprimem do mesmo jeito.

Escolha pelo trabalho, não pela extensão

Antes de entrar nos codecs, decida o que a imagem precisa fazer:

É também por isso que conselhos de formato podem parecer contraditórios. "Use AVIF porque é menor" pode ser bom conselho para uma hero image num build de site estático. O mesmo conselho pode ser ruim para uma imagem enviada por um cliente que precisa ser aceita por um formulário oficial, cliente de e-mail ou CMS antigo.

As duas famílias de compressão

Todo formato de imagem deste guia usa compressão sem perda, compressão com perda ou ambas.

Compressão sem perda remove redundância matemática e reconstrói exatamente os mesmos pixels na decodificação. Se uma captura tem fundo branco, cores de interface repetidas e bordas retas repetidas, um formato sem perda consegue descrever esses padrões de forma compacta. PNG é o clássico formato web sem perda. WebP também tem um modo sem perda.

Compressão com perda descarta permanentemente informações da imagem para diminuir o arquivo. O truque é descartar as informações que as pessoas têm menos probabilidade de perceber no tamanho final de exibição. JPEG é com perda. WebP e AVIF podem ser com ou sem perda, embora a maior parte da entrega web use os modos com perda para fotos.

O erro a evitar é tratar "com perda" como automaticamente ruim e "sem perda" como automaticamente profissional. Para uma foto de blog em 1600 px, um WebP com perda cuidadosamente comprimido pode parecer inalterado na página e economizar bastante banda. Para uma captura de software com texto de menu pequeno, uma exportação com perda pode parecer borrada mesmo com um ótimo peso de arquivo.

Os quatro formatos num relance

O padrão não é "o mais novo sempre vence". Formatos mais novos podem fazer mais análise e empacotar dados de forma mais eficiente, mas isso pode custar tempo de codificação, tempo de QA e complexidade de fallbacks.

Por que o mesmo número de qualidade não é a mesma qualidade

Um JPEG salvo em qualidade 80 e um WebP salvo em qualidade 80 não usam a mesma escala. O número é passado ao modelo próprio de cada encoder. Ele age sobre decisões internas diferentes e pode ser mapeado de forma diferente por ferramentas diferentes.

Por isso a compressão prática precisa de duas verificações:

1. Olhe a imagem no tamanho em que ela vai aparecer. Uma miniatura de card de produto deve ser julgada como miniatura de card de produto, não com 400 % de zoom.
2. Compare bytes quando a imagem já tem as dimensões certas. Redimensionar um original de câmera de 5000 px para uma imagem web de 1600 px normalmente economiza mais do que puxar o controle de qualidade demais para baixo.

Se for converter uma pasta em lote, teste alguns casos difíceis antes de exportar tudo: um rosto, um céu, uma sombra escura, uma captura cheia de texto, uma borda transparente e uma foto de interior com ruído.

JPEG: por que as fotos ficam pequenas e por que o texto fica feio

JPEG é o velho cavalo de batalha para imagens fotográficas porque foi construído em torno de como as fotos se comportam. A Library of Congress observa que a família JPEG é normalmente usada para imagens de tom contínuo, coloridas e em escala de cinza, e que o processo clássico usa uma transformação em blocos 8×8. Em termos simples: JPEG divide a imagem em blocos pequenos, transforma cada bloco em informação de frequência e depois quantiza os detalhes que o observador tem menos probabilidade de notar.

Funciona bem para:

• rostos, roupas, edifícios, paisagens e fotos de comida;
• gradientes naturais como céu, sombras e tons de pele;
• imagens que não precisam de pixels transparentes;
• arquivos que precisam abrir em quase qualquer lugar.

Funciona mal para:

• texto pequeno em capturas de tela;
• ícones e logos com bordas duras;
• diagramas de cores planas;
• arquivos que serão editados e reexportados várias vezes;
• imagens transparentes, porque JPEG não tem canal alfa.

Os artefatos JPEG mais reconhecíveis são as bordas de bloco, o ringing ao redor do texto, o ruído mosquito em detalhes de alto contraste e o banding em gradientes suaves. Não são aleatórios. São os efeitos colaterais visíveis da compressão com perda em blocos.

Pontos fortes

• Suporte muito amplo em navegadores, sistemas, apps, clientes de e-mail, formulários e fornecedores
• Eficiente para fotos de câmera e outras imagens de tom contínuo
• Rápido de codificar e decodificar em fluxos comuns
• Fácil de pré-visualizar, anexar, enviar e compartilhar

Pontos fracos

• Sem suporte a transparência
• Artefatos ao redor de texto, bordas e gráficos de cores planas
• Exportações com perda repetidas podem acumular danos
• Frequentemente maior que WebP ou AVIF em qualidade visível semelhante para fotos web

Quando usar JPEG

Use JPEG quando a compatibilidade importar mais que os últimos kilobytes: envios de fotos de passaporte, portais de documentos, anexos de e-mail, portais de fornecedores, gráficas, CMSs antigos e fontes <img> de fallback. Use-o também quando o arquivo for principalmente uma foto e não precisar de transparência.

PNG: por que as capturas ficam nítidas e por que as fotos ficam enormes

PNG foi desenhado para imagens rasterizadas portáveis e sem perda. A especificação PNG do W3C cobre PNG estático e PNG animado, e o formato suporta cor indexada, escala de cinza, truecolor e transparência alfa opcional.

Para o trabalho web do dia a dia, o ponto-chave é simples: PNG mantém os pixels. Ele pode filtrar as linhas da imagem para deixá-las mais previsíveis e depois comprimir o resultado com DEFLATE. Se a imagem tem cores repetidas e limites nítidos, isso funciona lindamente.

Bons candidatos para PNG:

• capturas de software com texto pequeno;
• diagramas de UI e tabelas comparativas exportadas como imagem;
• logos quando SVG não está disponível;
• sobreposições transparentes, carimbos e marcas-d’água;
• gráficos que podem ser editados de novo.

Maus candidatos para PNG:

• fotos de câmera;
• grandes hero images de sites;
• fotos de produto com textura natural;
• imagens de galeria em que o peso importa mais que pixels exatos.

Uma foto em PNG costuma ser enorme porque PNG está fazendo o seu trabalho. Ele está preservando ruído, textura fina, variações minúsculas do sensor e cada mudança sutil de cor que um codec fotográfico com perda simplificaria.

Pontos fortes

• Reprodução de pixels sem perda
• Transparência por canal alfa
• Texto nítido e bordas duras
• Compressão forte para gráficos planos e repetitivos
• Formato confiável para masters editáveis e fluxos com transparência

Pontos fracos

• Arquivos grandes para fotografias
• Sem modo com perda nos fluxos PNG normais
• Pode ser mais pesado que WebP para gráficos web transparentes onde WebP é aceito

Quando usar PNG

Use PNG quando os pixels exatos importarem: capturas, documentação de UI, diagramas, gráficos simples e recursos transparentes que precisam de suporte previsível. Não use PNG como padrão para fotos de câmera, a menos que precise propositalmente de uma cópia de trabalho sem perda.

WebP: o padrão web moderno prático

WebP é útil porque cobre vários trabalhos em um único formato. A documentação da Google descreve o WebP como suportando compressão com perda, compressão sem perda, transparência, animação, metadados e perfis de cor. Isso o torna mais flexível que o JPEG e muitas vezes menor que o PNG para entrega web.

O WebP com perda baseia-se em uma codificação preditiva estilo VP8 em vez do fluxo mais antigo apenas com DCT do JPEG. O WebP sem perda usa um conjunto diferente de transformações e codificação entrópica. O resultado prático importante é que WebP costuma ser um bom padrão para bibliotecas de imagens de sites: fotos de blog, grades de produto, miniaturas, ilustrações leves e muitos recursos transparentes.

Mas WebP não é mágica e não é o melhor arquivo para enviar para todo lugar. Um navegador pode suportar WebP enquanto um cliente de e-mail, um formulário de upload, um app de design antigo, uma plataforma social ou um fluxo de impressão o rejeita. Por isso JPEG e PNG ainda importam como formatos de entrega ou compatibilidade.

Pontos fortes

• Frequentemente menor que JPEG para fotos em qualidade visível semelhante
• Suporta transparência alfa
• Suporta modos com e sem perda
• Amplo suporte nos navegadores modernos
• Codificação rápida em comparação com AVIF

Pontos fracos

• Ainda rejeitado por alguns clientes de e-mail, formulários, apps antigos, plugins de CMS e fluxos de impressão
• Não é um substituto real para logos SVG nem para arquivos-fonte de design editáveis
• Pode ser maior que AVIF em algumas imagens fotográficas grandes

Quando usar WebP

Use WebP para a maior parte da entrega de imagens de sites modernos quando você controla a página. É um padrão sólido para imagens de blog, fotos de cards de produto, miniaturas e muitos recursos web transparentes. Mantenha JPEG ou PNG disponíveis quando a imagem sair do seu site e entrar no sistema de outra pessoa.

AVIF: a opção de alta compressão que exige um pipeline

AVIF armazena dados de imagem codificados em AV1 em um formato de imagem baseado em HEIF. A especificação AVIF inclui suporte para imagens SDR e HDR, casos de uso com gamut amplo, imagens auxiliares como alfa e recursos de codificação mais avançados. O web.dev também observa que os ganhos de compressão do AVIF dependem do conteúdo da imagem, das configurações do encoder e do alvo de qualidade.

Para equipes web comuns, a história prática é esta: AVIF pode ser excelente para fotos grandes, mas é mais um formato de pipeline do que um formato para compartilhamento casual. Pode demorar mais para codificar, o suporte de pré-visualização em ferramentas mais antigas pode ficar atrasado e a gestão de fallbacks importa mais.

Bons candidatos para AVIF:

• grandes fotos hero;
• landings cheias de fotos;
• galerias editoriais;
• imagens de alto tráfego servidas muitas vezes após uma única codificação;
• imagens em que HDR, alta profundidade de bits ou gamut amplo fazem parte do fluxo.

Candidatos fracos para AVIF:

• formulários de upload rígidos;
• anexos de e-mail;
• imagens que colegas precisam abrir em ferramentas mais antigas;
• miniaturas minúsculas em que a economia não justifica a complexidade do pipeline;
• capturas com texto pequeno, a menos que você teste com cuidado.

Pontos fortes

• Compressão muitas vezes excelente para fotografias e imagens complexas
• Transparência alfa, HDR e gamut amplo
• Útil como primeira fonte em uma pilha <picture> moderna
• Bom encaixe para geração de imagens em build ou em CDN

Pontos fracos

• A codificação pode ser lenta, sobretudo em grandes lotes
• O suporte de ferramentas é menos previsível que em JPEG, PNG ou WebP
• Precisa de fallback WebP, JPEG ou PNG para uma entrega de produção mais segura

Quando usar AVIF

Use AVIF quando a imagem for grande e repetida o suficiente para que bytes menores justifiquem o trabalho extra de pipeline. Uma hero image em uma home de alto tráfego é um bom candidato. Um ícone de 90 px, um anexo de e-mail pontual ou um formulário de upload governamental normalmente não.

Por que PNG pode ganhar do JPEG em capturas de tela

Uma surpresa comum: uma captura em PNG pode ser menor e mais limpa que a mesma captura em JPEG.

Isso acontece porque as capturas costumam estar cheias de estrutura repetida. Um fundo branco de documento, uma barra de ferramentas cinza, texto preto reto, algumas cores de ícones e espaçamentos de UI repetidos são fáceis de descrever para uma compressão sem perda. JPEG não sabe que o texto deve ficar exato. Ele tenta simplificar a imagem como uma foto e o resultado pode ser um arquivo não muito menor e pior ao redor de letras e bordas.

Se a captura for principalmente uma foto, WebP ou JPEG podem ganhar. Se for principalmente interface, texto e cor plana, comece por PNG ou WebP sem perda.

Por que as fotos precisam de compressão com perda

Fotos de câmera são diferentes. Elas contêm ruído do sensor, textura fina, sombras suaves, gradientes irregulares e milhões de pequenas mudanças de pixel para pixel. A compressão sem perda tem menos repetição para explorar, portanto muitas vezes não consegue reduzir o arquivo o suficiente para a entrega web.

Formatos fotográficos com perda funcionam porque quem olha geralmente se importa com o assunto, a composição, a cor e a nitidez percebida, não com cada pixel original. Um JPEG, WebP ou AVIF cuidadosamente comprimido pode remover informações difíceis de ver no tamanho final.

O perigo é ir longe demais. Configurações de qualidade baixas podem achatar a pele, borrar tecidos, destruir o detalhe das folhas, adicionar bordas de blocos ou criar banding em céus e sombras. Se essas áreas importam para a imagem, use uma qualidade mais alta ou um arquivo de exibição maior.

Use fallbacks para a entrega web moderna

Quando você controla um site, não precisa escolher só um formato. O padrão comum em produção é servir primeiro o menor formato moderno e manter fallbacks mais seguros atrás dele.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    alt="Foto de produto em close-up em luz natural"
    width="1200"
    height="800"
  >
</picture>

O navegador usa a primeira fonte que suporta. Navegadores compatíveis com AVIF podem obter o arquivo AVIF. Os que não usam AVIF podem tentar WebP. Clientes mais antigos ou mais rígidos ainda têm o fallback JPEG.

Use PNG em vez de JPEG como fallback quando a imagem precisar de transparência ou texto exato.

Um fluxo prático de compressão

Para uma imagem:

1. Comece pela fonte de maior qualidade que você tem.
2. Redimensione primeiro para o maior tamanho real de exibição.
3. Escolha o formato conforme o trabalho da imagem.
4. Exporte uma ou duas configurações de qualidade.
5. Compare o resultado na página real ou no destino de upload.
6. Guarde o arquivo master para não precisar recomprimir a cópia publicada.

Para uma pasta de site:

1. Escolha um conjunto representativo antes de converter o lote completo.
2. Inclua fotos, capturas, gráficos transparentes, miniaturas e uma imagem escura difícil.
3. Teste WebP como formato moderno de base.
4. Teste AVIF só onde a economia de bytes fizer diferença.
5. Mantenha fallbacks JPEG ou PNG para os lugares que precisem.
6. Verifique o peso do arquivo depois de redimensionar, não antes.

O PhotoTools pode ajudar nas etapas do meio. Use Redimensionar quando a fonte for grande demais para a página, Comprimir para ajustar peso e qualidade e os conversores de formato quando um destino exigir um tipo de arquivo específico. A conversão e a compressão acontecem no seu navegador, então a imagem não é enviada para um servidor durante o fluxo da ferramenta.

Como converter entre formatos

O PhotoTools converte entre JPG, PNG, WebP, AVIF e HEIC direto no seu navegador. Solte as imagens, escolha o formato de destino, pré-visualize o resultado e baixe o novo arquivo.

Use o conversor conforme o destino:

• Precisa de um arquivo que funcione em quase qualquer formulário ou app? Converta para JPEG.
• Precisa de transparência ou pixels exatos de captura? Converta para PNG ou WebP sem perda.
• Precisa de uma imagem web menor e o site aceita? Converta para WebP.
• Precisa da compressão máxima para um pipeline web controlado? Teste AVIF com fallback.

Uma última regra salva muita qualidade de imagem: não fique indo e voltando entre formatos com perda. Se uma foto começou como JPEG de alta qualidade, converter JPEG para WebP para entrega pode ser ótimo. Converter esse WebP de volta para JPEG, editá-lo e convertê-lo de novo é onde os artefatos se acumulam. Volte ao original sempre que possível.