Formatos de imagem Web site: Escolhendo o formato certo para a tarefa certa

StackOverflow https://stackoverflow.com/questions/392635

  •  23-08-2019
  •  | 
  •  

Pergunta

Ao projetar um site, o que você considera o melhor formato de imagem para uso para uma determinada tarefa?

Eu sempre me encontro em um dilema quando tentando descobrir o formato a utilizar para uma tarefa específica ... como por exemplo, Devo usar .jpg todo? , ou quando e por que eu deveria usar um .png?

Por exemplo, tendo Amazon 's website, eles usam . jpg para imagens de produtos ( Exemplo ), < strong> .gif para este pixel transparente ( Exemplo ) e .png para o seu CSS Sprites ( Exemplo )

Por outro lado, Play.com usar um .gif para o seu logotipo website ( Exemplo ), mas o uso .jpg para seus produtos website (como a Amazon) ( Exemplo ) e como tanto quanto a sua página principal vai, eles não têm qualquer .png é sobre ele.

Então, o que formatos devo usar para o meu site? e por que devo usá-los?

[UPDATE]

CruellO por este link para explicar as diferenças, e também Dustin para dar razões sobre o que usar <. / p>

Foi útil?

Solução

JPEGs são para fotos. Vejo JPEGs com texto nelas ocasionalmente e eles simplesmente horrível. Texto é melhor para o texto, caso contrário usar PNG.

Se não é uma foto, mas você quer um gráfico do mesmo, usar um PNG. Um PNG é quase sempre menor do que o gif equivalente e qualidade não vai perder como um arquivo JPEG. Um equivalente PNG de um JPEG será tipicamente muito maior (assumindo que é photorealistic). Pode haver momentos em que isso ainda é desejável.

PNG faz permitir 8-bits de transparência, mas se você tem que apoiar IE, você verá que eles continuamente se recusam a apoiar isso corretamente. Eles do apoiar um único bit de transparência em uma imagem de 8 bits (essencialmente o mesmo que o gif), tanto quanto eu sei. Há também inúmeros hacks para obter transparência de 8 bits para trabalhar no IE. Eu nunca incomodado, eu mesmo.

Em resumo:

  • Fotos ? jpg
  • ! Fotos ? png

Outras dicas

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

Em primeiro lugar, existem dois tipos de compressão: Lossless e com perdas .

Lossless significa que a imagem é feita menor, mas sem nenhum prejuízo para a qualidade. com perdas significa que a imagem é feita (mesmo) menor, mas a um prejuízo para a qualidade. Se você salvou uma imagem em um formato com perdas mais e mais, a qualidade da imagem iria ficar progressivamente pior e pior.

Há também diferentes profundidades de cor (paletas): indexado e cor direto .

Com indexado isso significa que a imagem só pode armazenar um número limitado de cores (geralmente 256) que são escolhidos pelo autor da imagem, com Direto isso significa que você pode armazenar milhares de cores que não foram escolhidos pelo autor.

BMP - Lossless / indexado e Direct

Este é um formato antigo. É Lossless (sem dados de imagem é perdido em Salvar), mas há também pouca ou nenhuma compressão em tudo, ou seja, salvar como resultados BMP em grandes tamanhos de arquivo. Ele pode ter paletas de ambos indexados e direta, mas isso é uma pequena consolação. Os tamanhos dos arquivos são tão desnecessariamente grande que ninguém realmente usa este formato.

Bom para: Nada realmente. Não há qualquer coisa sobressai BMP em, ou não é feito melhor por outros formatos.

BMP vs GIF

GIF - Lossless / indexado única

GIF usa sem perdas de compressão, o que significa que você pode salvar a imagem mais e mais e nunca perder quaisquer dados. Os tamanhos dos arquivos são muito menores do que BMP, porque a compressão boa é efectivamente utilizado, mas só pode armazenar uma paleta indexada. Isto significa que só pode haver um máximo de 256 cores diferentes no arquivo. Isso soa como muito uma pequena quantidade, e é.

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

Bom para: Logos, desenhos e outras imagens simples que precisam ser pequeno. Apenas realmente usado para sites.

GIF vs JPEG

JPEG - com perdas / Direct

imagens

JPEGs foram projetados para tornar detalhadas imagens fotográficas tão pequeno quanto possível, removendo informações que o olho humano não vai notar. Como resultado, é um formato com perdas, e salvando o mesmo arquivo mais e mais irá resultar em mais dados que estão sendo perdidos ao longo do tempo. Ele tem uma paleta de milhares de cores e por isso é ótimo para fotografias, mas os meios de compressão lossy é ruim para logotipos e desenhos de linha: Não só eles vão olhar confuso, mas essas imagens também terá um arquivo de tamanho maior em comparação com GIFs!

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

JPEG vs GIF

PNG-8 - Lossless / indexado

