JPEG vs PNG vs BMP vs GIF vs SVG

Gostaria de saber qual desses formatos requer menos memória para a mesma qualidade da imagem e quais são as principais diferenças entre esses formatos.

De Qual é a diferença entre TIFF, GIF, JPG, JPEG, PNG e um arquivo BMP?

BMP - Bitmap. Este foi provavelmente o primeiro tipo de formato de imagem digital que me lembro. Todas as fotos em um computador pareciam naqueles dias um BMP. No Windows XP, o programa Paint salva suas imagens automaticamente no BMP. No entanto, no Windows Vista e imagens posteriores agora são salvas em JPEG. O BMP é a plataforma base para muitos outros tipos de arquivos.

JPG / JPEG - (Joint Photographic Experts Group) O formato JPEG é usado para fotografias coloridas ou qualquer imagem com muitas misturas ou gradientes. Não é bom com bordas afiadas e tende a desfocá-las um pouco, a menos que sejam armazenadas em alta qualidade. Este formato tornou-se popular com a invenção da câmera digital. A maioria das câmeras digitais, se não todas, faz o download de fotos no seu computador como um arquivo JPEG. Obviamente, os fabricantes de câmeras digitais veem o valor em imagens de alta qualidade que acabam ocupando menos espaço.

GIF - (Formato de intercâmbio de gráficos) O formato GIF é melhor usado para texto, desenhos de linhas, capturas de tela, desenhos animados e animações. O gif é limitado a um número total de 256 cores ou menos; portanto, as imagens são relativamente pequenas. É comumente usado para carregamento rápido de páginas da web. Também cria um ótimo banner ou logotipo para sua página da web. As imagens animadas também podem ser salvas no formato GIF como uma sequência de imagens estáticas. Por exemplo, um banner piscando seria salvo como um arquivo Gif.

PNG - (Portable Networks Graphic) Este formato sem perdas é um dos melhores formatos de imagem. Nem sempre era compatível com todos os navegadores da Web ou software de imagem, mas atualmente é o melhor formato de imagem para uso em sites. Eu uso .png para logotipos e capturas de tela. Uma de suas habilidades mais surpreendentes é poder compactar imagens sem perdas (sem perda de pixels), embora o tamanho final compactado varie entre os editores de imagens.

TIFF - (formato de arquivo com imagem com tag) Este formato de arquivo não é atualizado desde 1992 e agora pertence à Adobe. Ele pode armazenar uma imagem e dados (tags) em um arquivo. O TIFF pode ser compactado, mas é sua capacidade de armazenar dados de imagem em um formato sem perdas que torna um arquivo TIFF um arquivo de imagens útil, porque, diferentemente dos arquivos JPEG padrão, um arquivo TIFF usando a compactação sem perdas (ou nenhuma) pode ser editado e re - salvo sem perder a qualidade da imagem. Esse arquivo é comumente usado para digitalização, fax, processamento de texto e assim por diante. Não é mais um formato de arquivo comum a ser usado com suas fotos digitais, pois o jpeg é de ótima qualidade e ocupa menos espaço.

No estilo xkcd de lbrandy.com :

Você deve estar ciente de alguns fatores-chave ...

Primeiro, existem dois tipos de compactação: sem perdas e com perdas .

• Sem perdas significa que a imagem é reduzida, mas sem prejudicar a qualidade.
• Com perdas significa que a imagem é feita (ainda) menor, mas prejudica a qualidade. Se você salvasse uma imagem em um formato com perda repetidamente, a qualidade da imagem pioraria progressivamente.

Também existem diferentes profundidades de cores (paletas): cores indexadas e cores diretas .

• Indexado significa que a imagem pode armazenar apenas um número limitado de cores (geralmente 256), controladas pelo autor, em algo chamado Mapa de Cores
• Direto significa que você pode armazenar milhares de cores que não foram escolhidas diretamente pelo autor

BMP - Sem perdas / indexado e direto

Este é um formato antigo. É sem perdas (nenhum dado de imagem é perdido ao salvar), mas também há pouca ou nenhuma compactação, o que significa que o BMP resulta em tamanhos de arquivo MUITO grandes. Pode ter paletas indexadas e diretas, mas isso é um pequeno consolo. Os tamanhos dos arquivos são tão desnecessariamente grandes que ninguém realmente usa esse formato.

Bom para: nada realmente. Não há nada que o BMP se destaque ou que não seja feito melhor por outros formatos.

GIF - somente sem perdas / indexado

