Guia completo de compressão de imagens: JPG, PNG e WebP por finalidade

Publicado em 2026-04-13 8 min de leitura

Resumo (TL;DR)

No último fim de semana, joguei uma foto de gato de 4,2 MB no Squoosh em qualidade WebP 80. O resultado saiu com 380 KB — uma redução de 91% — e, sinceramente, não consigo distinguir do original em nenhum tamanho realista de tela. É a compressão com perdas fazendo exatamente o que deveria fazer. Toda vez que eu esqueço disso, abro um blog e espero três segundos por uma hero JPG de 2 MB carregar via 4G, e a lição volta sozinha.

Escolher um formato de imagem é menos sobre encontrar “o melhor” e mais sobre combinar o formato com uma finalidade. Para fotografia de tom contínuo, formatos com perdas como JPEG, WebP com perdas e AVIF mantêm os arquivos pequenos com diferença perceptual mínima. Em qualidade visual semelhante, o WebP costuma gerar arquivos cerca de 25–35% menores que o JPEG, e o AVIF fica em torno de 40–50% menor que o JPEG, dependendo das configurações do encoder. Para logos, ícones, capturas de tela e qualquer caso em que bordas nítidas ou legibilidade de texto importem, formatos sem perdas como PNG, WebP sem perdas e TIFF são mais seguros. Se você precisa de transparência e animação juntas, as opções principais são WebP, APNG e AVIF. O suporte de navegadores está amplo no início de 2026: o WebP roda desde Chrome 32 (2014), Firefox 65 e Safari 14 (final de 2020), e o AVIF funciona no Chrome 85 (agosto de 2020), Firefox 93 (outubro de 2021) e Safari 16 (setembro de 2022) em diante. Uma linha de base razoável é “SVG para logos vetoriais, WebP ou AVIF para fotos, PNG para capturas de tela”, com fallback para JPEG via <picture> quando for preciso atender ambientes mais antigos.

Contexto e conceitos

Formatos com perdas (JPEG, WebP com perdas, AVIF) reduzem o tamanho do arquivo descartando informação à qual o sistema visual humano é menos sensível. Duas técnicas centrais sustentam isso. A primeira é a quantização, que arredonda coeficientes do domínio de frequência de forma mais agressiva nas frequências espaciais altas. A segunda é a subamostragem de croma (chroma subsampling), que armazena os canais de cor em resolução menor que a luminância. A configuração 4:4:4 preserva a croma em resolução total, enquanto a mais comum 4:2:0 reduz a croma pela metade nos dois eixos. Esse padrão funciona bem para fotos, mas pode borrar bordas de texto colorido — especialmente vermelho e azul sobre fundo escuro.

O JPEG, padronizado em 1992, usa uma Transformada Discreta do Cosseno (DCT, Discrete Cosine Transform) baseada em blocos, aplicada a blocos de 8x8 pixels. O WebP é construído sobre as técnicas de quadro-chave (intra-frame) do codec de vídeo VP8, e o AVIF utiliza o conjunto de ferramentas intra do AV1. Ambos são, portanto, substancialmente mais modernos que o JPEG na forma de prever, transformar e quantizar a imagem, com blocos maiores, predição direcional e codificação de entropia melhor. Já o PNG é outra história: é um formato sem perdas que usa a família de compressão deflate, com suporte nativo a transparência alfa e cor indexada por paleta. O PNG nunca descarta dados, mas, para conteúdo fotográfico, essa pureza tem o custo de arquivos muito maiores.

Um conceito relacionado é a decodificação progressiva. JPEG progressivo e PNG entrelaçado deixam o usuário ver uma versão de baixa resolução imediatamente e refiná-la conforme mais bytes chegam. Hoje, WebP e AVIF tendem a decodificar em uma única passagem, o que importa principalmente em imagens muito grandes ou conexões lentas. O SVG, por fim, não é um formato raster comprimido: é uma descrição vetorial, e o tamanho depende do número de formas e da compressão do próprio texto (gzip e brotli são muito eficazes em SVG).