PNG é um formato mais recente, e PNG-8 (a versão indexada da PNG) é realmente um bom substituto para GIFs. Infelizmente, no entanto, tem alguns inconvenientes: Em primeiro lugar, não pode suportar animação como GIF pode (assim ele pode, mas somente Firefox parece apoiá-lo, ao contrário do GIF animação que é suportado por todos os navegadores). Em segundo lugar, tem alguns problemas de suporte com navegadores mais antigos como o IE6. Em terceiro lugar, software importante como o Photoshop tem muito pobre implementação do formato. (Maldito seja, Adobe!) PNG-8 só pode armazenar 256 cores, como GIFs.

Bom para:. A principal coisa que PNG-8 faz melhor do que GIFs está a ter suporte para Alpha Transparência

PNG-8 vs GIF

Nota importante: Photoshop não suporta Alpha Transparência para PNG-8 arquivos. (Dane-se, Photoshop!) Há maneiras de converter Photoshop PNG-24 para PNG-8 arquivos mantendo a sua transparência, embora. Um método é pngquant , outra é para salvar seus arquivos com fogos de artifício .

PNG-24 - Lossless / Direct

PNG-24 é um grande formato que combina Lossless codificação de cor direto (milhares de cores, assim como JPEG). É muito parecido com BMP a este respeito, exceto que PNG realmente comprime as imagens, de modo que resulta em arquivos muito menores. Infelizmente, PNG-24 arquivos ainda será muito maior do que JPEGs, GIFs e PNG-8, assim você ainda precisa considerar se você realmente quiser usar um.

Apesar de PNG-24s permitir que milhares de cores, enquanto que têm de compressão, eles não são destinados a substituir as imagens JPEG. Uma fotografia guardada como um PNG-24 provavelmente será pelo menos 5 vezes maior que a imagem JPEG equivalente, com muito pouca melhoria na qualidade visível. (Claro, isso pode ser um resultado desejável se você não está preocupado com o tamanho do arquivo, e deseja obter a melhor qualidade de imagem possível.)

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

Espero que ajude!

PNG deve ser usado quando:

  • Você precisa de transparência (ou 1-bit ou alfa transparência)
  • Lossless compressão vai funcionar bem (como para um gráfico ou logotipo ou imagem gerada por computador)

JPEG deve ser usado quando:

  • Lossless compressão não vai funcionar bem (como uma fotografia)
  • cor completa é necessário

GIF deve ser quando:

  • PNG não está disponível, como em software muito velho ou navegadores
  • Animação é necessário

Apesar dos mitos em contrário, PNG Supera GIF na maioria dos aspectos. PNG é capaz de todos os modos de imagem de GIF para além de animação, e quando usando o mesmo modo de imagem, PNG terá uma melhor compressão devido ao seu algoritmo deflacionar superior em comparação com LZW. PNG também é capaz de modos adicionais que GIF não podem fazer, como cor de 24 bits, e alfa transparência, mas isso é onde você pode se deparar com problemas na web. Alpha transparência tem problemas de compatibilidade com o IE6 que estão bem documentados (embora existem hacks para contornar).

modos PNG incluem (este é apenas um pequeno subconjunto)

  • Paleta de cores de 2 a 256 cores (como GIF)
  • Paleta de cores de 2 a 256 cores, com a cor transparente (como GIF)
  • True Color (24 bits de cores)
  • cor verdadeira com alfa (cor de 24 bits + transparência alfa de 8 bits) do canal

Para melhor compressão em PNG para a web, use sempre um modo de paleta. Se você encontrar arquivos PNG são maiores do que os arquivos GIF equivalentes, então você está salvando o PNG em cores de 24 bits eo GIF no modo de paleta (porque um GIF é sempre no modo de paleta). Tente converter para o modo de paleta em primeiro lugar.

Se você achar que seus arquivos PNG com transparência não estão funcionando corretamente no IE6, enquanto seus arquivos GIF são, então você está usando cores de 24 bit + alfa transparência no PNG e modo de paleta com uma cor transparente com GIF. Você tem que ter certeza que você converter seu PNG em um modo de cor da paleta com uma cor transparente.

PNG também tem outros modos, como paleta de cores com transparência alfa na paleta. Modos como este não pode ser usado no Photoshop.

Tente olhar para este site http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

Eles tentam explicar o que usar quando

Se você estiver armazenando ou apresentando um grande número de imagens do novo Google WebP might valer a pena considerar como é 25% menor do que PNG / JPG. Note que este não é suportado por todos os navegadores no momento. NB. Este saiu em 2010, após esta questão foi publicado.

JPEG ARQUIVO FORMATO

  1. Grande para imagens quando você precisa para manter o tamanho pequeno
  2. Uma boa opção para fotografias
  3. Bad para logotipos, arte de linhas e amplas áreas de cor lisa

GIF ARQUIVO FORMATO

  1. Ótimo para efeitos animados
  2. Nice opção para clip art, gráficos lisos, e as imagens que usam cores minimalistas e linhas precisas
  3. Uma boa opção para logos simples com blocos de cores

PNG ARQUIVO FORMATO

  1. Lossless
  2. Excelente escolha quando a transparência é uma obrigação
  3. Uma boa opção para logotipos e arte de linha
  4. Não suportado em todos os lugares

Você pode ver isso infográficos para informações mais detalhadas, Imagem Tipos de arquivo: Quando usar JPEG, GIF e PNG

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top