O GIF usa compactação sem perdas, o que significa que você pode salvar a imagem repetidamente e nunca perder dados. Os tamanhos dos arquivos são muito menores que o BMP, porque uma boa compactação é realmente usada, mas só pode armazenar uma paleta Indexada. Isso significa que, na maioria dos casos de uso , só pode haver no máximo 256 cores diferentes no arquivo. Parece uma quantidade bastante pequena, e é.

As imagens GIF também podem ser animadas e ter transparência.

Bom para: logotipos, desenhos de linha e outras imagens simples que precisam ser pequenas. Realmente usado apenas para sites.

JPEG - Perdido / Direto

As imagens JPEG foram projetadas para tornar as imagens fotográficas detalhadas tão pequenas quanto possível, removendo as informações que o olho humano não notará. Como resultado, é um formato com perda e salvar o mesmo arquivo repetidamente resultará na perda de mais dados ao longo do tempo. Possui uma paleta de milhares de cores e, portanto, é ótima para fotografias, mas a compactação com perdas significa que é ruim para logotipos e desenhos de linha: além de parecerem imprecisos, essas imagens também terão um tamanho de arquivo maior em comparação aos GIFs!

Bom para: fotografias. Além disso, gradientes.

PNG-8 - Sem perdas / indexado

PNG é um formato mais recente e PNG-8 (a versão indexada de PNG) é realmente um bom substituto para GIFs. Infelizmente, porém, há algumas desvantagens: primeiro, ele não suporta animação como o GIF (pode ser, mas pode ser, mas apenas o Firefox parece suportá-la, ao contrário da animação GIF suportada por todos os navegadores). Em segundo lugar, há alguns problemas de suporte com navegadores mais antigos como o IE6. Em terceiro lugar, softwares importantes como o Photoshop têm uma implementação muito ruim do formato. (Maldito seja, Adobe!) O PNG-8 pode armazenar apenas 256 cores, como GIFs.

Bom para: A principal coisa que o PNG-8 faz melhor que os GIFs é ter suporte à Transparência Alfa.

Nota importante: O Photoshop não suporta Alpha Transparency para arquivos PNG-8. (Droga, Photoshop!) No entanto, existem maneiras de converter arquivos PNG-24 do Photoshop em PNG-8, mantendo a transparência. Um método é PNGQuant , outro é salvar seus arquivos com o Fireworks .

PNG-24 - Sem perdas / direto

PNG-24 é um ótimo formato que combina a codificação sem perdas com cores diretas (milhares de cores, assim como JPEG). É muito parecido com o BMP nesse aspecto, exceto que o PNG realmente comprime imagens, resultando em arquivos muito menores. Infelizmente, os arquivos PNG-24 ainda serão muito maiores que os JPEGs, GIFs e PNG-8s; portanto, você ainda precisa considerar se realmente deseja usá-lo.

Embora os PNG-24s permitam milhares de cores durante a compactação, eles não se destinam a substituir imagens JPEG. Uma fotografia salva como PNG-24 provavelmente será pelo menos 5 vezes maior que uma imagem JPEG equivalente, com muito pouca melhoria na qualidade visível. (Obviamente, esse pode ser um resultado desejável se você não estiver preocupado com o tamanho do arquivo e desejar obter a melhor qualidade de imagem possível.)

Assim como o PNG-8, o PNG-24 também suporta transparência alfa.

SVG - sem perdas / vetor

Um tipo de arquivo que está crescendo em popularidade atualmente é o SVG, que é diferente do que acima, pois é um formato de arquivo vetorial (os acima são todos rasterizados ). Isso significa que na verdade é composto de linhas e curvas em vez de pixels. Ao ampliar uma imagem vetorial, você ainda vê uma curva ou uma linha. Ao ampliar uma imagem raster, você verá pixels.

Por exemplo:

Isso significa que o SVG é perfeito para logotipos e ícones que você deseja manter a nitidez nas telas Retina ou em tamanhos diferentes.

Além disso, os arquivos SVG são gravados usando XML e, portanto, podem ser abertos e editados em um editor de texto, podendo ser manipulados em tempo real, se você desejar. Por exemplo, você pode usar o JavaScript para alterar a cor de um ícone SVG em um site, da mesma forma que faria com um texto (por exemplo, sem necessidade de uma segunda imagem).

Espero que ajude!

As respostas existentes incluem muito poucos dados técnicos, portanto, incluirei aqui.

• JPEG : até 24 bits de cores (possivelmente mais?), Compactação variável (geralmente alta), perdas, sem suporte alfa
• PNG : cores de até 48 bits, compactação moderada, sem perdas, suporte alfa
• BMP : cores de até 24 bits, muito pouca compactação, sem perdas, suporte alfa
• GIF : cores de até 8 bits, pouca compactação, sem perdas, suporte à transparência, suporte a animação

