Pular links da navegação e ir direto para o conteúdo

Publicado em 25 de Mar de 2007 às 00:09

Quando usar JPG, GIF ou PNG na web

Topo do site Web Design from Scratch onde fica o menu deixa claro que nesse caso o JPG não foi a melhor opção

Muitos desenvolvedores sabem da existência desses três formatos populares de imagens, mas muitos não sabem quando usar no momento certo equilibrando qualidade de imagem e tamanho do arquivo.

Uma olhadinha mais de perto na barra no topo do site Web Design from Scratch onde fica o menu deixa claro que nesse caso o JPG não foi a melhor opção, não só pela compressão mas também pelo tipo de gráfico que apresenta poucas cores e nuances o que seria um belo trabalho para o GIF ou para o PNG.

As definições, prós e contras

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 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.

Você é Desenvolvedor ou Designer?
Leia o blog do VTEX Lab, núcleo de inovação para ecommerce da VTEX. Também escrevo por lá. :)

  • R.Godoy

    Apesar de utilizar muito o jpg… prefiro o PNG. Provavelmente ele tomará seu lugar de destaque com a chegada em massa do VISTA…

    Gostei muito! Rodrigão divulga na faculdade cara! You’re brilliant… Everybody needs to know u… around the world.

  • O PNG é o melhor, mais flexível, mas enquanto o Windows e o IE que todo mundo usa tiver restrições ao PNG, ele nunca será massificado…
    Maldita Microsoft.

  • Fernando

    Sem dúvida o PNG é a melhor opção…. mas infelizmente o XP não aceita muito bem o formato. No XP o fundo não fica 100% transparente.

  • Thais

    uai vc faz essa reportagem sobre os sistemas enviar vários arquivos JPG, GIF ou PNG e não dá uma finalidade de tipoh… Qual é o significado dessa rúblicas ,por exemplo, e tbm não tem uma uma finalidade completa né?!?!?!
    Por exemplo de como usar essas rúblicas vc só disse como ela foi feita e quando!!!

  • Paulo Borges

    Muito boa brother, aprendi mais um pouco sobre esses formatos. Estava procurando sobre melhores práticas no uso de PNG pra Web com foco no PNG Transparente.

    Sucesso!!!

  • hugo

    como faço pra coloka em jpg minhas fotos?