Exemplo 11: incluindo uma imagem

Neste exemplo, a imagem imagem.gif aparece alinhada entre as frases “Aqui você vê uma imagem:” e “Note que a imagem...”.

Se a imagem estiver em um diretório diferente do arquivo de texto, é preciso especificá-lo na referência. Recomenda-se que as imagens sejam colocadas em um diretório separado para facilitar a manutenção dos arquivos. Exemplo:

Alinhamento da imagem

No exemplo anterior, a imagem ficou alinhada à esquerda da tela e o texto imediatamente posterior a ela alinhou-se com o canto inferior direito da imagem. Esse é o alinhamento padrão de textos com imagens. É possível mudar o alinhamento utilizando o atributo ALIGN= dentro do tag <IMG>.

Agora a imagem ficou alinhada à esquerda e com o topo do texto “Note que a imagem...”. Para alinhar a imagem à esquerda, mas com o texto no centro, usa-se ALIGN=MIDDLE.

O texto utilizado imediatamente depois da imagem nos exemplos anteriores é curto. Se for usado um texto mais longo, apenas uma linha ficará alinhada com a imagem. O restante será jogado para a linha seguinte. Exemplo:

 
Exemplo 12: quebra de linha depois da imagem

Este problema pode ser contornado utilizando outros atributos de alinhamento que fazem a imagem “flutuar” ao lado do texto. Exemplo:

Exemplo 13: texto contornando a imagem

Neste exemplo, a imagem ficou alinhada à esquerda e permitiu que todo o texto imediatamente posterior ficasse alinhado à direita. Para alinhar a imagem à direita, usa-se o atributo ALIGN=RIGHT. A lista completa das formas de se alinhar uma imagem está no Apêndice B.

No entanto, quando usa-se os atributos ALIGN=LEFT ou ALIGN=RIGHT, todo o texto imediatamente posterior é puxado para o lado da imagem. Se for necessário interromper o fluxo de texto ao lado da imagem, pode-se usar o tag <BR> com o atributo CLEAR=ALL.

 
Exemplo 14: interrupção de um texto em torno da imagem

Borda

É possível colocar uma borda em volta da imagem. O atributo é BORDER. O valor da borda é expresso em pixels.

Exemplo 15: a borda de uma imagem

Texto alternativo

De nada vai adiantar caprichar na produção de uma imagem, se a pessoa que está vendo as páginas utiliza um navegador incapaz de mostrar imagens (sim, eles existem e são bastante utilizados, principalmente o lynx).

Outros usuários também ajustam o navegador para não carregar imediatamente as imagens. Por causa de conexões lentas, algumas pessoas preferem receber o texto e depois pedir as imagens. Mas para isso elas precisam saber do que se tratam as imagens. Essa é a função do texto alternativo. Pode-se colocar o título ou a melhor descrição possível de uma imagem utilizando o atributo alt:

 
Exemplo 16: o texto alternativo de uma imagem

No exemplo acima, o navegador foi ajustado para não carregar a imagem imediatamente ao carregar a página. O texto alternativo aparece junto com o ícone de imagem.

Margens

Pode-se controlar o espaço em volta da imagem colocando o valor em pixels da margem desejada. É possível definir as margens separadamente ou em conjunto. Para mais espaço em cima e embaixo da imagem, o atributo é VSPACE. Se o problema for espaço dos lados da imagem, usa-se o atributo HSPACE para definir as margens horizontais.

Cada um desses atributos (HSPACE e VSPACE) adiciona espaço nas duas faces da imagem (em cima e em baixo e à direita e à esquerda). Não há como definir uma margem maior apenas à esquerda ou somente na parte inferior.

Formatos e interlaceamento

Os formatos de imagem mais aceitos pelos navegadores são GIF e JPG. A vantagem do formato GIF é que se pode gravar na opção GIF89 para conseguir que a imagem seja carregada progressivamente, um efeito conhecido como interlaceamento. Com o carregamento progressivo, o usuário tem a impressão da imagem estar sendo carregada mais rápido.

O formato JPG oferece um fator de compressão maior do que o GIF. As imagens ocupam menos espaço em bytes. Mas o processo de compressão do JPG pode causar alguma perda de qualidade à imagem. Como regra geral, o formato JPG deve ser usado em imagens fotográficas e o GIF em imagens criadas em computador
ou desenhadas. A compressão do formato GIF se dá ainda melhor com imagens com poucas cores e trechos contínuos de uma cor só.

Dimensões

Se as dimensões da imagem forem colocadas na referência, o usuário terá a impressão de que a página foi carregada mais rápido.

Fornecendo as dimensões, o navegador reserva o espaço para a imagem e vai carregando o texto para que o usuário possa começar a ler. Depois de carregado o texto, as imagens começam a ser mostradas. Deve-se escrever a referência de imagem neste formato:

» Tabelas »