Que formato para imagens pequenas do site? GIF ou PNG? [fechadas]

Question

Ao fazer pequenos ícones, gráficos do cabeçalho e similares para sites, é melhor usar GIFs ou PNGs?

Obviamente, se são necessários efeitos de transparência, em seguida, PNGs são definitivamente o caminho a percorrer, e para imagens maiores e mais fotográficas eu usaria JPEGs - mas para web normal "móveis", que você recomendaria e por quê? Pode ser apenas as ferramentas que eu estou usando, mas GIF arquivos geralmente parecem ser um pouco menor do que um PNG comparible, mas usá-los parece tão 1987.

Answer 1

Como regra geral, PNG nunca é pior, e muitas vezes melhor do que o GIF por causa da compressão superior. Pode haver alguns casos extremos, onde GIF é um pouco melhor (porque o formato PNG pode ter uma sobrecarga pouco maior a partir de metadados), mas não é realmente vale a preocupação.

Pode ser apenas as ferramentas que eu estou usando, mas os arquivos GIF geralmente parecem ser um pouco menor do que um PNG comparible

Isso pode de fato ser devido à ferramenta de codificação que utiliza.

/ EDIT: Uau, parece haver uma série de equívocos sobre o tamanho do arquivo PNG. Para citar Matt:

Não há nada de errado com GIFs para imagens com poucas cores, e como você ter notado que eles tendem a ser menores.

Este é um erro de codificação típico e não inerente ao formato. Você pode controlar a profundidade de cor e tornar o arquivo PNG tão pequeno. Consulte a seção relevante no artigo da Wikipedia.

Além disso, falta de apoio em MSIE6 está fora de proporção por Chrono:

Se precisar de transparência e pode conviver com GIFs, então eu recomendo-los porque IE6 apoia-los. O IE6 não se dão bem com PNGs transparentes.

Isso é errado. MSIE6 faz transparência apoio PNG. Ele não suporta o canal alfa (sem alguns hacks), embora, mas isso é uma questão diferente, pois GIFs não tê-lo em tudo.

O única razão técnica para uso GIFs em vez de PNGs é quando o uso necessidade animação e não quer contar com outros formatos.

Answer 2

Os W3C menção 3 vantagens do PNG mais de GIF.

• Os canais alfa (variável transparência),

• Cross-plataforma correção gamma (Controlo de brilho da imagem) e correção de cor

• entrelaçamento bidimensional (a método de exibição progressiva).

Além disso, ter um olhar para estes recursos para orientação:

• PNG do v GIF (W3C Orientação)
• PNG FAQ

Answer 3

Uau, estou realmente surpreso com todas as respostas erradas aqui. PNG-8 será sempre menor do que o GIF quando devidamente otimizado. Basta executar seus arquivos PNG-8 por meio de pngcrush ou qualquer um dos outros PNG rotinas de otimização.

As coisas mais importantes para entender:

• PNG8 e GIF são lossless <= 256 cores
• PNG8 sempre pode ser menor do que GIF
• GIF nunca deve ser usado a menos que você precisa animação

e, claro,

• Use JPG para imagens fotográficas preto e branco ou cor cheia
• Use PNG para baixo cor, arte de linha, tipo de tela imagens

Answer 4

A principal razão para usar PNG sobre GIF do ponto de vista legal é coberto aqui:

http://www.cloanto.com/users/mcb/19950127giflzw.html

As patentes aparentemente expirado a partir de 2004, mas a idéia de que você pode usar PNG como open-source sobre GIF é atraente para muitas pessoas.