Comparação e dados

FormatoCom perdasSem perdasTransparênciaAnimaçãoCompressão típica (foto)Suporte de navegadores em 2025
JPEGSimNãoNãoNãoCerca de 10:1Todos os navegadores
PNGNãoSimSimExtensão APNGCerca de 2–3:1Todos os navegadores
WebPSimSimSimSim25–35% menor que JPEGSafari 14 (2020) em diante, praticamente universal
AVIFSimSimSimSim40–50% menor que JPEGChrome 85+, Firefox 93+, Safari 16+
GIFSim (paleta de 256 cores)NãoApenas 1 bitSimRuim para fotosTodos os navegadores

Trate esses números como tendências gerais. A compressão real depende muito do conteúdo, do encoder, do preset e do alvo de qualidade. O mesmo JPEG em qualidade 85 e qualidade 60 pode diferir em 3–4x no tamanho, e a vantagem do AVIF se reduz quando você usa presets rápidos. Benchmarks publicados pelo Google e pela Mozilla entre 2019 e 2023 reportaram economias do WebP em torno de 26% a 34% versus JPEG no mesmo SSIM, e do AVIF em torno de 40% a 50% versus JPEG — mas esses intervalos pressupõem encoders em preset lento e alvos de qualidade ajustados, não os padrões de um clique da maioria dos editores.

Outra dimensão é o custo de codificação e decodificação. O JPEG decodifica em frações de milissegundo em qualquer dispositivo. O WebP é parecido. O AVIF é mais pesado para a CPU na decodificação, e a codificação AVIF em presets de alta qualidade pode levar segundos por imagem. Esse perfil de custo é tranquilo para um pipeline de build, mas desconfortável para conteúdo gerado por usuário em tempo real, em que o servidor recodifica todo upload no caminho quente.

Cenários reais

Cenário 1 — Thumbnails e hero images de blog. Recentemente auditei meu próprio site e encontrei uma hero image entregando 1,8 MB. Reexportar para WebP em qualidade 82 derrubou para 210 KB, e o LCP da página caiu de 2,4 s para 1,1 s em um perfil 4G limitado no Lighthouse. Use WebP como formato primário e deixe o <picture> servir JPEG como fallback para ambientes muito antigos. Sempre redimensione a imagem exportada para corresponder à largura real de exibição em CSS; servir uma foto de 3000 pixels em um contêiner de 600 pixels desperdiça banda independentemente do formato.

Cenário 2 — Logos e ícones. Se você tem fonte vetorial, exporte como SVG primeiro. Já revisei uma landing page em que o logo vermelho da marca havia sido exportado como JPEG em qualidade 75; as bordas vermelhas sangraram em um halo rosado em volta de cada glifo. A subamostragem de croma 4:2:0 destrói bordas vermelhas sobre escuro antes de quase qualquer outra coisa. Se só houver arte raster, escolha PNG ou WebP sem perdas. Trate compressão com perdas em logos como sinal de alerta, não como otimização.

Cenário 3 — Capturas de tela e UI. Capturas de tela devem ser PNG por padrão. Cromos de navegador, trechos de código e fontes CJK mostram artefatos JPEG com força — aprendi isso depois que um revisor de docs apontou “fonte monoespaçada borrada” em dois PRs seguidos. Se precisar reduzir o arquivo, use o pngquant (no macOS, brew install pngquant) para baixar a paleta a 256 cores; capturas de UI quase nunca mostram a diferença, e o arquivo costuma encolher 4–6x. Para sites de documentação, considere combinar PNG com markup responsivo de CSS para que telas retina recebam ativos 2x enquanto telas mais antigas baixem a versão 1x — geralmente economiza mais bytes do que trocar de formato.

