PNG ou JPG: que formato de imagem usar e quando

A resposta curta a PNG ou JPG: usa PNG para tudo o que tenha texto, logótipos, cor lisa, arestas nítidas ou fundo transparente, e usa JPG para fotografias. O PNG não tem perdas, por isso cada píxel que exportas é o píxel que chega. O JPG tem perdas: deita fora detalhe para o ficheiro ficar pequeno, e o detalhe que deita fora é precisamente o que torna as letras nítidas e os gradientes suaves. Uma foto esconde bem essa perda. Um título sobre um gradiente não.

A diferença entre PNG e JPG

Os dois formatos guardam uma grelha de píxeis, por isso nenhum cresce sem ficar mole. O que os separa é a forma como comprimem essa grelha num ficheiro.

O JPG funciona dividindo a imagem em pequenos quadrados de 8×8 píxeis e simplificando a cor e o detalhe fino dentro de cada um. Numa foto cheia de textura, essa simplificação desaparece no ruído. Num gradiente suave ou na aresta de uma letra, aparece como blocos ténues, halos esborratados e bandas de cor em degraus.

Quando usar PNG

• Gráficos com muito texto: cartões com citações, anúncios, carrosséis, diapositivos.
• Logótipos e ícones, sobretudo com fundo transparente.
• Capturas de ecrã de interfaces, onde o JPG esborrata o texto pequeno.
• Gradientes e cor lisa, que fazem bandas e blocos com a compressão JPG.
• Ficheiros mestre que vais voltar a editar, para não perderes qualidade a cada gravação.

Quando usar JPG

Usa JPG para fotografias: produtos, retratos, viagens, comida. As fotos reais estão cheias de grão e textura, que disfarçam a compressão, e um JPG com qualidade de 80 a 85 costuma ser igual ao original a uma fração do tamanho. Uma foto grande em PNG pode facilmente pesar várias vezes mais sem ganho visível.

O JPG também serve para designs que são quase só foto com um pouco de texto, desde que o texto seja grande. Se o texto é pequeno ou fino, ou fica sobre um céu liso, exporta em PNG, ou testa os dois e compara com 100% de zoom.

PNG ou JPG para redes sociais

O Instagram, o Facebook, o X e o LinkedIn recomprimem tudo o que carregas, normalmente para JPG. Isso parece um motivo para não ligar, mas é o contrário: a compressão acumula-se. Um JPG que já foi comprimido é comprimido outra vez, e os artefactos duplicam. Dá à plataforma o ficheiro mais limpo que conseguires, no tamanho exato que ela espera, para não ter nada a redimensionar. Os tamanhos estão em tamanhos de imagem para redes sociais.

PNG ou JPG para um logótipo

PNG, sempre, se precisas de um ficheiro de píxeis. Um logótipo são formas lisas e arestas duras, que o PNG comprime bem e o JPG estraga, e quase sempre precisa de fundo transparente para assentar em fotos, cores e modo escuro. Melhor ainda, guarda o original em SVG, que fica nítido em qualquer tamanho. SVG ou PNG explica quando usar cada um, e tamanhos de logótipo lista os ficheiros de que precisas.

Porque é que os gradientes fazem bandas em JPG

Os gradientes suaves são o teste mais difícil para qualquer formato. Uma mistura escura de quase preto para violeta profundo só tem algumas dezenas de valores de cor distintos com que trabalhar, e a compressão JPG funde os vizinhos em riscas visíveis. É o efeito de bandas nos gradientes, e é pior em fundos escuros e de pouco contraste.

O grão ajuda mais do que qualquer definição, porque dá ao compressor textura com que trabalhar em vez de uma faixa lisa de cores quase idênticas. Gradientes com grão mostra quanto basta. Os Marks do Gradiently trazem o seu próprio grão e luz, que é exatamente a textura que ajuda um design com gradiente a sobreviver à recompressão de uma plataforma.

E o WebP e o AVIF

No teu próprio site, os formatos mais recentes superam os dois: o WebP e o AVIF podem ter perdas ou não, suportam transparência e são mais pequenos com a mesma qualidade. Todos os navegadores atuais suportam WebP. Guarda o PNG e o JPG para carregamentos em plataformas e para partilhar ficheiros, e lê WebP ou PNG e JPG antes de refazeres as imagens do teu site. Para as definições em si, vê compressão de imagens sem estragar gradientes.