Escolher entre PNG, JPEG, WebP e AVIF

Um guia simples para escolher um formato de imagem, que cobre a transparência, a compressão com perdas face à compressão sem perdas, porque é que voltar a gravar um JPEG o degrada, e tamanhos de ficheiro aproximados.

As fotografias vão em JPEG, WebP ou AVIF. As capturas de ecrã, os logótipos, os ícones, os diagramas e tudo o que tenha cor lisa ou texto nítido vão em PNG, ou no modo sem perdas do WebP. Se precisa de transparência, isso exclui o JPEG por completo. Se está a escolher hoje um formato para a web e consegue servir mais do que um, AVIF primeiro, WebP como alternativa e o JPEG ou PNG original para tudo o que seja muito antigo.

A decisão é toda esta. O resto explica porquê, para que perceba quando é que a regra prática não se aplica.

Em que é que cada formato é realmente bom

FormatoCompressãoTransparênciaAnimaçãoMelhor paraPior para
PNGSem perdasSim, alfa completoNãoCapturas de ecrã, logótipos, ícones, desenho de linha, tudo o que tenha textoFotografias, onde os ficheiros ficam enormes
JPEGSó com perdasNãoNãoFotografias, quando o suporte universal contaArestas nítidas, cor lisa, texto, tudo o que voltar a editar
WebPCom ou sem perdasSim, nos dois modosSimUm substituto geral tanto do PNG como do JPEG na webSoftware anterior a cerca de 2020
AVIFCom ou sem perdasSimSimOs ficheiros mais pequenos para fotografias, cor alargada e alta gama dinâmicaCodificação rápida, e software mais antigo que não o abre

Sem perdas significa que a imagem descodificada é bit a bit idêntica à que entrou. Com perdas significa que o codificador deita fora informação de forma permanente em troca de um ficheiro mais pequeno, e o que se recebe de volta é uma aproximação.

O PNG é sem perdas e sempre será. A sua compressão funciona prevendo cada píxel a partir dos vizinhos e comprimindo depois as diferenças, o que é excelente quando há grandes áreas idênticas ou repetidas e mau quando cada píxel difere ligeiramente, como numa fotografia. Uma foto gravada em PNG é muitas vezes cinco a dez vezes maior do que um bom JPEG da mesma imagem, sem benefício visível nenhum.

O JPEG é com perdas e não tem canal alfa, por isso não consegue guardar transparência nenhuma. Divide a imagem em blocos, converte cada um em informação de frequência e descarta o detalhe fino a que o olho é menos sensível. Isso funciona lindamente em fotografias de tom contínuo e mal em arestas duras, onde produz os halos ténues e o ruído mosquito que se vê à volta de texto gravado em JPEG.

O WebP e o AVIF são ambos formatos de contentor modernos derivados de codecs de vídeo. Os dois fazem compressão com e sem perdas, os dois suportam transparência alfa completa e os dois são suportados por todos os navegadores correntes de referência. O AVIF em geral comprime mais do que o WebP, sobretudo em definições de qualidade baixa, e lida com gamutes de cor alargados e maiores profundidades de bits. Em troca vem o tempo de codificação, que pode ser bastante mais lento, e um suporte um pouco mais estreito fora dos navegadores, em aplicações de secretária e ferramentas de imagem mais antigas.

Transparência

Só o PNG, o WebP e o AVIF conseguem guardar um canal alfa a sério, ou seja, em que cada píxel transporta o seu próprio valor de opacidade. É isso que permite a um logótipo assentar de forma limpa sobre qualquer cor de fundo.

Se converter uma imagem transparente para JPEG, a transparência tem de ir parar a algum lado. A maioria das ferramentas funde-a com branco, algumas com preto, e só descobre qual delas quando a imagem aparece sobre um fundo colorido com uma caixa branca à volta. Se souber qual vai ser a cor de fundo final, funda-a deliberadamente com essa cor em vez de deixar o conversor adivinhar.

Quando é que a compressão com perdas serve, e quando não serve

A compressão com perdas serve para a entrega final de conteúdo fotográfico no tamanho a que vai ser efetivamente apresentado. Com definições de qualidade sensatas, a perda é genuinamente difícil de ver.

É má ideia usar compressão com perdas quando:

  • A imagem tem texto, linhas finas ou grandes áreas de cor lisa. Os artefactos de compressão juntam-se exatamente nas arestas duras.
  • O ficheiro é um original de trabalho que vai editar e voltar a exportar mais tarde.
  • A imagem vai ser ampliada, ou submetida a uma gradação de cor pesada, o que amplifica tudo aquilo que o codificador fez.
  • Os valores exatos dos píxeis contam, como em trabalho científico, médico ou forense, ou numa captura de ecrã de onde alguém vai ler números.

Porque é que voltar a gravar um JPEG o piora sempre mais

Sempre que um JPEG é descodificado e gravado outra vez, o codificador quantiza dados que já tinham sido quantizados, e o erro de arredondamento acumula-se. Não é que a qualidade esteja a ser reduzida duas vezes a partir do original; é que os artefactos introduzidos na primeira passagem passam a ser tratados como detalhe verdadeiro da imagem e são aproximados por sua vez.

Gravar com uma definição de qualidade mais alta não desfaz nada. O detalhe retirado na primeira gravação desapareceu. Recodificar com qualidade 95 a partir de um ficheiro de qualidade 60 apenas produz um ficheiro maior que preserva fielmente os artefactos da qualidade 60. Se editar uma imagem várias vezes, guarde o original num formato sem perdas e exporte um JPEG, WebP ou AVIF no fim.

Expectativas aproximadas de tamanho

São regras práticas, não medições, e os números reais variam imenso com o conteúdo da imagem. Para uma fotografia típica com a mesma qualidade percebida, conte com o JPEG como referência, com o WebP a ficar à volta de um quarto mais pequeno e com o AVIF mais pequeno ainda, com a diferença a aumentar quanto mais se comprime. Para gráficos de cor lisa, o WebP sem perdas costuma bater o PNG, por vezes de forma substancial. O ruído e a textura fina inflacionam qualquer formato com perdas, por isso uma foto granulada nunca vai comprimir como um retrato de estúdio limpo.

Redimensione antes de comprimir

O maior ganho isolado quase nunca é o formato. São as dimensões. Uma imagem servida com 4000 píxeis de largura e apresentada numa coluna de 800 píxeis transporta cerca de vinte e cinco vezes mais dados de píxel do que precisa, e nenhum codificador resolve isso. Redimensione para aproximadamente o tamanho a que vai ser mostrada (o dobro, se estiver a pensar em ecrãs de alta densidade), depois escolha o formato e só então afine a definição de qualidade até estar quase a ver a diferença, recuando aí um ponto.