(PNG referência de fonte aberta: http: //www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS )

Answer 5

Tenha cuidado com mudanças de cor quando utilizar PNG. Este link dá um exemplo, e contém muitos links mais com uma explicação adicional:

http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx

As imagens GIF não estão sujeitos a este problema.

Answer 6

Eu não acho que isso faz muita diferença (clientes não se importam). Pessoalmente eu escolheria PNGs porque eles são um padrão W3C.

Seja cauteloso com os efeitos de transparência PNG:. Eles não funcionam com o IE6

Answer 7

Para imagens na web, cada formato tem seus prós e contras. Para imagens do tipo fotografia (ou seja, lotes e lotes de cores, sem arestas duras) usar um JPEG.

Para ícones e similares, você tem uma escolha entre PNG e GIF. GIFs são limitados a 256 cores. PNGs pode ser formatado como GIFs (ou seja, 256 cores, com transparência de 1 bit que vai funcionar no IE6), mas para imagens pequenas eles são ligeiramente maior do que GIFs. PNGs de 24 bits suportam tanto uma grande gama e alfa transparência (embora seja problemático no IE6).

PNGs são sua única opção realmente sensível para coisas como imagens (ou seja, ambos os lotes de cores e arestas duras), e, pessoalmente, é isso que eu ficar com a maior parte do tempo, a menos que eu tenha algo para o qual JPEG é mais adequado (como uma foto).

Answer 8

indexado PNG (menos de 256 cores) é, na verdade sempre menor do que o GIF, então eu uso que a maior parte do tempo.

Answer 9

Por gráficos gerados por computador (ou seja, desenhados por si mesmo no Photoshop, Gimp, etc.) JPG está fora de questão, porque é com perdas - ou seja, você começa aleatórios pixels cinzentos. Para imagens estáticas, PNG é melhor em todos os sentidos: mais cores, transparência escalável (digamos, 10% transparente, .gif suporta apenas 0% e 100%), mas não é um problema que algumas versões do Internet Explorer não fazem PNG transparência corretamente, para que você obtenha fundo plana não-transparente que parece feio. Se você não se preocupam com esses usuários do IE, ir para PNG.

BTW, se você quiser animações, ir para GIF.

Answer 10

PNG é um substituto de 100% para arquivos GIF e é suportado por todos os navegadores da web que você é provável encontrar.

Há muito, muito poucas situações em que GIF seria preferível. O mais importante é a animação - o GIF89a suporta o padrão de animação, e praticamente todos os browser suporta-lo, mas o formato PNG velho liso não -. Você precisa usar MNG para isso, que tem suporte ao navegador limitada

Praticamente todos os navegadores suportam transparência de um único bit em arquivos PNG (o tipo de transparência oferecida pelo formato GIF). Há uma falta de apoio no IE6 para total transparência de 8 bits do PNG, mas isso pode ser corrigido para a maioria das situações, um pouco de magia CSS.

Se os seus arquivos PNG estão saindo maior do que arquivos GIF equivalentes, é quase certo, porque a sua imagem de origem tem mais de 256 cores. arquivos GIF são indexados a uma paleta máximo de 256 cores, enquanto os arquivos PNG na maioria dos programas gráficos são salvos por padrão em um formato lossless de 24 bits. Se o tamanho do arquivo é mais importante do que cores precisas, salve o arquivo como um 8-bit indexado PNG e deve ser equivalente a GIF ou melhor.

É possível "cortar" um arquivo GIF para ter mais de 256 cores usando uma combinação de quadros de animação com fazer-não-substitui bandeiras e várias paletas, mas esta abordagem tem sido praticamente esquecido desde o advento da PNG.

Answer 11

Um grande problema com GIFs são que é uma patente-oneradas formato (EDIT: Este é, aparentemente, já não é verdade). Se você não se preocupam com isso, fique à vontade para usar GIFs. PNGs tem muito mais flexibilidade sobre GIFs, particularmente na área de espaço de cores, mas que a flexibilidade, muitas vezes significa que você vai querer "otimizar" os PNGs antes de publicá-los. A pesquisa na web deve descobrir ferramentas para a sua plataforma para isso.

É claro, se você quiser animação, GIF é o único caminho a percorrer, uma vez que MNG era basicamente um non-starter, por algum motivo.

Answer 12

"Pode ser apenas as ferramentas que eu estou usando, mas GIF arquivos geralmente parecem ser um pouco menor do que um PNG comparible, mas usá-los parece tão 1987".

Provavelmente é suas ferramentas. Desde o PNG FAQ:

"Há duas razões principais por trás desse fenômeno: comparando maçãs e laranjas (ou seja, não comparando os mesmos tipos de imagem), e usando ferramentas ruins." continuou ...

Mas você pode sempre tentar salvar tanto como (usando a mesma profundidade de cor) e ver o que sai menor.

É claro, se você quiser padronizar um formato gráfico para o seu site, PNG é provável que seja a melhor para uso.

Answer 13

Pessoalmente eu uso do gif um pouco para minhas imagens, como eles trabalham em todos os lugares, obviamente, a sua limitação a transparência é um elemento chave que iria dirigir alguém para um formato específico.

Não vejo quaisquer quedas de usar GIF.

Answer 14

Se eles ficam menores e você não tem nada a ganhar com usando o ofertas PNG apresenta (que é alfa transparência de canal e mais de 256 cores), então eu não vejo nenhuma razão pela qual você deve usar PNG.

Answer 15

Os arquivos GIF tendem a ser um pouco menor, uma vez que não suportam um canal de transparência alfa (e talvez para algumas outras razões). Pessoalmente, eu não me sinto a diferença de tamanho é realmente vale a pena se preocupar com quase tanto como ele costumava fazer. A maioria das pessoas estão usando a web com algum tipo de banda larga agora, então eu duvido que eles vão notar a diferença.

É provavelmente mais importante usar o tipo de imagens que suas ferramentas de manipulação funcionam melhor com.

Além disso, eu como a capacidade de colocar uma imagem em qualquer fundo e ter um trabalho de sombra, que me aponta mais para o formato PNG.

Answer 16

Eu costumo usar GIF por causa do tamanho, mas há também PNG-8, que é de 256 cores também.

Se precisar de fantasia material semi-transparente, em seguida, usar PNG-24.

Eu costumo usar o recurso 'Salvar para Web' no Photoshop, que permite mexer com filetype, número de cores, etc, e ver o resultado antes de salvar. É claro que eu iria usar o menor possível que ainda fica bem em meus olhos.

Answer 17

Eu uso jpg para todas as imagens não transparentes. Você pode controlar a compressão, o que eu gosto. Eu encontrei este site que compara os dois. jpg é menor e parece melhor.