O componente gráfico das páginas web tem muita importância, é que o que faz com que estas seja vistosas e o que nos permite aplicar nossa criatividade para fazer o design do site uma tarefa agradável. É também uma ferramenta para aproximar os sites ao mundo onde vivemos, entretanto, é também o causador de graves erros nas páginas e fazer destas, em alguns casos, um martírio para o visitante.

As noções básicas para o uso de arquivos gráficos são simples, conhecê-las, mesmo que seja ligeiramente, nos ajudará a criar sites agradáveis e rápidos. Não cometer erros no uso das imagens é fundamental, mesmo que não seja um designer e as imagens que utiliza são feias, utilize-as bem e assim, estará tornando mais agradável a visitas às suas páginas.

Tipos de arquivos

Em Internet se utilizam principalmente dois tipos de arquivos gráficos GIF e JPG, pensados especialmente para otimizar o tamanho que ocupam em disco, já que os arquivos pequenos se transmitem mais rapidamente pela Rede.

O formato de arquivo GIF se usa para as imagens que tenham desenhos, enquanto que o formato JPG se usa para as fotografias. Os dois comprimem as imagens para salvá-las. A forma de comprimir a imagem que utiliza cada formato é o que os faz ideais para um propósito ou outro.

Adicionalmente, pode-se usar um terceiro formato gráfico nas páginas web, o PNG. Este formato não tem tanta aceitação como o GIF ou o JPG, por várias razões, entre elas: o desconhecimento do formato por parte dos desenvolvedores, que as ferramentas habituais para tratar gráficos (como por exemplo, Photoshop) geralmente não suportam, e que os navegadores antigos também têm problemas para visualizá-las. Entretanto, o formato se comporta muito bem quanto a compreensão e a qualidade do gráfico conseguinte, pelo que seria útil se chega a extender seu uso.

GIF

Um logotipo é um exemplo claro de imagem GIF

Além se ser um arquivo ideal para as imagens que estão desenhadas, tem muitas outras características que são importantes e úteis.

Compressão: É muito boa para desenhos, como já foi dito. Inclusive pode ser interessante se a imagem é muito pequena, mesmo que seja uma foto.

Parte desta imagem é transparente

Transparência: É uma utilidade para definir certas partes do desenho como transparentes. Desse modo, podemos colocar as imagens sobre distintos fundos sem que se veja o quadrado onde está es está inscrito o desenho, vendo em troca a silhueta do desenho em questão. Para criar um gif transparente devemos utilizar um programa de desenho gráfico, com o qual podemos indicar que cores do desenho queremos que sejam transparentes. Geralmente, definimos a transparência quando vamos salvar o tráfico.

Cores: Com este formato gráfico podemos utilizar conjuntos de 256 colores ou menos. Este é um detalhe muito importante, visto que quanto menos cores utilizarmos na imagem, em geral, menos ocupará o arquivo. Às vezes, mesmo utilizando menos cores em um gráfico, este não perde muita qualidade, chegando a ser inapreciável à vista. Em alguns programas podemos modificar a quantidade de cores ao salvar o arquivo, em outros, fazemos enquanto criamos o gráfico.

32 Cores	16 Cores	8 Cores
Imagem tomada com distintas aquarelas de cores. Pode-se apreciar como que com poucas cores se vê bem o gráfico e como perde um pouco a medida em que lhe colocamos mais cores.

JPG

Uma fotografia com formato JPG

Vejamos agora quais são as características fundamentais do formato JPG:

Compressão: Tal como dissemos anteriormente, sua gama de compressão torna ideal este formato para salvar fotografias. Além disso, com JPG podemos definir a qualidade da imagem, com qualidade baixa o arquivo ocupará menos, e vice-versa.

Uma tentativa de transparência em JPG.

Transparência: Este formato não tem possibilidade de criar áreas transparentes. Se desejamos colocar uma imagem com uma área que pareça transparente procederemos assim: com nosso programa de desenho gráfico faremos com que o fundo da imagem seja o mesmo que o da página onde queremos colocá-la. Em muitos casos, os fundos da imagem e a página parecerão o mesmo.

Cores: JPG trabalha sempre com 16 milhões de cores, ideal para fotografias.

Otimizar arquivos

Para que as imagens ocupem o menos possível e se transfiram rapidamente pela Rede devemos aprender a otimizar os arquivos gráficos. Para isso, devemos fazer o seguinte:

Para os arquivos GIF: Reduziremos o número de cores de nossa aquarela. Isto se faz com nosso editor gráfico, em muitos casos poderemos fazer ao salvar o arquivo.

GIF 256 cores - 11,1 KB

GIF 16 cores - 7,3 KB

GIF 4 cores - 3,9 KB

Para os arquivos JPG: Ajustaremos a qualidade do arquivo quando estivermos salvando. Este formato nos permite baixar muito a qualidade da imagem sem que esta perca muito em seu aspecto visual.

JPG qualidade 0 3 KB

JPG qualidade 20 5,9 KB

JPG qualidade 50 10 KB

Photoshop é uma ferramenta excelente para otimizar arquivos. Vendo várias cópias podemos escolher a mais adequada.

É imprescindível dispor para otimizar a imagem de uma boa ferramenta que nos permita configurar estas características da imagem com liberdade e facilidade. Photoshop 5.5 ou 6 é um programa bastante recomendável, pois incorpora uma opção que se chama "Salvar para Web" com a qual podemos definir as cores do gif, a qualidade do JPG e outras opções em várias amostras. Assim, com todas as opções configuráveis, vendo os resultados do tamanho do arquivo, podemos otimizar a imagem de uma maneira precisa com os resultados que desejamos.

Também existem no mercado outros programas que nos permitem otimizar estas imagens de maneira surpreendente. Uma vez que criamos a imagem, a passamos por estes programas e nos comprimem ainda mais o arquivo, fazendo-lhe rápido de transferir e, portanto, mais otimizado para Internet. Ao ser estas utilidades tão especializadas, os resultados costumam ser melhores que com os programas de edição gráfica.

Exemplos de otimizadores gráficos:
- WebGraphics Optimizer
- ProJPG, GIF Imantion
E com versões On-line:
- JPG - GIF Crunchers
- GIF Wizard