Agora que você já sabe incluir e formatar os textos de sua página, é possível que você queira dar mais vida à sua página, incluindo imagens e fundos nela.

Você faz as imagens em programas separados, em seu editor gráfico preferido. Ou pode usar imagens de outros sites. Mas os formatos ideais para home pages são GIF e JPG. Você não poderá usar o formato BMP.

A tag para inserir uma imagem em sua página é a seguinte:

<img src="nome do arquivo de imagem que vai aparecer">

Em "imagem que vai aparecer" você coloca o nome da imagem .gif ou .jpg ou o URL onde ela está para ser mostrada. Na verdade, apenas <img src="nome do arquivo de imagem que vai aparecer"> já seria o suficiente, mas com o tempo você vai precisar usar os outros atributos.

Atributos de imagem

. Width e height

São os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura da imagem). Se você não incluí-los, não se preocupe. A imagem vai aparecer assim mesmo. Mas definindo os tamanhos da imagem ela carregará mais rápido.

Outra vantagem em usar o Width e Height é que você pode diminuir ou aumentar o tamanho de uma figura como você desejar, porém não recomendamos que você redimensione as imagens com esta opção. Se você quiser ter uma imagem menor, use um editor de imagem pra diminuir o tamanho dela, a imagem ficará mais bonita e também será mais leve para carregar. Se você tem uma página com galeria de imagens e uma "pré-vizualização" delas menores, sempre crie uma imagem menor com o editor de imagens, nunca use a imagem "maior" redimensionada, ela vai demorar muito a carregar e a vizualização não ficará boa.

. ALT

Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto esta ainda não apareceu.

. Border

Tamanho da borda da imagem. Os navegadores colocam uma borda na figura se este atributo estiver com um valor maior que zero. A vantagem é ocultar a borda que aparece e que indica que há um link em volta das figuras clicáveis. Muitas vezes esta borda faz a imagem ficar feia, quando o valor atribuído é zero.

Uma tag de imagem com os atributos acima combinados ficaria assim:

<img src="nome do arquivo de imagem que vai aparecer alt="texto" border=0 width="largura da imagem" height="altura da imagem">

Um exemplo:

<img src="orbita.gif alt="Aqui aparece o texto alternativo" border=1 width="100" height="50">

Dicas e formato de arquivos de imagem

. Tamanho em KB

Evite ao máximo colocar imagens maiores do que 30Kb em sua página pois, quanto mais arquivos tiver e quanto maiores eles forem, mais lenta será a transfência, não é bom ter imagens "pesadas" na página, isso só vai tornar o carregamento mais demorado e os visitantes podem acabar desistindo de esperar. Procure organizar e dividir as imagens em seu site de modo que ele não fique muito pesado, nem sempre agrada aos visitantes ter muitas imagens.

. Programas

É essencial que seja escolhido um bom programa de edição de imagens para que seu site tenha uma boa apresentação gráfica. Entre os mais usados estão o Corel Draw, Adobe Photoshop e Paint Shop Pro.

. O formato GIF

Formato dominante na Internet, o GIF é um tipo de arquivo gráfico relativamente compacto (quando comparado com o BMP por exemplo) e o GIF pode ser transparente, não transparente ou animado.

Um GIF transparente é aquele onde uma cor pode ser escolhida para ser transformada em transparente quando vista por um navegador e mostrar o que há embaixo. Os programas que são mais usados para criar gifs e permitem que se crie transparências são o Photoshop e o Fireworks.

Os GIFS animados são aqueles que têm movimento. Nada mais são que uma seqüência de GIFS previamente preparados. O criador do GIF animado, usando um programa como o GIF Animator, escolhe as imagens que formarão a seqüência que dará a idéia de movimento.

. O formato JPEG (JPG)

Grandes fotos geralmente são salvas neste formato pois, nestes casos, se consegue reduzir bastante o tamanho em bytes da imagem, sem prejudicar sua qualidade. É aconselhável, antes de mandar um arquivo GIF grande para Web, testar como ficaria se salvo como JPG.

. O formato BMP

Esses bitmaps, apesar de muito utilizados no Windows, são muito pesados para a Web. Se quiser colocar alguma imagem que estiver neste formato, salve-a antes como GIF ou JPG usando um editor de imagens como o Paint Shop Pro, Photoshop ou FireWorks.