JPEG
17,13 kB- Tamanho versus fonte
- 72,2%
- Diferença RGB média
- 0,6 / 255
- Pixels RGB alterados
- 94,037%
- Qualidade configurada
- 80%
( Teste próprio reproduzível )
JPEG, PNG e WEBP quando o navegador oferece suporte
Três arquivos exportados pelo editor real a partir da mesma imagem, sem ajustes nem redimensionamento. Compare o resultado visual, o tamanho e a diferença de pixels — sem transformar uma amostra em regra universal.
O que saiu de cada formato
Fonte PNG própria: 23,72 kB, 1200×800 px. Os percentuais abaixo comparam apenas o tamanho de cada saída com essa fonte.
PNG
30,59 kB- Tamanho versus fonte
- 129%
- Diferença RGB média
- 0 / 255
- Pixels RGB alterados
- 0%
- Qualidade configurada
- não se aplica
WEBP
8,65 kB- Tamanho versus fonte
- 36,5%
- Diferença RGB média
- 0,549 / 255
- Pixels RGB alterados
- 95,224%
- Qualidade configurada
- 80%
Como ler “pixels alterados”: JPEG e WEBP podem modificar muitos pixels por uma quantidade muito pequena. Por isso, o percentual de pixels alterados deve ser lido junto da diferença média por canal, e não como percentual de perda de qualidade.
JPEG
Útil para fotografias sem transparência. Neste teste, a saída a 80% ficou menor que a fonte PNG e alterou pixels por compressão.
PNG
Adequado quando transparência ou preservação exata dos pixels importa. Nesta imagem, foi a maior saída, mas reproduziu o RGB da fonte sem diferença.
WEBP quando o navegador oferece suporte
Pode produzir arquivos compactos para a web. Neste teste a 80%, foi a menor saída; isso não é uma garantia para outras imagens.
Método e limites
npm run dev -- --port 3218
npm run comparison:formatsContinue verificando
Análise técnica: compressão perceptual e diferenças de RGB
Ao analisar formatos de saída com perdas como JPEG e WEBP (quando o navegador suporta), existe uma distinção técnica fundamental entre a variação matemática dos pixels e a percepção visual humana. Neste benchmark, tanto o JPEG a 80% quanto o WEBP a 80% alteraram mais de 95% dos pixels por uma margem sutil, mas a diferença absoluta média de RGB permaneceu abaixo de 2,0 em uma escala de 8 bits de 0 a 255. Em condições normais de visualização em telas sRGB convencionais, variações de 1 ou 2 níveis em canais adjacentes são praticamente imperceptíveis a olho nu.
O JPEG obtém sua expressiva redução de arquivo (mais de 70% menor que o PNG nesta amostra) convertendo os dados RGB para o espaço de cor YCbCr, aplicando subamostragem cromática (geralmente 4:2:0) e quantização por Transformada Discreta de Cosseno (DCT) em blocos de 8×8 pixels. Detalhes de alta frequência aos quais a visão humana é menos sensível são quantizados primeiro, gerando arquivos leves com mínima perda percebida.
O WEBP, quando suportado pelo navegador do visitante, aprimora esse conceito utilizando codificação preditiva espacial originária do codec de vídeo VP8. Ao prever blocos de pixels a partir de vizinhos adjacentes e codificar apenas o erro residual, o WEBP alcançou o menor tamanho de arquivo neste teste. O PNG, em contraste, preserva os valores originais exatos por meio de filtros reversíveis e compressão DEFLATE, sendo indispensável para ilustrações, textos e transparência.
Perguntas sobre esta comparação
- Então JPEG é sempre menor que PNG?
- Nesta imagem foi. Em outra pode não ser: PNG se sai bem em áreas de cor chapada e pode ficar menor que JPEG em ilustrações e capturas de tela. Uma amostra não vira regra.
- Por que o PNG não mudou nenhum pixel?
- Porque a compressão do PNG é sem perda — ela reorganiza os dados, não descarta informação. JPEG e WEBP a 80% descartam, e é daí que vem tanto o arquivo menor quanto a diferença de RGB.
- Qual formato devo usar?
- Depende do destino. Foto para a web sem transparência costuma render bem em JPEG; transparência pede PNG; WEBP tende a ser o menor, quando o navegador oferece suporte à codificação. A tabela acima mostra o custo de cada escolha nesta imagem.
- Por que a exportação WEBP depende do suporte do navegador?
- A capacidade de decodificar não garante a de codificar: a saída WEBP aparece somente quando o navegador suporta canvas.toBlob('image/webp'), evitando arquivos corrompidos.
- Como posso reproduzir este teste no meu computador?
- Clone o repositório do projeto, inicie o servidor de desenvolvimento e execute o comando automatizado (npm run comparison:formats). Ele exportará a imagem de origem via Chromium e gerará o relatório JSON com as medições diferenciais pixel a pixel.
- Como posso converter fotos entre estes formatos diretamente?
- Você pode converter entre JPEG, PNG, AVIF e outros formatos utilizando nossa ferramenta de Converter formato de imagem.
Conheça o Hub Temático de Arquivos e Formatos
Guias completos e ferramentas para conversão de formatos, compressão em KB e remoção de EXIF.