JPG vs. PNG vs. GIF: As Diferenças Entre Formatos de Arquivo de Imagem

Uma rosa com outro nome pode cheirar tão doce, como diz Shakespeare em Romeu e Julieta, mas se você tirar uma foto dessa rosa e salvá-la como JPEG com alta compressão, pode experimentar uma queda na qualidade da imagem. Não há problema, já que você também tem a opção de usar PNG, TIFF, GIF, SVG ou até mesmo um novo formato como HEIC ou WebP. Alguns desses formatos ficariam ótimos no boletim da família Capuleto, enquanto outros se encaixariam melhor no blog de Romeu, então decifrar esses tipos de arquivo pode ser bastante útil.
Lossy vs. Lossless

Cada formato de imagem pode ser categorizado como “lossy” ou “lossless”, e esses termos se explicam por si mesmos. A compressão lossy reduz o tamanho dos arquivos excluindo permanentemente informações sobre um arquivo, tornando-o menor, mas também degradando a qualidade. A compressão lossless apenas reorganiza os dados de tal forma que ocupa menos espaço, mas pode ser compactada e descompactada (ou deszipada!) sem qualquer dano ao arquivo.
Raster vs. Vector

Quando você pensa em “formato de imagem”, provavelmente está pensando em um raster. Não tem nada a ver com Bob Marley – isso apenas significa que o arquivo é essencialmente uma grade de pixels coloridos que formam uma imagem. JPG, PNG, GIF, TIFF e a maioria dos outros arquivos de foto são rasters. A única informação que eles têm é qual a cor dos pixels, então aumentar ou esticar eles geralmente resultará apenas em uma imagem mais pixelada.
Os vetores, no entanto, são projetados para serem escalados para sempre. Arquivos SWF, EPS e PDF armazenam imagens não como pixels, mas como equações matemáticas que podem ser renderizadas como pontos e linhas. A imagem pode ficar tão grande ou tão pequena quanto você precisar sem perder qualidade, mas essas extensões não são tão comuns na Web, uma vez que vetores não são tão prontamente compatíveis quanto imagens raster.
Joint Photographic Experts Group (JPEG) – Lossy Raster

O arquivo JPEG é nomeado após o grupo que o criou e domina o mundo das imagens na web devido à sua compatibilidade quase universal e pequeno tamanho. Seu olho provavelmente não conseguiria distinguir um JPEG levemente comprimido de uma imagem de qualidade superior sem alguns segundos de análise, e ele carrega rapidamente, então é bom o suficiente para a maior parte da Web.
JPEG-2000 é a versão atualizada que tem algumas melhorias em relação ao original, mas nunca realmente decolou, então é improvável que você veja esse formato em muitos lugares.
Ótimo para: colocar fotos na Web, salvar e enviar tamanhos de imagem pequenos, uso geral, imprimir fotos.
Portable Network Graphics (PNG) – Lossless Raster

Esse formato se tornou o preferido para gráficos web de alta qualidade, especialmente se você precisa de um fundo transparente. O PNG foi originalmente projetado como uma alternativa ao GIF, mas suporta muito mais cores e é mais flexível em relação às configurações de transparência. O tamanho do arquivo é geralmente maior do que o GIF ou JPEG, mas o PNG preserva melhor a qualidade e é mais flexível.
Você também pode encontrar PNG-8 e PNG-24 em alguns programas. Esses ainda serão exportados como PNGs normais, mas o PNG-8 suporta apenas 256 cores e não permite transparência parcial, resultando em um tamanho de arquivo menor do que o PNG-24 mais completo.
Ótimo para: gráficos web, fotos de alta qualidade onde o tamanho não é um problema, transparência.
Graphical Interchange Format (GIF) – Lossless Raster

O predecessor do PNG, o formato GIF é agora mais famoso por permitir os curtos loops de vídeo que você não consegue parar de assistir nas redes sociais. O debate sobre como pronunciá-lo como “ g if” ou “ j if” é bastante acalorado, mas se você quiser deixar os dois lados irritados, tente pronunciá-lo como “jeff.”
Os GIFs suportam apenas 256 cores, o que os torna uma escolha ruim para fotos de alta qualidade, mas sua compressão é excelente, então pode reduzir o tamanho de imagens simples sem uma grande perda de qualidade. Os pixels também podem ser tornados transparentes, mas devem estar ligados ou desligados, não entre os dois.
Ótimo para: gráficos simples, animações, ícones.
Tagged Image File Format (TIFF) – Lossless Raster

Você pode não ter encontrado um TIFF pessoalmente, mas se você gosta de fotografia ou trabalha muito com mídia impressa, pode reconhecê-los como o formato grande, mas de alta qualidade, frequentemente preferido por editores. Além disso, ninguém discute sobre a pronúncia.
Ótimo para: imprimir fotos de alta qualidade, digitalizar imagens de alta qualidade, qualquer coisa onde o tamanho não seja um problema.
Scalable Vector Graphics (SVG) – Vector

Se você já tentou salvar uma imagem da Internet e em vez disso obteve a opção “salvar como uma página da web”, pode ter visto um SVG. Esses são possivelmente os gráficos vetoriais mais amplamente suportados, e sua capacidade de manter boa qualidade e escalabilidade em tamanhos de arquivo baixos os torna populares para logotipos, gráficos de sites e em qualquer outro lugar onde um vetor seria útil.
Ótimo para: gráficos empresariais, gráficos escaláveis, logotipos.
Novos Formatos
Você pode não ter visto esses formatos na natureza ainda, mas eles oferecem algumas vantagens sobre os padrões de hoje.
High Efficiency Image Format
HEIF é essencialmente JPEG, mas com qualidade superior e tamanhos de arquivo menores. Este é agora o formato de imagem padrão no iOS 11 e posteriores.

WebP
WebP é o formato do Google, e faz praticamente tudo: melhor compressão do que JPEG, melhores animações do que GIF, e transparência equivalente ao PNG. É suportado por vários navegadores e está atualmente sendo usado pelo YouTube, Facebook e alguns outros sites se você os visitar usando um navegador compatível.

Por Que Tantos Formatos?
É improvável que haja um formato que os governe todos, uma vez que diferentes campos têm diferentes necessidades de imagem. Navegadores de internet gerais não precisam realmente pensar além de JPEG e PNG (e talvez WebP e HEIC no futuro), mas para aplicações empresariais e de publicação, ter opções como TIFF e SVG facilita a vida.
E, se você ainda não o fez, deve pensar em escolher um lado no debate sobre o GIF antes que o formato desapareça. Faça parte da história.
Créditos das imagens: Comparação entre JPEG, JPEG 2000, JPEG XR e HEIF, Google Developers, W3C.org, É Fácil Neon Animated Gif, Comparação JPEG JFIF e 2000, Exemplo de compressão JPEG