CUIDADOS A TER COM IMAGENS

Cuidados a Ter com Imagens na Web
CUIDADOS A TER COM IMAGENS
NA
WEB
Autoria
Rodolfo Duarte e Sousa
RESUMO: Pretende-se transmitir alguns dos cuidados que se deve ter
com imagens em páginas na web. Deste modo, serão mencionados
alguns dos erros mais comuns na elaboração de páginas e como
ultrapassá-los.
PALAVRAS CHAVE: JPEG, GIF, Adobe ImageReady
INTRODUÇÃO
Este artigo tem como objectivo, descrever alguns dos cuidados que se deve
ter na criação de páginas para web. Estes cuidados dizem respeito principalmente
ao tamanho físico e dimensão das imagens. Serão descritos alguns passos de como
ultrapassar alguns dos problemas usando o software da Adobe o ImageReady TM.
Este artigo requer que o leitor tenha alguns conhecimentos de linguagem de
HTML e de manipulação de imagens.
IMAGENS E PÁGINAS WEB
As imagens são um dos factores mais importantes para o sucesso das suas
páginas pois, além da informação, são elas que levam a que o mesmo utilizador
volte posteriormente. Sendo a informação a componente que mais se altera quer a
nível tecnológico quer temporal, não obriga a ter grandes cuidados porque resumese praticamente a texto. Em relação às imagens, o panorama muda de figura
devido ao seu difícil manuseamento.
Deste modo é necessário que se tenham alguns cuidados durante a
construção de uma página.
Pag 1/5
Cuidados a Ter com Imagens na Web
Tamanho: Durante o desenvolvimento de um site, é necessário ter em
consideração qual a área visível das páginas no ecrã. Neste momento a área
utilizada pela maioria dos sites nacionais e internacionais é a resolução
800x600, um facto a ter em conta é a maneira como as imagens e o texto
estão dispersos na página. Existem algumas formas de organizar as imagens
dentro e fora do texto, há quem opte por ter as imagens isoladas a seguir
ou antes de um paragrafo ou, telas entre o texto:
... .. . .. . .. . .. . .. .. . .. . . .. ..
… . .. . . . .. . . .. . . . . . .
.. . . . . . . . .. . . . . . .. . .
... . . .. ... .. . .. . .. . .. .. . . .. .
. . .. . . . . . . . . . . . . .... . . . .. . . .
Exemplo 1
Exemplo 2
No primeiro exemplo, o mais comum, as preocupações não são muitas, pois
o texto não depende do tamanho das imagens. No segundo exemplo, as
preocupações são relativamente ao tamanho que a imagem tem ou poderá
vir a ter, consoante seja constante ou não. Deve-se ter em consideração
que, caso a resolução do utilizador que está a consultar a página não seja
aquela para a qual o site está optimizado, os resultados podem ser menos
bons com o segundo exemplo do que com o primeiro.
Outro aspecto não menos importante é o tamanho físico que a imagem
ocupa. Devido ao grande tráfego existente nas comunicações de internet e,
por consequência tempos de espera elevados, é fundamental que o site que
está a ser visitado tenha um bom tempo de resposta pois, caso contrário, o
utilizador pode abandonar a consulta. Uma das causas da pouca velocidade
a aceder a uma página são as imagens, e isso deve-se quer à quantidade de
imagens existentes na página quer o seu tamanho físico.
Caso pretenda mostrar várias imagens na sua página, crie um tipo de
mosaico onde, visualiza em tamanho reduzido cada uma delas, de modo a
que o utilizador tenha alguma percepção e possa escolher qual pretende
consultar ampliado.
Um factor que influência o tamanho físico das imagens é o formato em que
cada uma das imagens é gravado (este assunto será posteriormente focado
neste artigo).
Cores: As cores já foram um factor importante, actualmente quase passam
despercebidas, não sendo dada, muitos vezes importância à sua influência
Pag 2/5
Cuidados a Ter com Imagens na Web
durante a acessibilidade da página. Para quê gravar uma imagem com
informação de 256 cores se apenas estão a ser usadas 5?
Deste modo, e com o auxilio de algumas ferramentas existentes no mercado
de edição de imagens, podemos optimizar o tamanho de cada imagem
reduzindo a informação do número de cores existentes na imagem.
Um factor externo à qualidade com que as suas imagens são visualizadas, é
o número de cores que estão configuradas no monitor do utilizador. Isto
pode implicar que as cores existentes na página não sejam visualizadas na
totalidade. Exemplo, caso o monitor do utilizador esteja configurado para
apenas visualizar 256 cores distintas e, na página existam várias imagens,
em que o número total de cores distintas sejam superiores a 256 cores,
então as restantes cores são substituídas por aproximação.
FORMATOS DE IMAGENS
Como já foi mencionado neste artigo, o tamanho das imagens dependem
bastante do formato em que são gravadas. Existem dois formatos que podem ser
usados para imagens. São o formato GIF e JPEG. Existe outras técnicas e formatos
possíveis para serem usados como forma de visualizar imagens, mas este artigo
apenas focará o GIF e JPEG pois são os únicos que são suportados cem por cento
pelos browsers existentes e que não necessitam de qualquer plug-in para a sua
visualização ou funcionamento.
GIF: Este formato é normalmente usado para imagens de pequenas
dimensões. É principalmente usado para pequenos ícones pois tem boa
qualidade. Este formato é limitado a um número máximo de 256 cores não
tendo qualquer tipo de optimização para tamanho, no entanto tem a
possibilidade de escolher uma cor de transparência com o fundo onde a
imagem vai ser inserida.
JPEG: Este formato é óptimo para grandes imagens pois além de suportar
compressão, poupando assim algum espaço em disco, suporta mais de
dezasseis
milhões
de
cores,
tornando-o
no
preferido
para
imagens
fotográficas ou com bastantes cores. Como já foi referido, este formato tem
a possibilidade de compressão da imagem. Esta compressão influência a
qualidade da imagem que fica gravada em ficheiro, mas esta compressão
pode ser ajustada. Devido ao facto deste formato ser usado para grandes
imagens, temos uma outra opção que possibilita que a imagem seja
Pag 3/5
Cuidados a Ter com Imagens na Web
transferida progressivamente, de modo que o utilizador veja a imagem total
a partir de uma versão de baixa qualidade até ao resultado final.
MANIPULAÇÃO DE IMAGEM
Existem no mercado vários softwares de manipulação de imagens, um dos
mais utilizados nos PC é o Adobe PhotoShop TM. A versão 5.5 deste software vem
com uma ferramenta optimizada para manipulação de imagens vocacionadas para a
web. Esta ferramenta chama-se Adobe ImageReadyTM, e permite simular desde
qual será o resultado final do formato que escolhemos até como ficam as cores nos
browsers da Microsoft e da Netscape.
Deste modo, serão descritos alguns passos nesta ferramenta para os
formatos GIF e JPEG. Parte-se do principio que já foi criado uma imagem e que nela
já existe uma imagem que pretendemos exportar para GIF e JPEG.
Escolha a opção Optimized na janela da imagem para visualizar em tempo
real as suas escolhas.
GIF:
1. Na janela de optimização (caso não esteja visível
a janela use o menu Window e escolha a opção
Show Optimize)
2. Escolha o formato GIF.
3. Escolha o número de cores que pretende gravar o ficheiro na opção
Colors.
4. Caso pretenda ter transparência na imagem escolha a oção Transparency
e no Matte a cor que pretende dar transparência.
5. Depois de todas as alterações grave a sua imagem no formato GIF,
usando a opção Save Optimized As... no menu File.
Pag 4/5
Cuidados a Ter com Imagens na Web
JPEG:
1. Escolha o formato JPEG
2. Escolha o nível de qualidade na opção Quality. É
nesta opção que escolhe o nível de compressão,
quanto mais qualidade menos compressão é
feita.
3. Caso deseje efeito de progressão escolha a opção Progressive.
4. Após todas as alterações grave a sua imagem no formato JPEG usando a
opção Save Optimized As... no menu File.
CONCLUSÃO
Sendo a Internet um meio de comunicação e de acesso livre a qualquer
pessoa do mundo, é difícil tentar encontrar um equilíbrio que satisfaça todos
aqueles que a ela acedem. Deste modo este artigo descreveu alguns dos cuidados
que se deve ter em conta e como ultrapassa-los quando são usadas imagens em
páginas de web. Os GIFs são óptimos para imagens pequenas com poucas cores, os
JPEGs são destinados a imagens grandes e com muitas cores.
Caso tenha duvidas em escolher um ou outro formato, faça testes de
acessibilidade e de qualidade de modo a verificar qual a melhor formato a usar.
Tente sempre usar outra ligação de acesso à Internet de modo a verificar a
acessibilidade às suas páginas (caso não seja possível, peça a colegas seus).
Pag 5/5