Otimizando gráficos para a internet

A meta principal em
um projeto gráfico da Web é a criação de imagens atraentes
e de rápida transferência. Para isso, deve-se reduzir
o número de cores, selecionar um formato com a melhor
compactação para a sua imagem, mantendo a melhor qualidade
possível. Esse processo de equilíbrio é chamado de otimização.
Mas para um controle maior das opções de compactação
e gerenciamento de cores, é importante ter um bom editor
de imagens específico para a Internet.

A otimização de imagens
consiste basicamente em:

Escolher
o melhor formato de arquivo

Cada formato de arquivo tem uma forma diferente de compactar informações
de cores no arquivo. A escolha do formato apropriado
para determinados tipos de gráficos pode reduzir sensivelmente
o tamanho do arquivo. Os formatos mais comuns na Internet
são o GIF (Graphics Interchange Format) e o JPEG (Joint Photographic Experts Group).
O PNG (Portable Network Graphic), por ser um formato mais novo, está em grande expansão na Internet
nos últimos tempos, principalmente pela sua versatilidade.
Mais adiante, veremos as vantagens, desvantagens e aplicações
de cada formato.

Definir
opções específicas de formato

Cada formato citado acima tem um conjunto exclusivo de opções para
controle de compactação de imagem. Por exemplo, você
pode usar o pontilhamento em um GIF para compensar o
número menor de cores armazenados na imagem, ou usar
a suavização em um JPEG para embaçar um pouco a imagem,
ajudando a compactação JPEG a reduzir o tamanho do arquivo.

Ajustar
as cores da imagem

As cores podem ser limitadas, restringindo a imagem um conjunto específico
de cores. Esse conjunto é chamado paleta de cores de
uma imagem. Quanto menor o número de cores da paleta,
menor o número de cores na imagem, resultando em um
arquivo de tamanho menor. Mas tem que se ter um cuidado
especial ao definir uma paleta de cores a uma imagem,
pois a redução do número de cores pode também diminuir
a qualidade da imagem, por isso é interessante experimentar
várias paletas de cores para encontrar o melhor equilíbrio
entre qualidade e tamanho.

Selecionando o melhor
formato de arquivo

A compactação de imagens
garante uma transferência mais rápida pela Internet.
No entanto, a aparência de um gráfico pode variar de
um formato para outro, dependendo do método de compactação
de cada um. Abaixo está uma descrição de cada formato.

GIF (Graphics
Interchange Format)

GIF é um formato gráfico
popular para a Web. Embora possa conter apenas 256 cores,
o formato GIF oferece uma boa compactação de imagens
sem muitas perdas de qualidade. Além disso, imagens
compactadas no formato GIF podem conter áreas transparentes
e múltiplos quadros para se compor uma animação.

As imagens compactadas
com compactação sem perda normalmente não perdem a qualidade
de imagem. O GIF é compactado digitalizando-se horizontalmente
por uma fileira de pixels, encontrando
áreas sólidas de cores e então, abreviando-se áreas
idênticas de pixels no arquivo.

Portanto, as imagens com
áreas respectivas de cor chapadas compactam melhor quando
exportadas como GIFs. O GIF é geralmente ideal para
imagens gráficas como desenhos, logotipos, gráficos
com áreas transparentes e animações.

Observação: Alguns
efeitos otimizadores do GIF, como pontilhamento e suavização
de serrilhado produzem imagens maiores.

JPEG (Joint Photographic
Experts Group)

JPEG é uma alternativa
para o formato GIF desenvolvida pelo Joint Photographic
Experts Group especificamente para
imagens fotográficas. O formato JPEG suporta milhões
de cores (24 bits).

Esse é um formato com
muita perda, o que significa que alguns dados de imagem
são descartados quando compactados, reduzindo a qualidade
do arquivo final. Entretanto, os dados de imagens muitas
vezes podem ser descartados com pouca ou nenhuma diferença
perceptível em qualidade.

O formato JPEG é o melhor
para fotografias digitalizadas, imagens com texturas,
com transição de cores de dégradé ou qualquer imagem
que exija mais de 256 cores.

PNG (Portable Network
Graphic)

O formato gráfico Portable
Network Graphic, ou PNG é o mais versátil para a Web. No entanto, nem todos os navegadores
podem aproveitar todas as vantagens das características
do PNG sem usar plug-ins. O formato PNG pode suportar cores de até 32 bits, converter transparência
ou um canal de cor alfa e ser progressivo.

