Neste workshop de HTML mostraremos um exemplo de transparência em formatos gráficos GIF e PNG, comprovando suas diferenças e as vantagens que nos traz PNG de 24 bits para eliminar as "auréolas" ou também chamados os halos. O que veremos é um exemplo muito simples, porém muito interessante para ilustrar um modo de fazer transparências que sempre ficam bem, sobre qualquer fundo.

Os halos são as bordas que às vezes saem nas imagens que têm transparências, que são como uma borda de cor que rodeia as silhuetas dos desenhos da imagem. Mesmo que você não saiba o que é um halo, certamente já viu em diversas páginas web que têm halos em suas imagens, efeitos que ficam muito mal e dão má imagem do desenvolvedor da página.

Os dois formatos que suportam transparência, que podemos utilizar para o desenvolvimento de uma página web, são o GIF e PNG. O formato PNG é muitas vezes desconhecido pelos desenvolvedores, ou simplesmente ignorado, porque anteriormente não era compatível com todos os navegadores. No momento atual, nenhum navegador tem problemas para mostrar os arquivos PNG, porém como este formato não se começou a utilizar desde o princípio muitos dos desenvolvedores não o usam habitualmente.

Utilizaremos neste workshop as duas imagens a seguir:

GIF
PNG-24 bits

Como podemos comprovar temos duas imagens, nos dois formatos mencionados: GIF e PNG. Podemos ver que neste caso mostram poucas diferenças, ou melhor, nenhuma à primeira vista. As duas se vêem igualmente bem, embora realmente não pareça que seja uma imagem transparente porque realmente as colocamos sobre fundo branco.

Vejamos estas duas imagens sobre um fundo de outra cor:

GIF
PNG-24 bits

Neste outro caso tudo vai bastante bem, as diferenças são quase inapreciáveis. O fundo de cor rosa é bastante claro e não permite ver realmente o que queremos mostrar no exemplo. Portanto, vamos mostrar estas duas imagens sobre um fundo mais escuro, que nos servirá para ver o efeito desagradável que começa a acusar o formato GIF.

GIF
PNG-24 bits

Nesta amostra podemos ver os famosos halos, no formato GIF. São essas silhuetas brancas que aparecem ao redor dos desenhos da imagem.

Por que ocorre isso?

A borda da figura está suavizada, por isso os píxels ao redor desta têm tonalidades que não são diretamente a cor da figura nem o transparente do fundo. Quando fizermos esta imagem com Photoshop, ou qualquer outro programa de design gráfico, aconteceria isto com o suavizado, porque ele sempre tende para uma cor de fundo, neste caso o branco. A não ser que tirássemos o suavizado, mas tiraríamos os halos, assim a forma teria uma cor e logo diretamente apareceria o transparente, porém isso posso garantir que isso fará com que a imagem perca bastante qualidade.

Em GIF, com um pouco de trabalho podemos consertar, simplesmente com nosso programa de design gráfico fazemos a figura sobre outro fundo, da cor que necessitarmos. Ou seja, desenhamos a forma diretamente sobre um fundo da mesma cor que a da onde pensamos colocar. Logo, marcamos como transparente a cor de fundo. O suavizado permanecerá, tendendo a essa cor ao invés do branco. Porém claro, sempre temos o problema que a imagem só nos servirá para fundos da tonalidade para a qual prepararmos, ou uma muito similar.

Com o formato PNG-24 bit não temos esse problema, a imagem continua transparente. Isto é uma vantagem muito interessante, porque nos servirá sempre, independentemente do fundo sobre o qual a colocarmos.

Agora vamos ver o exemplo sobre um fundo negro:

GIF
PNG-24 bits

Este é o pior dos casos, onde o halo resulta mais patente. É porque tínhamos criado a imagem sobre fundo branco e o suavizado branco ao redor da figura contrasta exageradamente sobre o negro de fundo.

Enquanto isso, o formato PNG continua se comportando bem com a transparência. Inclusive, se colocarmos a imagem sobre um fundo que tenha uma textura ou qualquer outro desenho, o PNG continua sendo visto perfeitamente.

GIF
PNG-24 bits

Conclusão sobre transparência GIF e PNG

Não se deve subestimar PNG. Ao contrário, queremos ressaltar suas vantagens, na hora de tratar a transparência, com respeito ao formato GIF. As transparências que conseguimos com PNG são muito mais versáteis porque poderemos utilizá-las sobre qualquer fundo que necessitarmos.