Como sei que tipo de imagem usar?

8

Estou trabalhando em um site que utilizará imagens em vários aplicativos diferentes, desde botões de ação a avatares e imagens maiores. Quais fatores devo levar em consideração para decidir se essas imagens devem ser jpgs, gifs ou pngs?

website-design images png jpeg gif BenV
fonte

Respostas:

6
  • JPG para fotos ou grandes diferenças de cores
  • PNG para imagens com transparência gradual (desbotamento de 1 cor para claro)
  • GIF para imagens com pequenas paletas de cores

Obviamente, experimente cada imagem e veja o que resulta no menor tamanho de arquivo. Quanto menor o tamanho, melhor. Além disso, não se preocupe com a transparência no IE6 para seus PNGs, a avó não está tão preocupada com a aparência do site, apenas com o fato de poder ver fotos suas nele.

XOPJ
fonte
3

Tamanho do arquivo. Quanto menor o tamanho do arquivo, mais rápido ele fará o download para seus usuários. Portanto, escolha o menor tamanho de arquivo que não afete a qualidade da imagem.

(Geralmente, os JPGs são usados ​​para fotografias e os PNGs / GIFs são usados ​​para imagens semelhantes a ícones)

John Conde
fonte
11
Eu acrescentaria isso para capturas de tela da interface do usuário / não fotos - use PNG. O JPEG tende a pixelizar terrivelmente imagens que não são fotográficas.
scunliffe
1

Suporte do navegador . Eu acho que é IE6 ou IE7 e mais antigo não suportam imagens baseadas em png com um fundo transparente adequadamente. Geralmente, adiciona alguma cor de fundo divertida.

Jeremy
fonte
11
Somente o IE6 tem problemas com PNGs transparentes. IE7-9 está bem com eles.
bdadam
IE4 e suporte mais recente paletizado PNG com transparência : calendar.perfplanet.com/2010/png-that-works/#paletted
Kornel