Profundidade de cor

• Cor de 8 bits == 256 cores
• Cor de 24 bits == 16.777.216 cores
• Cor de 48 bits == 281.474.976.710.656 cores

A maioria dos monitores de computador funciona com profundidade de cor de 24 bits. O olho humano pode distinguir sobre tantas cores. A profundidade de cor adicional é principalmente para poder reter informações de um sensor, para que a manipulação de uma fotografia tenha mais dados para trabalhar. Tentar representar uma fotografia em cores de 8 bits resultará em granulação.

Compressão

Isso se refere basicamente ao tamanho do arquivo final. Mais compactação é igual a um arquivo menor. No entanto, o JPEG atinge tamanhos pequenos de arquivo jogando dados fora. Isso é chamado de compactação "com perdas", porque você nunca pode recuperar os dados originais não compactados. Sua compactação também é otimizada para fotografias em que as bordas de alto contraste são incomuns. Conforme declarado em outras respostas, é uma má escolha para outras coisas que não sejam fotografias.

Alfa / Transparência

Alfa se refere à transparência, mas implica que há mais de um nível de transparência. O GIF tem a capacidade de definir pixels transparentes, mas é opaco ou 100% transparente, e "transparente" é usado como uma das 256 cores. PNG e BMP têm a capacidade de marcar cada pixel como opaco, transparente ou parcialmente transparente, como um pedaço de vidro colorido. Geralmente, existem 256 níveis de transparência, embora o PNG possa ter até 65.536 níveis. O JPEG não oferece suporte à transparência.

Animação

Efetivamente, desses formatos, apenas o GIF tem suporte para animação. Existem especificações para animação com PNG (MNG, APNG) e JPEG (MJPEG), mas elas não são amplamente suportadas. (O APNG funciona em versões recentes do Firefox e Opera.) Na prática, a maioria das animações que você vê nas páginas da web é implementada no Flash.

• Use GIF se a imagem tiver poucas cores (como ícones). Também pode ser usado para imagens animadas (como banners de anúncios).
• Use JPG se a imagem tiver muitas cores (como fotos). JPEG é a mesma coisa.
• Use BMP se desejar salvar a imagem sem compactação. Tamanho de arquivo muito maior!
• Use PNG se quiser publicar a imagem na Web e estar atualizado sobre os padrões modernos. Prós: Adequado como substituto moderno para GIF e JPG, é um padrão aberto e permite transparência. Contras: Não suportado por software mais antigo, e o tamanho do arquivo pode ser maior que GIF ou JPG comparável.

BMP:

• Formato antigo. Sem perda de dados.
• Não compactado - Armazena o valor de cada pixel. Portanto, imagens com as mesmas dimensões têm o mesmo tamanho de arquivo (kilobytes / megabytes). Por exemplo, imagens de 800 × 600 BMP são sempre 1,37 MiB como o popular papel de parede WinXP "Bliss" colinas.
• Transparência / translucidez não suportada
• Não recomendado para nada

JPG:

• Compressão com perda.
• O valor da perda pode ser definido, por exemplo, ao criar um gráfico e salvar no Photoshop.
• Salvar como qualidade mais alta significa menos perda de cores / profundidade e alto tamanho de arquivo e vice-versa.
• Transparência / translucidez não suportada
• Recomendado para fotografias, não para gráficos / ícones

PNG:

• Compressão sem perdas (sim, o melhor das duas PALAVRAS / mundos)
• Suporta transparência E translucidez, ambos são diferentes
• Recomendado para gráficos / ícones estáticos, não para fotografias

GIF:

• Suporta transparência, mas não translucidez
• Recomendado apenas para gráficos / ícones ANIMADOS
• Talvez as fotografias em movimento nos quadros de Harry Potter sejam GIFs: D

O BMP usa bits brutos com um cabeçalho pequeno ou codificação em tamanho de execução . JPEG usa Discrete Cosine Transform . Veja o bloco na parte inferior dos artigos da Wikipedia para outros algoritmos de compressão / codificação.

Guia simples:

• Para fotografias, use:
  • Formatos brutos específicos da câmera, se você possui equipamento profissional e deseja fazer muito pós-processamento
  • JPEG caso contrário (para publicar fotos na Web, você também precisará converter os formatos brutos para JPEG)
• Para qualquer coisa com arestas vivas, linhas finas e poucas cores (como capturas de tela ou logotipos), use:
  • GIF se você estiver criando uma página da Web que tenha suporte para navegadores muito antigos (principalmente o IE 6) ou se desejar fazer animações simples
  • PNG caso contrário
• Não há boas razões para usar o BMP, a menos que um programa específico não aceite outros formatos.