Padrões Web e CSS – Caio J Ruman

Em uma frase: Salve no formato em que a relação qualidade/tamanho for a melhor.

Explicação detalhada:
O png é descartado como opção de escolha, pois ele apresenta diferença nas cores entre os outros formatos no IE6. É uma diferença pequena, mas dependendo do lugar que você colocar o png, fica muito aparente.

Então a opção fica entre o gif e jpeg, com o png sendo usado somente para casos de transparência.

Eu sempre uso jpeg-60 (jpeg-high no photoshop), pois é a melhor relação qualidade/tamanho para jpeg. E para gif eu uso o padrão de 128 cores.

Ao escolher entre o tipo de formato, eu levo em conta os fatores abaixo:

- É uma imagem formada por texto? Então dependendo do tamanho final eu uso gif, pois a perda de qualidade é menor. Fica menos borrada a imagem.

Exemplos: Itens de um menu, imagens usadas em títulos com técnicas de image-replacement.

- É uma imagem formada por muitos detalhes de gravura e fotos? Primeiro eu vejo se o tamanho da imagem como gif é muito grande e se ele ultrapassa a quantidade de 128 cores do gif. Em 80% dos casos essa resposta vai ser sim, então eu salvo como jpeg-60.

Exemplos: Fotos de pessoas, paisagens, etc e imagens muito coloridas.

- Para imagens que vão ser usadas em repetição de background ou bullets, eu sempre utilizo gif, pois dificilmente ele vai ter mais que 128 cores na imagem, e o tamanho vai ser menor.

- Em imagens para email o conceito muda um pouco. O tamanho da imagem importa muito. Normalmente eu salvo como jpeg-45 ou menos, sempre prestando atenção na qualidade da imagem e fazendo um comparativo entre gif e jpeg para ver qual fica com tamanho menor e maior qualidade.