Gestão das imagens em HTML

Maio 2015

Como exibir imagens numa página web?

Algumas imagens num site Web podem torná-lo mais atractivo e mais convivial. Não obstante, é importante não exagerar, porque as imagens podem implicar um tempo de carregamento bastante longo e podem em certos casos prejudicar a legibilidade.

A baliza IMG da linguagem HTML permite inserir imagens numa página HTML. A imagem pode estar situada no mesmo servidor que a página na qual é inserida mas igualmente num outro servidor especificando a sua URL completa.

Só os seguintes formatos de imagens são aceites em standard nas especificações do W3C:

  • 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 um tempo de carregamento menor)
  • As imagens PNG : A sua dimensão é fraca no caso de imagens com poucas cores ou com toms uniformes. Este formato permite, além disso, ter imagens entrelaçadas (que se afixam progressivamente) com uma profundidade de cores de 24 bits e imagens nas quais 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 exibir imagens numa 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, ao meio e debaixo)
  • ALT : Permite afixar um texto alternativo quando a imagem não se afixa.
  • TITLE : Permite afixar uma bolha informativa aquando passa pela imagem imagem com o cursor.
  • WIDTH : Permite especificar a amplitude da imagem.
  • HEIGHT : Permite especificar a altura da imagem.



Assim, para inserir uma imagem, será necessário introduzir uma baliza do tipo:

<IMG SRC="url_de_l_image" 
 ALT="Texto que substitui a imagem" 
 TITLE="Texto a afixar">




AtributoValorResultadoEfeito Visual
ALIGNbottom
center
left
middle
top
right
Alinhamento da imagem.  
ALT Texto alternativo no caso de a imagem não aparecer. 
BORDERNúmero inteiroNúmeros pixéis da cercadura. A cor da cercadura pode ser definida pelo atributo LINK ou TEXT da baliza <BODY>. Por defeito, o atributo BORDER vale 1, o que cria um pequeno quadro em redor da imagem. Para evitar isto, lembre-se de o definir como igual a 0.
HEIGHTNúmero inteiroAltura da imagem (em pixéis ou %). Quando este atributo precisa uma dimensão diferente da dimensão original do gráfico, o navegador redimensiona-o dinamicamente, o que pode provocar uma afixação de pior qualidade.
HSPACENúmero inteiroNúmeros pixéis de ajustamento entre a imagem e o texto adjacente (horizontalmente).
Texto
LONGDESC URL da descrição da imagem. 
LOWSRCURLImagem alternativa (geralmente mais pequena) mostrada durante o tempo que a verdadeira imagem levar a ser carregada pelo navegador.
NAME Permite definir um nome para a imagem. Este atributo é útil nomeadamente para a gestão das imagens em JavaScript. 
SRCURLURL da imagem 
TITLE Texto alternativo no caso de a imagem não aparecer. 
USEMAP URL ou nome da âncora que define a imagem recativa. 
VSPACE Números pixéis de ajustamento entre a imagem e o texto (verticalmente).Ensaio de texto
WIDTHNúmero inteiroAmplitude da imagem (em pixéis ou %). Quando este atributo precisa uma dimensão diferente da dimensão original do gráfico, o navegador redimensiona-o dinamicamente, o que pode provocar uma afixação de pior qualidade.

Texto envolvendo uma imagem

As imagens inserem-se no texto como um carácter, assim parece impossível mostrar-se texto ao longo de uma imagem.

Existem com efeito várias maneiras de o fazer. Vamos ver duas :

  • A primeira consiste em criar um quadro com uma linha e duas colunas, nas quais se põe a imagem e o texto.
  • A segunda (menos precisao) consiste em alinhar a imagem à esquerda ou à direita com o atributo ALIGN e seguidamente introduzir o seu texto. Para parar este envolvimento, basta usar o atributo CLEAR.

As imagens reactivas (“imagens MAP”)

É possível criar zonas clicáveis mesmo dentro de uma imagem graças ao atributo USEMAP, utilizado conjuntamente com a baliza MAP.
O atributo USEMAP da baliza <IMG> aponta para uma baliza <MAP> que contém a descrição do corte da imagem em zonas clicáveis.


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


BalizaAtributoValorEfeito Visual
MAPNAME  
AREASHAPERECT

 

CIRCLE

 

POLY

Rectângulo (as suas coordenadas são: “abcissa sup esquerdo, ordenado sup esquerdo,abcissa inf direito, ordenada inf direito ")

Círculo (as suas coordenadas são : “abcissa centro, ordenada centro, raio”)

Polígono (as suas coordenadas são: “a sequência das coordenadas separadas por vírgulas ")

HREFURL Relação para o URL
COORDS"XX,XX,XX,XX"Contem as côordenadas da zona cliquable, separadas por vírgulas.


Eis abaixo um exemplo de imagem reactiva :

<IMG SRC="images/image.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="precedent.html" 
     COORDS="50,30,10"> 

 <AREA SHAPE="poly" 
     HREF="suivant.html" 
     COORDS="60,50,80,30,100,40,50,100"> 
</MAP>
Para uma leitura offline, é possível baixar gratuitamente este artigo no formato PDF:
Gestao-das-imagens-em-html .pdf

A ver igualmente


Managing images in HTML
Managing images in HTML
Administración de imágenes en HTML
Administración de imágenes en HTML
Verwaltung der Bilder unter HTML
Verwaltung der Bilder unter HTML
Images en HTML
Images en HTML
Gestione delle immagini in HTML
Gestione delle immagini in HTML
Este documento, intitulado « Gestão das imagens em HTML »a partir de Kioskea (pt.kioskea.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.