JPG vs PNG para a web - quando usar cada formato de imagem

Publicado em 20 de abril de 2026

---

JPG e PNG foram os dois formatos de imagem web dominantes de 1996 aos anos 2010, e ainda sao os formatos que todo navegador, toda biblioteca de imagens e todo site de fotos suportam sem reservas. A divisao e simples em principio - JPG para fotos, PNG para qualquer coisa com bordas nitidas ou transparencia - mas as decisoes reais hoje envolvem tamanho de arquivo, uma cadeia de fallback moderna WebP/AVIF, e se um screenshot PNG e pesado demais para enviar. Este guia cobre a mecanica de codificacao, as regras de decisao que valem em 2026 e o caminho de atualizacao para formatos modernos.

Como cada formato comprime pixels

JPG (tambem escrito JPEG) e um formato com perdas. O codificador converte pixels para o dominio da frequencia (DCT), quantiza coeficientes de alta frequencia e descarta os detalhes que o olho humano tem menos chance de notar. O dial de qualidade (0-100, onde maior e melhor) controla quao agressivamente essa quantizacao remove detalhes. JPG e brilhante em fotos e terrivel em bordas nitidas - texto, chrome de UI e arte de linha adquirem artefatos de halo visiveis em ajustes tipicos de qualidade web.

PNG (Portable Network Graphics) e um formato sem perdas. Os pixels de saida sao identicos bit-por-bit aos pixels de entrada. PNG comprime encontrando padroes na grade de pixels (DEFLATE em scanlines filtradas) - excelente em areas grandes de cor plana, mediano em gradientes fotograficos. PNG tambem suporta transparencia via o canal alfa, o que JPG nao faz.

Comparacao de tamanho de arquivo para a mesma imagem

As regras de decisao que valem em 2026

Fotografia, full bleed, sem necessidade de transparencia. → JPG (qualidade 80-85) como linha de base; WebP/AVIF como variantes aprimoradas. Um JPG em q=82 e visualmente indistinguivel do original sem perdas para todos exceto os olhos mais treinados. O arquivo e 5-10× menor que um PNG da mesma foto.

Fotografia com transparencia (sujeito recortado em fundo transparente). → PNG - JPG nao pode representar alfa. Prefira WebP se sua audiencia exclui clientes de e-mail legados e WebViews antigos do Android.

Screenshot de UI, codigo ou texto. → PNG como canonico; WebP lossless como aprimorado. Bordas de pixel nitidas (anti-aliasing de texto, bordas de UI) revelam artefatos de compressao JPG em qualquer qualidade abaixo de 90, e JPGs de qualidade 90 sao maiores que o PNG equivalente.

Logo ou grafico simples. → SVG se voce tem a fonte vetorial (veja guia PNG vs SVG). Se so existe um raster, PNG vence na nitidez; WebP lossless como aprimorado.

Cabecalho de newsletter por e-mail. → Apenas JPG ou PNG. Muitos clientes de e-mail nao renderizam WebP/AVIF. Use o formato universal mesmo quando um codec moderno economizaria bytes.

Pontos doces qualidade-vs-tamanho

JPG qualidade 82 e o padrao web que funcionou por uma decada. Abaixo de 75, artefatos de compressao se tornam visiveis em fotos ricas em detalhes; acima de 90, o tamanho do arquivo cresce rapido com ganho visual minimo.

JPG progressivo e uma reordenacao dos mesmos dados de imagem - mesma qualidade, mesmo tamanho, mas o navegador pode mostrar uma previa em baixa resolucao assim que o primeiro grupo de scanlines baixa. Use codificacao progressiva para qualquer foto heroi above-the-fold.

Otimizadores PNG (pngquant, oxipng, zopflipng) podem reduzir 30-70% de uma exportacao PNG padrao sem perda de qualidade - eles procuram melhores parametros de filtro/compressao que o codificador tentou. Sempre rode otimizacao antes de enviar um PNG grande para producao.

Escolhendo qualidade: um alvo concreto

Nosso verificador de nivel de compressao JPEG inspeciona um JPG existente e reporta sua tabela de quantizacao. Use-o para fazer engenharia reversa de qual qualidade uma foto foi salva antes de re-codificar. Regra pratica: uma foto re-codificada mais que duas vezes em qualidade 82 perde detalhe visivel; se voce e o terceiro hop em uma cadeia, suba a qualidade para 90 para preservar margem para um futuro re-save.

A cadeia de fallback <picture>

Sites modernos servem uma variante AVIF ou WebP para navegadores que conseguem decodificar e voltam para JPG ou PNG para os outros:

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Descricao" width="1920" height="1080">
</picture>

O navegador escolhe a primeira source que consegue decodificar. O <img> e o fallback universal. Sempre inclua width e height para evitar layout shift cumulativo.

Quando atualizar PNG para WebP ou AVIF

WebP lossless e um substituto direto para PNG com economias de tamanho de arquivo de ~25-35% na maior parte do conteudo. Suporte de navegador e universal desde Safari 14 (2020). Se sua audiencia e apenas-navegador (nao pesada em e-mail), um unico arquivo WebP lossless substitui o PNG sem diferenca visual. AVIF lossless comprime mais mas tem tempos de codificacao mais lentos e so foi adicionado ao Safari em 16 (2022).

Para fotografias, AVIF em qualidade 50-60 tipicamente iguala JPG qualidade 85 em metade do tamanho do arquivo. O trade-off e tempo de codificacao (AVIF e 10-30× mais lento que JPG para codificar) e suporte de decodificacao por hardware em dispositivos mais antigos.

Convertendo entre formatos

Use nossa ferramenta comprimir imagem para re-codificacao JPG com qualidade ajustada por IA. Para conversao de formato na outra direcao, PNG para SVG traca logos PNG em vetores; SVG para PNG rasteriza um vetor em um tamanho de pixel explicito. Todas as conversoes rodam no navegador - nada e enviado.

Ferramentas relacionadas

• Comprimir Imagem - reduza tamanho de arquivo JPG/PNG com ajuste de qualidade por IA.
• Verificador de Nivel de Compressao JPEG - inspecione a qualidade salva de qualquer JPG.
• Redimensionar Imagem - defina dimensoes exatas em pixels com interpolacao bicubica.
• Otimizador de Imagem Insights - auditoria de imagem voltada para PageSpeed.

← Voltar para Ferramentas de Imagem