JPEG vs PNG vs BMP vs GIF vs SVG


40

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.


15
Btw, JPG e JPEG se referem à mesma coisa (veja, por exemplo, en.wikipedia.org/wiki/JPEG ), de modo que o título pode ser simplificado um pouco.
10139 Jonik

11
Não sabe ao certo como minha resposta não responde à sua pergunta original e como a resposta escolhida responde ...? : - /
Django Reinhardt

4
> qual desses formatos requer menos memória Hum, defina "menos memória". Você quer dizer que ocupa menos espaço em disco? (JPEG para fotos, PNG e / ou GIF para capturas de tela.) Você quer dizer que o arquivo compactado ocupa menos espaço na memória? (. O mesmo que o espaço em disco) Você quer dizer a imagem decodificada ocupa menos espaço na memória ( None ; todos eles são essencialmente o mesmo quando decodificado para cru.)
Synetech

Respostas:


54

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.


11
Esteja ciente de que sem um "hack" das sortes, o IE6 ainda não suporta transparência alfa em arquivos PNG ou seja, áreas de transparência que são opacas semi
Josh Comley

2
... e uma quantidade surpreendente de pessoas ainda usa o IE6 ( tinyurl.com/56kp ). E a MS quer apoiá-lo até 2014! :( ( tinyurl.com/qvdyn5 )
Josh Comley

9
BMP: Essa não é a base para outros formatos de arquivo. Tanto quanto sei, o cabeçalho BMP e a estrutura do arquivo não são compartilhados com outros formatos (ao contrário do TIFF, por exemplo). JPEG: Foi criado e existia na Web antes de as câmeras digitais se tornarem predominantes. Além disso, muitas câmeras digitais permitem salvar um formato "bruto", que geralmente é um TIFF, embora com conteúdo específico do fornecedor. GIF: não restrito a 256 cores por imagem, apenas a 256 cores por quadro (consulte en.wikipedia.org/wiki/Graphics_Interchange_Format#True_color ).
Joey

4
TIFF: O formato de arquivo e contêiner predominante para imagens não processadas de câmeras digitais (as que não são apontar e disparar). O TIFF permite dados quase arbitrários (portanto marcados ), o que também significa que ele suporta métodos de compactação arbitrários de LZW (GIF), LZ77 (PNG) para JPEG e outros. O TIFF também permite várias imagens (páginas) em um arquivo.
214 Joey

4
Enquanto a resposta é bom a responder a diferença dos formatos de imagem em termos de história e uso geral, a resposta original perguntado sobre os tamanhos e qualidade também relativos ...
camster342

76

No estilo xkcd de lbrandy.com :

texto alternativo


4
Ilustra o ponto bem :) (mesmo que eu nunca vi ninguém defensor dessa política 'Sempre JPEG!')
Jonik

7
+1 Desde esta imagem ilustra o problema jpeg tão bem ...
Johan

5
Eu gostaria de poder votar duas vezes! Eu envio isso para todos que me enviam JPEGs de baixa qualidade!
Tim Büthe 15/10/09

3
© 2008 Louis Brandy. Todos os direitos reservados....?
Arjan #

3
O Facebook possui, por exemplo, esta política 'Sempre JPEG'. Carrego uma boa imagem PNG sem perdas de 99 KB e o Facebook a converte em um feio JPEG de 175 KB.
Paul

63

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.

BMP vs GIF


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.

GIF vs JPEG


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.

JPEG vs GIF


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.

PNG-8 vs GIF

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:

PNG vs SVG

SVG vs PNG

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!


Boa ilustração Cuidado com artefatos causados ​​por compactação. Eu acho que os formatos de compressão de vídeo JPEG têm o problema de que zonas vermelhas sólidas tendem a "sangrar" nas bordas.
James P.

11
Você está errado sobre o PNG não suportar animação. O PNG pode funcionar bem, a maioria dos visualizadores e navegadores não é compatível. pt.wikipedia.org/wiki/APNG O Firefox suporta muito bem, ao que parece. people.mozilla.com/~dolske/apng/demo.html
Rob

11
@DjangoReinhardt Eu sei que você incluiu um exemplo em sua resposta, mas no que diz respeito a SVGs vs PNGs, em que circunstâncias podemos ver um SVG maior (em tamanho de arquivo) vs um PNG?
Hanna

11
@ Johannes Ótima pergunta. Existem algumas desvantagens no SVG, especialmente se forem particularmente complicadas (ou mal salvas - mas a culpa é do autor, não do formato do arquivo). Vou tentar adicionar algo que responda a isso - embora eu suspeite que um SVG sempre seja menor (ou igual em tamanho) a um PNG.
Django Reinhardt

11
Outro fato curioso: os arquivos BMP têm um tamanho semelhante ao PNG se você os compactar.
jiggunjer

28

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.


O APNG está ganhando muito apoio.
Phoshi

Com certeza. Eu não tinha notado.
Wfaulk 10/10/09

Bem, a maioria dos navegadores modernos suporta, mas é pouco conhecido. O IE8 não apoiá-lo, eu não acho que (mas pode lê-lo como PNG, assim que exibe o primeiro quadro)
Phoshi

Processamento de grande pensamento ..
InfantPro'Aravind '

25
  • 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.

3
+1 para considerações práticas de quando usar cada um.
Andrew Coleson

4
Cuidado ao usar PNGs. Como um formato sem perdas, geralmente não são adequados para fotografias e similares, devido ao tamanho do arquivo. Definitivamente, não é um "substituto moderno" para todos os fins. Transcodificar de JPG para PNG seria realmente estúpido.
217 Paul McMillan

@Paul - Eu concordo, certamente não é útil para todos os fins e, em particular, não para fotos, mas quando usado para gráficos da web, ele substitui o JPG.
Torben Gundtofte-Bruun 10/10/09

2
Eu não acho que haja alguma necessidade de BPM hoje em dia.
Arjan #

11
PNG é quase sempre menor que GIF. Possui esquema de compactação superior. Quando é maior que o GIF com a mesma aparência, geralmente é culpa de um software ruim (por exemplo, Photoshop antes do CS2). Use PNG paletizado (não de 24 bits!) E corrija-o com o otimizador PNG: imageoptim.pornel.net e você nunca mais precisará desperdiçar largura de banda em GIFs.
Kornel #

13

insira a descrição da imagem aqui


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

11
Boa visão geral. Mas por que o BMP está marcado como "sem perdas: falso" na tabela? No texto, você declara corretamente ao IMHO que o BMP é realmente sem perdas .
Mpy #

2
Sei que esse é um tópico antigo e agradeço a resposta, mas observe que o BMP é opcionalmente compactado com uma compactação RLE muito simplista e sem perdas.
precisa

Qualquer outra razão pela qual o PNG NÃO é recomendado para fotografias, além do tamanho maior do arquivo em comparação com o JPEG? Primeiro, digitalizei minhas fotos antigas no formato JPEG e depois as digitalizei novamente em PNG depois de perceber que estava digitalizando uma foto que seria armazenada em um formato com perda.
JAT86


3

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.

11
O IE suporta PNG desde a versão 4.x (5 no Mac), mas não é um PNG transparente.
Arjan #

11
Na verdade, o IE6 suporta até PNG transparente se tiver transparência semelhante a GIF. Apenas PNG com alfa completo não é suportado.
Kornel

11
Na verdade, a Alpha Transparency é suportada, desde que seja um PNG de 8 bits. Estranho, mas é verdade.
Django Reinhardt
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.