Menu
  1. Accueil
  2. Glossário
  3. Webmaster
  4. HTML

Gestão das imagens em HTML

Última modificação: sexta 26 janeiro 2018 à 13:08 por Bruna de França.

Como visualizar as imagens em sua página web

As imagens podem tornar um site mais atraente e fácil de usar, mas é importante não exagerar, porque as imagens podem implicar em um longo tempo de carregamento e, em alguns casos, prejudicar a sua legibilidade.


A tag IMG da linguagem HTML permite inserir imagens numa página HTML. A imagem pode ser colocada no mesmo servidor que a página na qual está inserida, mas também em outro servidor especificando seu URL completo.

Só os seguintes formatos de imagens são aceitos como padrão nas especificações do W3C (World Wide Web Consortium, é a principal organização de padronização da rede mundial de computadores):

As imagens JPEG (.JPG): as imagens que têm um grande número de cores serão bem comprimidas, o que quer dizer que ocuparão menos espaço, por conseguinte, necessitarão de um tempo de carregamento menor;

As imagens PNG: sua dimensão é fraca no caso de imagens com poucas cores ou com tons uniformes. Este formato permite ter imagens entrelaçadas (que aparecem progressivamente) com uma profundidade de cores de 24 bits e imagens onde se define uma cor como transparente;

As imagens GIF: possuem as mesmas vantagens que as imagens PNG, mas o formato GIF está limitado a 256 cores no máximo e este formato não é totalmente livre.

Como visualizar imagens na sua página web

Os principais atributos da marca IMG são os seguintes:

SRC: Indica o lugar da imagem (é obrigatório);

ALIGN: especifica o alinhamento da imagem em relação ao texto adjacente. Pode ter os valores: TOP, MIDDLE e BOTTOM (em cima, no meio e embaixo);

ALT: permite que você mostre um texto alternativo quando a imagem não for exibida;

TITLE: permite exibir uma bolha informativa (janela de informações) quando o cursor está na imagem;

WIDTH: permite especificar a largura da imagem;

HEIGHT: permite especificar a altura da imagem.

Então, para inserir uma imagem, você deverá introduzir uma tag do tipo: 

<IMG SRC="url_da_imagem" 
 ALT="Texto que substitui a imagem" 
 TITLE="Texto a ser exibido">

Comandos e atributos HTML para imagem

Veja o quadro dos comandos e atributos HTML:


AtributoValorResultadoEfeito Visual
ALIGNbottom
center
left
middle
top
right		Alinhamento da imagem.
ALT Texto alternativo no caso da imagem não aparecer.
BORDERNúmero inteiroNúmeros dos pixels da borda. A cor da borda pode ser definida pelo atributo LINK ou TEXT da tag <BODY>. Por padrão, o atributo BORDER vale 1, o que cria um pequeno quadro em redor da imagem. Para evitar isto, lembre-se de defini-lo como igual a 0.
HEIGHTNúmero inteiroAltura da imagem (em pixels ou %). Quando este atributo especifica um tamanho diferente do original do gráfico, o navegador a redimensiona dinamicamente, o que pode resultar em uma exibição de qualidade inferior.
HSPACENúmero inteiroNúmeros de pixels de ajustamento entre a imagem e o texto adjacente (horizontalmente).
Texto
LONGDESCURL da descrição da imagem.
LOWSRCURLImagem alternativa (geralmente menor) visualizada durante o tempo em que a verdadeira imagem leva para ser carregada pelo navegador.
NAMEDefine o nome da imagem. Este atributo é útil principalmente para as imagens em Javascript.
SRCURLURL da imagem.
TITLEMostra um texto alternativo caso a imagem não apareça.
USEMAPURL ou nome da âncora que define a imagem mapeada.
VSPACENúmeros de pixels de ajustamento entre a imagem e o texto (verticalmente).Ensaio de texto.
WIDTHNúmero inteiroAmplitude da imagem (em pixels ou %). Quando este atributo precisa de uma dimensão diferente da original do gráfico, o navegador o redimensiona dinamicamente, o que pode provocar uma exibição de qualidade inferior.

Como adicionar o texto à imagem

As imagens são inseridas no texto como caracteres. Isso torna impossível colocar um texto em torno de uma imagem. No entanto, existem várias maneiras de fazê-lo. Veremos duas delas: a primeira consiste em criar um quadro com uma linha e duas colunas, nas quais se colocam a imagem e o texto e a segunda (menos precisa) envolve o alinhamento da imagem para a esquerda ou para a direita com o atributo ALIGN e, em seguida, introduzir o texto. Se você quiser impedir que o texto envolva as imagens, basta usar o atributo CLEAR.

O que são as imagens reativas ou MAP

Você também pode criar áreas clicáveis dentro de uma imagem, graças ao atributo USEMAP, usado em conjunto com a tag MAP. O atributo USEMAP da tag <IMG> indica uma tag <MAP> que contém a descrição do corte da imagem em zonas clicáveis.


A tag <MAP> tem um atributo NAME que define o seu nome (NAME= nome) e contém as zonas clicáveis declaradas graças a tag AREA.


TagAtributoValorEfeito Visual
MAPNAME
AREASHAPERECT


CIRCLE



POLY		Retângulo (as suas coordenadas são: abcissa superior esquerda, ordenada superior esquerda, abcissa inferior direita, ordenada inferior direita).
Círculo (as suas coordenadas são: abcissa centro, ordenada centro, raio).
Abcissa é coordenada horizontal de um referencial plano de coordenadas cartesianas
Polígono (as suas coordenadas são: a sequência das coordenadas separadas por vírgulas).
HREFURLLinks para URL.
COORDS"XX,XX,XX,XX"Contém as coordenadas da zona clicável, separadas por vírgulas.


Veja abaixo um exemplo de uma imagem reativa: 

<IMG SRC="imagens/imagem.gif" 
 WIDTH=150 
 HEIGHT=70 
 USEMAP="#Map"> 
<MAP NAME="Map"> 
 <AREA SHAPE="rect" 
     HREF="debut.html" 
     COORDS="0,0,48,28"> 

 <AREA SHAPE="circle" 
     HREF="previous.html" 
     COORDS="50,30,10"> 

<AREA SHAPE="poly" 
     HREF="seguinte.html" 
     COORDS="60,50,80,30,100,40,50,100"> 
</MAP>

Veja também

Este documento, intitulado 'Gestão das imagens em HTML', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.
Managing images in HTML Managing images in HTML Administración de imágenes en HTML Administración de imágenes en HTML Images en HTML Images en HTML Gestione delle immagini in HTML Gestione delle immagini in HTML API API