Cenário 4 — Arquivamento de material de origem. Para originais que você pode reprocessar mais tarde (masters de fotografia, escaneamentos brutos, fotos de produto), guarde uma cópia sem perdas como TIFF ou WebP sem perdas em armazenamento frio e gere variantes de entrega com perdas sob demanda. Recomprimir um JPEG com perdas repetidamente degrada a qualidade a cada ciclo (“perda de geração”), então é bom ter uma fonte limpa para voltar.

Equívocos comuns

“PNG é sempre a maior qualidade.” É sem perdas, o que significa reprodução perfeita, mas para fotografias essa pureza se traduz em arquivos várias vezes maiores que o necessário. No celular, fotos de vários megabytes prejudicam o tempo percebido de carregamento e os Core Web Vitals.

“WebP não funciona em todos os navegadores.” Desde o Safari 14 no final de 2020, o WebP é suportado em todos os navegadores principais. Se o suporte legado é realmente necessário, um elemento <picture> com fallback JPEG resolve com elegância.

“AVIF é mágico.” A eficiência de compressão é excelente, mas a codificação é bem mais lenta que JPEG ou WebP. No meu MacBook Air M2, avifenc --speed 4 leva 5–9 segundos para uma única foto de 2400×1600; em --speed 0, espere 30 s ou mais. A decodificação em dispositivos móveis antigos também pode ser preocupante. O AVIF combina melhor com pipelines em lote e otimização em tempo de build do que com recodificar todo upload de usuário no caminho quente.

“Basta usar JPEG.” Era razoável até por volta de 2015, mas WebP e AVIF modernos costumam dar arquivos menores em qualidade comparável, com suporte universal ou quase universal. Pipelines novos devem tratar o WebP como linha de base, não o JPEG.

“Configurações de qualidade mais altas valem sempre a pena.” Acima de qualidade 85 para JPEG ou WebP, o tamanho do arquivo cresce mais rápido que a qualidade percebida. Espectadores raramente notam a diferença entre qualidade 85 e 95, mas o arquivo pode ser duas vezes maior. Meça com uma métrica perceptual (SSIM, butteraugli) em vez de confiar no slider de qualidade como uma escala linear.

“Redimensionar não importa se eu comprimir bem.” Os maiores ganhos individuais na entrega de imagens normalmente vêm de enviar imagens em tamanho apropriado, não do ajuste fino da compressão. Um WebP de 800 pixels é quase sempre mais leve que um WebP de 3000 pixels, independentemente do nível de qualidade, porque você está removendo pixels em vez de aproximá-los.

Checklist

  1. A fonte é vetorial? Se sim, salve como SVG.
  2. Você precisa de transparência?
    • Sim e o conteúdo é fotográfico: WebP com perdas com alfa ou AVIF.
    • Sim e o conteúdo é logo ou ícone: PNG ou WebP sem perdas.
  3. Precisa de animação? WebP animado, APNG ou AVIF. A paleta de 256 cores do GIF é ruim para fotos.
  4. O conteúdo é fotográfico ou cheio de gradientes? Use WebP com perdas como padrão e adicione AVIF onde a banda importa.
  5. O conteúdo é captura de tela ou UI com muito texto? Prefira PNG ou WebP sem perdas.
  6. Precisa de compatibilidade máxima? Use um elemento <picture> com fontes AVIF → WebP → JPEG nessa ordem.

Ferramenta relacionada

Você pode experimentar essas escolhas diretamente no compressor de imagens da Patrache Studio, referenciado em relatedToolUrl. Imagens normalmente fazem parte de um pipeline maior de ativos, então vale ler os guias complementares: PDF Merge & Split no navegador cobre o que acontece quando suas imagens param dentro de contratos ou pacotes escaneados, e Segurança de QR Code é útil se as suas imagens incluem QR codes em embalagens ou pôsteres.

Referências

Ferramenta relacionada

tools.patrache.studio/image/compress/