Curso de html para Cegos.

Aula 5 - Imagens - Dimensões e Formato JPG.



-= Curso HTML - Imagens - Dimensões e Formato jpg =-
Marco Antonio de Queiroz.


Dimensionando as imagens.

Os programas navegadores quando carregam um documento HTML e encontram uma etiqueta de uma imagem, interrompem o processo de carga e solicitam ao servidor que lhe envie a dita imagem, aumentando a espera até que se complete a carga, repetindo este processo para cada imagem encontrada. Isto é especialmente incoveniente quando, como ocorre freqüentemente, no início da página há uma imagem pesada, que demora um tempo relativamente grande, não se vendo nada do resto da página. Para evitar este incoveniente existem umas extensões, denominadas de "atributos", da etiqueta de imagem <IMG SRC="imagem.gif"> que servem para indicar ao navegador quais são suas dimensões em pixels. (Este dado é obtido previamente de um programa gráfico).

Neste caso, o navegador atua de uma forma mais favorável. Como conhece as dimensões das imagens, lhes reserva um espaço na página e vai colocando o texto de forma apropriada, sem nenhuma interrupção. Estes comandos são WIDTH (largura) e HEIGHT (altura).
Por exemplo, para uma imagem qualquer:

<IMG SRC="qualquer.gif" WIDTH=72 HEIGHT=139>

É conveniente que façamos isso com todas as imagens, incluindo as imagens pequenas (ícones, botões, etc.), para que não haja nenhuma interrupção no processo de carga da página.

Podemos também, se quisermos, dimensionar as imagens com valores distintos dos que realmente tem, variando o tamanho, a largura e a altura. Isto é muito conveniente, por exemplo, para colocar na página um thumbnail (reprodução pequena de uma imagem), que tem um link com a imagem com seu verdadeiro tamanho.
Aqui um exemplo de thumbnail:
A imagem, "frajola.gif", tem na realidade a dimensão de 192x216 pixels (dados obtidos de um programa gráfico). Para dimensionar o thumbnail a 96x108 (guardando as proporções parecidas com a original, de 2:1), conseguimos com:

<IMG SRC="frajola.gif" WIDTH=96 HEIGHT=108>

Para fazer com que esta imagem reduzida tenha um link com a de tamanho original:

<A HREF="frajola.gif"> <IMG SRC="frajola.gif" WIDTH=96 HEIGHT=108> </A>

Também se pode conseguir isto de outra maneira, mais correta, porém mais trabalhosa. Seria reduzir em um programa gráfico esta imagem a 96x108, guardada com outro nome, e logo fazer um link para a respectiva imagem de tamanho real (solução mais conveniente).

Tamanho das imagens.

A maior síndrome das páginas Web é o tamanho de uma imagem. Gostam de colocá-las muito grande, atrapalhando a velocidade da navegação. Existem maneiras de minimizar o tamanho das imagens:

* reduzir o tamanho da imagem com um programa gráfico. A imagem terá menos pixels armazenados, em consequência, menos Kb para carregar.
* eduzir o número de cores utilizadas em uma imagem. Uma imagem GIF pode ter no máximo 256 cores, porém podemos reduzir este número. Podemos ter um logotipo atrativo para colocar no topo da página com apenas duas cores, uma de fundo e outra de primeiro plano. Com um programa gráfico podemos fazer isto.
* simplificar uma imagem. O formato GIF comprime a imagem buscando as sequências repetidas. Isto quer dizer que as grandes zonas da mesma cor se comprimem muito bem, ao contrário das que têm muitos tons e graduações. Como referência, um arquivo de imagem não deve ultrapassar os 60 Kb. As imagens, também, como regra, não devem ser maiores que 500x400 pixels, para não obrigar o usuário a ter que rolar a tela, com as teclas de cursores.

Quando se carrega a imagem de uma página, esta é armazenada num cache. Portanto, se esta mesma imagem for utilizada em outras páginas, não será requerida ao servidor para ser carregada de novo. Sempre que se puder, é conveniente repetir a mesma imagem em outras páginas, como por exemplo para os botões, ícones, barras separadoras, etc.

O formato JPEG ou JPG.

O método de compresão utilizado pelo formato GIF é muito conveniente para comprimir áreas monocolor, porém não é conveniente para coisas mais complicadas, como por exemplo, fotografias de objetos da vida real. Além disso, quando gravamos as fotos em formato GIF, reduzimos para 256 cores, o que torna a foto de má qualidade.

Para realizar este tipo de tarefa surgiu o formato JPEG (JPG). Armazena 16,7 milhões de cores, que é muito mais do que o olho humano pode distingüir e faz uso de complicados algorítimos matemáticos para comprimir o tamanho dos arquivos de imagens em até a décima parte do seu tamanho original. Isto quer dizer que uma imagem complicada que tenha sido comprimida no formato JPEG, comparado com o formato GIF, tem uma qualidade melhor e um tamanho de arquivo menor. Seu único incoveniente, é não ter a possibilidade de exibir cores transparentes.

GIFs transparentes.

Uma característica muito útil do formato GIF é a opção de ter uma cor transparente. Assim, com a transparência torna-se possível o gif utilizar-se da cor de fundo de uma tela para a composição da imagem.

Com relação ao formato JPG, todos os comandos antes já mencionados para a utilização do formato gif podem ser utilizados.

Esta aula está abaixo em formato txt.

Aula 5 - Imagens- Dimensões e Formato JPg em txt.



Voltar para a Página Principal.

Bengala Legal.



Hosted by www.Geocities.ws

1