A compactação PNG não
apresenta perdas, mesmos em grandes intensidades de
cor. Ele compacta fileiras e colunas de pixels,
muitas vezes produzindo uma compactação melhor que o
GIF, que varre somente fileiras.

O formato PNG é o melhor
para a criação de transparência complexa ao vivo, imagens
gráficas high-color e imagens
gráficas low-color melhor compactadas.

Configurações de otimização
para GIFs e PNGs

Intensidade
de cor

Intensidade de cor é o
número de cores da imagem gráfica exportada. As imagens
GIF são sempre exportadas em cores de 8 bits (256 cores)
ou menos. Você pode exportar PNG com maior intensidade
de cor.

As intensidades maiores
de cor criam arquivos exportados maiores e normalmente
não são ideais para imagens gráficas da Web. Use PNGs
com intensidades de cor de 24 ou 32 bits quando exportar
imagens fotográficas com tons contínuos ou misturas
de cores complexas de dégradé.

Paleta
de cores

Cada GIF e PNG de 8 bits
exportado contém uma paleta de cores. A paleta de cores
é uma lista de até 256 cores disponíveis para arquivo.
Somente as cores definidas na paleta de cores aparecem
na imagem gráfica; no entanto, algumas paletas contém
cores que não estão no gráfico.

Por isso, é interessante
eliminar cores da paleta que não estão na imagem. Esse
procedimento diminui ainda mais o tamanho de um arquivo.
Porém cuidado ao fazer esse procedimento, pois se muitas
cores forem eliminadas da paleta, a sua imagem pode
perder muito da sua qualidade sem uma redução de tamanho
de arquivo significativa.

A configuração da paleta
de cores é um processo de equilíbrio: não se deve deixar
cores desnecessárias, mas também não se deve retirar
muitas cores que estão no arquivo.

Pontilhamento
de cores

O pontilhamento aproxima
cores que não estão na paleta atual alternando duas
cores semelhantes disponível pixel
a pixel. Esse recurso é bastante
útil para importar imagens com misturas complexas ou
degrades, ou imagens fotográficas para um formato de
imagem indexada como o GIF.

Porém cuidado ao usar
esse recurso, pois o pontilhamento pode aumentar sensivelmente
o tamanho de um arquivo.

Áreas
transparentes

Você pode definir áreas
transparentes tanto em GIFs como em PNGs de maneira
que, no navegador da Web, o fundo da página Web fique
visível através das áreas transparentes da imagem.

Entrelaçamento
de imagens

Quando exibidas em um navegador da Web,
as imagens entrelaçadas aparecem rapidamente com baixa
resolução e à medida que vai carregando passa à resolução
total.

Configurações de otimização
para JPEGs

JPEGs sempre são salvos
em cores de 24 bits. A compactação JPEG especializa-se
em compactar transições e degrades de cores.

Embaçando
as bordas

A suavização embaça bordas
acentuadas, as quais não são bem compactadas em JPEGs.
Números maiores produzem mais embaçamento no JPEG exportado,
criando, normalmente, arquivos menores.

Aguçando
bordas coloridas e detalhes delicados

Use aguçar bordas do JPEG
ao exportar JPEGs com texto ou detalhe fino para manter
a nitidez dessas áreas.

A escolha de aguçar bordas
aumenta o tamanho do arquivo.

JPEGs
progressivos

JPEGs progressivos, como
GIFs entrelaçados, são exibidos em baixa resolução e
então aumentam em qualidade à medida que a sua transferência
continua a ser feita.

Alguns aplicativos de
edição de imagem mais antigos não abrem JPEGs.

Conclusão

O processo de otimização
de imagens para internet é, como foi dito no começo,
um processo de equilíbrio. Equilíbrio entre o tamanho
do arquivo, que precisa ser o menor possível para uma
transferência mais rápida pela Web; e entre a qualidade
do arquivo, que precisa ser a melhor possível também.

Para ajudar todos que
precisam passar por essa árdua tarefa, existem vários
formatos de arquivos e cada um deles tem ferramentas
que tornam esse processo mais fácil.

Espero que eu tenha ajudado
a todos, mostrando todos os recursos de otimização de
imagens para Internet atualmente.

Este
documento contém trechos do Manual do Macromedia
Fireworks 4, do Capítulo 11, Otimizar gráficos, das páginas 153, 157, 158, 159
e 160, na versão Português (Brasil). Esse manual é distribuído
gratuitamente via Internet pelo site
da Macromedia Brasil (http://www.macromedia.com/br/),
inclusive na versão em português. Todos os direitos
reservados a Macromedia
Inc©.