Layout Test

GIF

< Surgiu em 1987 com a proposta de substituir o formato em branco e preto RLE e trazer cores às imagens da web usando a compressão /wiki/LZW">LZW que no GIF usa até 256 cores para compor a imagem, o que resulta num arquivo com boa compressão, mas com limitações quando a imagem contém muitos detalhes, ou seja, muitas cores. Dois fatores foram cruciais para a popularização do formato nos primordes da web: o tamanho do arquivo era ótimo para modem de 14kbps (argh!) e ter suporte a animação. Mesmo resultando em animações simples, em muitos casos é ideal usar GIF animado em alternativa ao Flash por questões de acessibilidade e simplicidade. Seu calcanhar de Aquiles é o limite de 256 cores e o uso limitado de transparência. Como o GIF substitui uma cor pela transparência, não é possível criar níveis de transparência diferentes para um cor específica o que resulta no famoso “serrilhado” nas bordas dos GIFs transparentes.

JPG

Foi finalizado em 1992 e usando uma compressão diferente do LZW, usada pelo GIF, conseguiu um ótimo equilíbrio entre tamanho de arquivo, detalhes e quantidade de cores da imagem. Apresentou-se como a melhor alternativa para imagens com mais de 256 cores mantendo o tamanho do arquivo reduzido, ganhou ainda mais popularidade quando o Mosaic, primeiro browser da web, ganhou suporte a ele. Hoje o JPG (ou JPEG) é o formato mais popular de imagem não só na web, mas também em equipamentos digitais como máquinas fotográficas.
Três fatores fazem o JPG não ser o GIF Killer completo: não ter suporte a animação, compressão excessiva de gráficos com poucas cores e não suportar transparência. Apesar do GIF não apresentar o suporte perfeito a transparência, ainda é uma alternativa que vale a pena em ícones de fundo transparente, por exemplo.

PNG

É um formato de código aberto que foi criado em 1995 para resolver problemas de patentes pelo uso do GIF. Até 2003, toda empresa que quisesse usar a biblioteca do GIF em seus softwares precisava pagar royalties aos criadores. O PNG tem uma compressão de dados que utiliza todas as cores possíveis.
Além do fabuloso suporte à transparência usando canal alpha, o mesmo método usado em formatos de arquivo dos programas gráficos famosos, ele é tão bom para gráficos com poucas cores quanto para fotografias. Em 1996 foi adotado como padrão de gráfico pela W3C e hoje é o terceiro formato de imagem em popularidade na web.
O problema? Tamanho do arquivo um pouco maior que o GIF e JPG, mas depende muito do caso e também do tipo de compressão usado. Há casos em que o PNG 8 é o ideal para logotipos e ícones. O arquivo cresce principalmente em fotografias com muita informações de cores. Mas o verdadeiro concorrente do PNG não são outros formatos gráficos, é o Windows. O sistema operacional até a versão XP não tinha suporte nativo ao PNG 24 bits e só no Windows Vista tem suporte completo “de fábrica”, incluindo transparências e fidelidade de cores.

Comparações práticas e conclusões

As imagens da comparações foram geradas usando o Adobe Photoshop CS2 e Adobe Fireworks 8. Os dois softwares apresentaram grandes diferenças em relação a qualidade das imagens, por isso não basta saber escolher o formato correto para cada tipo de imagem, também é preciso saber escolher o programa gráfico que consiga o equilíbrio perfeito entre tamanho de arquivo e qualidade da imagem final para web. As comparações em zoom estão no formato PNG 24 sem perda de qualidade para apresentar exatamente os resultados da compressão dos diferentes formatos. Como ficou bem extensa acabei criando uma página para as comparações, confira as tabelas de testes e conclusões.