Sem dúvida, um dos aspectos mais vistosos e atrativos das páginas web é o grafismo. A introdução em nosso texto de imagens pode nos ajudar a explicar mais facilmente nossa informação e dar um ar muito mais estético. Porém, o abuso pode nos conduzir a uma sobrecarga que se traduz em uma distração para o navegante, quem terá mais dificuldade em encontrar a informação necessária, e um maior tempo para carregar a página o que pode ser de um efeito nefasto se nosso visitante não tem uma boa conexão ou se é um pouco impaciente.

Neste capítulos não explicaremos como criar, nem como tratar as imagens, unicamente diremos que para isso utilizam-se aplicações como Paint Shop Pro, Photoshop ou Corel Draw. Também não explicaremos as particularidades de cada tipo de arquivo GIF ou JPG e a forma de otimizar nossas imagens. A este assunto será dedicado em um futuro capítulo.

As imagens são armazenadas em forma de arquivos, principalmente GIF (para desenhos) ou JPG (para fotos). Estes arquivos podem ser criados por nós mesmos ou podem ser baixados gratuitamente em sites web especializados. Em criarweb contamos com a maior base de dados de gifts animados e imagens de todo o tipo em português, que nos provem o site internacional Gograph .

Sendo assim, nestes primeiros capítulos nos limitaremos a explicar como inserir e alinhar devidamente em nossa página uma imagem já criada.

A etiqueta que utilizaremos para inserir uma imagem é <img> (image). Esta etiqueta não possui seu fechamento correspondente e nela temos de especificar obrigatoriamente o paradeiro de nosso arquivo mediante o atributo src (source).

A sintaxe fica então da seguinte forma:

<img src="caminho para o arquivo">

Para expressar o caminho, faremos da mesma forma que vimos para os links. As regras continuam sendo as mesmas, o único que muda é que, no lugar de uma página destino, o destino é um arquivo gráfico.

Além deste atributo, obviamente indispensável para a visualização da imagem, a etiqueta <img> nos propõe outra série de atributos de maior ou menor utilidade:

Atributo alt

Entre aspas deste atributo, colocaremos uma brevíssima descrição da imagem. Esta etiqueta não é indispensável, mas apresenta várias utilidades.

Primeiramente, durante o processo de carregamento da página, quando a imagem não tiver sido ainda carregada, o navegador mostrará esta descrição, com a qual o navegante poderá ter uma idéia do que se trata neste caso.

Isto não é tão trivial se temos em conta que alguns usuários navegam pela rede com uma opção do navegador que desativa a amostra de imagens, com o que tais pessoas poderão sempre saber de que se trata o gráfico e eventualmente mudar o modo com imagens para visualizar.

Além disso, determinadas aplicações para incapacitados ou para telefones vocais que não mostram imagens oferecem a possibilidade de lê-las, o que nunca é demais pensar nestes coletivos.

Em geral, podemos considerar como aconselhável o uso deste atributo salvo para imagens de pouca importância e absolutamente indispensável se a imagem em questão serve de link.

Atributos height e width

Definem a altura e largura respectivamente da imagem em pixels.

Todos os arquivos gráficos possuem umas dimensões de largura e altura. Estas dimensões podem ser obtidas a partir do próprio disigner gráfico ou também, clicando com o botão direito sobre a imagem vista pelo navegador para logo escolher propriedades sobre o menu que se desdobra.

O fato de explicitar em nosso código as dimensões de nossas imagens ajuda ao navegador a confeccionar a página da forma que nós desejamos inclusive antes das imagens serem baixadas.

Assim, se as dimensões das imagens tiverem sido proporcionadas, durante o processo de carregamento, o navegador reservará o espaço correspondente a cada imagem criando uma planificação correta. O usuário poderá começar a ler tranqüilamente o texto sem que este se mova de um lado a outro cada vez que se carregue uma imagem.

Além desta utilidade, o alterar os valores destes atributos, é uma forma imediata de redimensionar nossa imagem. Este tipo de utilidade não é aconselhável visto que, se o que pretendemos é aumentar o tamanho, a perda da qualidade da imagem será muito sensível. Inversamente, se desejamos diminuir seu tamanho, estaremos usando um arquivo maior do que o necessário para a imagem que estamos mostrando, com o que aumentamos o tempo de descarregamento de nosso documento desnecessariamente.

É importante insistir neste ponto já que muitos estreantes têm o péssimo costume de criar gráficos pequenos redimensionando a imagem por meio desses atributos a partir de arquivos de tamanho descomunal. Temos que pensar que o tamanho de uma imagem com umas dimensões da metade não se reduz à metade, e sim, que é aproximadamente 4 vezes inferior.

Atributo border

Define o tamanho em pixels do quadro que rodeia a imagem.

Dessa forma, podemos re-enquadrar nossa imagem se desejamos. É particularmente útil quando desejamos eliminar a borda que aparece quando a imagem serve de link. Em tal caso teremos que especificar border="0".

Atributos vspace e hspace

Serve para indicar o espaço livre, em pixels, que tem que ser colocado entre a imagem e outros elementos que a rodeiam, como texto, outras imagens, etc.

Atributo lowsrc

Com este atributo podemos indicar um arquivo de baixa resolução. Quando o navegador detecta que a imagem tem este atributo, primeiro descarrega e mostra a imagem de baixa resolução (que ocupa muito pouco e que se transfere muito rápido). Posteriormente, descarrega e mostra a imagem de resolução adequada (assinalada com o atributo src, que se supõe que ocupará mais e que será mais lenta de se transferir).

Está atributo está em desuso, mesmo supondo uma vantagem considerável para que o descarregamento inicial se realize mais rápido e que um visitante possa ver uma amostra da imagem enquanto se descarrega a imagem real.

Dica: Utilizar imagens como links Isto quer dizer que uma imagem, assim como um texto, pode servir de link. Visto a estrutura dos links podemos muito facilmente adivinhar o tipo de código necessário. <a href="arquivo.html"><img src="imagem.gif"></a>

Exemplo prático

Será óbvio para os leitores, fazer agora uma página que contenha uma imagem várias vezes repetidas, mas com diferentes atributos.

• Uma das vezes que saia deve ser mostrada com seu tamanho original e com uma borda de 3 pixels.
• Em outra ocasião a imagem aparecerá sem borda, com sua mesma altura e com uma largura superior a original.
• Também mostraremos a imagem sem borda, com sua mesma largura e com uma altura superior a original.
• Por último, mostraremos a imagem com uma altura e largura maiores que as originais, mas proporcionalmente igual que antes.

Vamos utilizar esta imagem para fazer o exercício:

As dimensões originais da imagem são 28x21, o código fonte seria então da seguinte forma:

<img src="img1.gif" width="28" height="21" alt="Tamanho original" border="3">
<br>
<br>
<img src="img1.gif" width="68" height="21" alt="Achatada" border="0">
<br>
<br>
<img src="img1.gif" width="28" height="51" alt="Alargada" border="0">
<br>
<br>
<img src="img1.gif" width="56" height="42" alt="Dobro grande" border="0">