PNG, JPG e WebP: qual formato de imagem você deve usar?

Use o formato JPG para fotografias, PNG quando precisar de transparência ou de imagens com texto e linhas nítidos, e WebP quando quiser arquivos menores e seu público usar navegadores modernos. Quase todas as decisões importantes se resumem a duas perguntas: a imagem tem um fundo transparente e é uma foto ou um gráfico?

O formato JPG (também escrito JPEG) utiliza compressão com perdas. Ele elimina dados da imagem que provavelmente não serão percebidos pelo olho humano, o que torna os arquivos de foto significativamente menores do que seriam se contivessem todos os pixels originais. Para uma foto de praia ou um retrato com gradientes suaves e milhares de cores, isso é exatamente o que se deseja, e a perda de qualidade geralmente é imperceptível.

O formato JPG tem duas grandes desvantagens. Primeiro, ele não possui canal alfa, o que significa que cada pixel é opaco e não há transparência. Segundo, ele não lida bem com bordas nítidas: ao colocar texto preto ou uma linha definida sobre um fundo sólido, o JPG adiciona halos borrados e em blocos ao redor das bordas, que são chamados de artefatos de compressão. É por isso que uma captura de tela de um documento salvo em JPG parece embaçada, enquanto a mesma captura de tela salva em PNG permanece nítida.

O formato PNG utiliza compressão sem perdas. Ele reduz o tamanho do arquivo sem descartar nenhum dado de pixel, de modo que o que você insere é exatamente o que você obtém. Isso o torna perfeito para logotipos, ícones, capturas de tela, diagramas e qualquer imagem com texto ou bordas nítidas, sem apresentar os artefatos borrados que o formato JPG produz.

O principal recurso do PNG é o canal alfa completo: os pixels podem ser totalmente transparentes, totalmente opacos ou ter qualquer nível de transparência intermediário. É assim que um logotipo se integra perfeitamente a qualquer cor de fundo. A desvantagem é o tamanho do arquivo. Para uma fotografia em cores, um arquivo PNG geralmente é várias vezes maior do que um arquivo JPG equivalente, porque a compressão sem perdas simplesmente não consegue reduzir tanto o tamanho de uma foto com ruído. Use o formato PNG quando precisar de transparência ou de bordas com definição perfeita, e não para fotos de férias.

WebP é o formato mais recente do Google e oferece suporte tanto a um modo com compressão (como o JPG) quanto à transparência (como o PNG), geralmente com um tamanho de arquivo menor do que ambos. Uma foto em WebP costuma ser visivelmente menor do que uma foto em JPG com a mesma qualidade, e um gráfico em WebP com transparência geralmente é menor do que o PNG. É por isso que tantos sites agora usam o formato WebP.

O problema é a compatibilidade. O WebP funciona em todos os navegadores modernos, mas navegadores muito antigos e alguns aplicativos de desktop, clientes de e-mail e editores de imagem mais antigos ainda não o suportam. Se você estiver publicando em um site moderno, o WebP é uma ótima opção padrão. Se você estiver enviando um arquivo por e-mail para um cliente ou entregando-o a alguém que usa um software desconhecido, o JPG ou o PNG são opções mais seguras. Existe também o AVIF, um formato ainda mais recente que oferece uma compressão ainda melhor, mas seu suporte de codificação é menos abrangente, portanto, considere-o como um recurso adicional, e não como a opção padrão.

Armadilha número um: converter PNG para JPG destrói a transparência. O formato JPG não possui canal alfa, portanto, cada pixel transparente precisa se tornar um pixel opaco. As ferramentas preenchem essas áreas transparentes com uma cor sólida, sendo o branco a escolha mais comum. O conversor do FileTinker faz exatamente isso: ao converter para JPG (ou para GIF ou BMP), todas as áreas transparentes são preenchidas com um fundo branco. Se o seu logotipo tiver cantos transparentes, eles aparecerão em branco. Isso não é um erro, é inevitável ao usar o formato JPG. Para manter a transparência, converta para PNG ou WebP.

Armadilha número dois: salvar repetidamente um arquivo JPG causa sua degradação. Como o JPG é um formato com compressão com perdas, cada vez que você o salva, uma pequena quantidade de dados é perdida. Abra um arquivo JPG, faça uma pequena edição, salve-o como JPG e repita o processo algumas vezes. Você notará uma perda visível na qualidade da imagem, o famoso efeito de cópia de uma cópia. As cores ficam mais opacas e surgem mais artefatos. O mesmo se aplica ao WebP com compressão com perdas. A solução é manter sua cópia original em um formato sem perdas (PNG ou o arquivo original da câmera) e exportar para JPG ou WebP apenas uma vez, no final.

As ferramentas de conversão de imagem e compressão de imagem do FileTinker funcionam inteiramente no seu navegador, portanto, nada é enviado para um servidor, mas vale a pena saber o que elas fazem com seus pixels para que você não se surpreenda.

O conversor decodifica sua imagem, a desenha em uma tela e a recondifica no formato de destino. A saída em PNG é sem perdas, portanto, a conversão para PNG preserva cada pixel exatamente como está. No entanto, a saída em JPG, WebP e AVIF é codificada com uma qualidade fixa de cerca de 0,92, o que significa que há perda de dados. Isso significa que converter uma foto para JPG ou WebP é uma recondificação, e não uma cópia perfeita, e salvar repetidamente ainda acumula perdas. Isso é normal para esses formatos, e 0,92 é uma configuração de alta qualidade, mas não é mágica: não há conversão para JPG ou WebP sem perdas aqui. O AVIF só é oferecido quando seu navegador pode codificá-lo (Chrome e Edge atualmente, não o Firefox), portanto, ele aparece como uma opção, e não como uma garantia.

A ferramenta de compressão de imagem preserva o formato original quando o navegador pode reformatá-lo (JPG, PNG ou WebP) e, caso contrário, utiliza o formato JPG. Além disso, ela se recusa a fornecer um arquivo que não seja realmente menor: se a reformatagem não resultar em um tamanho menor do que o arquivo original, ela mantém o arquivo original inalterado, em vez de fornecer um arquivo maior como se fosse menor.

Quando você estiver diante de uma janela de diálogo para salvar um arquivo, siga estas etapas na ordem indicada: