Gestão das imagens em HTML

Novembro 2017

Exibição de imagens na página web

Algumas imagens num site Web podem torná-lo mais atrativo e mais amigável. Embora, seja bom não exagerar, porque as imagens podem implicar um tempo de carregamento bastante longo e podem em certos casos prejudicar a sua 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 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 um tempo de carregamento menor);


As imagens PNG: a sua dimensão é fraca no caso de imagens com poucas cores ou com tons uniformes. Este formato permite, além disso, ter imagens entrelaçadas (que se exibem 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 inserir e manipular imagens na 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 exibe, TITLE: permite exibir uma bolha informativa quando passa pela imagem imagem com o cursor, WIDTH: permite especificar a amplitude da imagem e HEIGHT: permite especificar a altura da imagem. Assim, para inserir uma imagem, será necessário introduzir uma baliza do tipo:

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

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
ALTTexto alternativo no caso de a imagem não aparecer
BORDERNúmero inteiroNúmeros pixels da borda. A cor da borda pode ser definida pelo atributo LINK ou TEXT da baliza <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 precisa uma dimensão diferente da dimensão original do gráfico, o navegador redimensiona-o dinamicamente, o que pode provocar uma exibição de pior qualidade
HSPACENúmero inteiroNúmeros pixels de ajustamento entre a imagem e o texto adjacente (horizontalmente)
Texto
LONGDESCURL da descrição da imagem.
LOWSRCURLImagem alternativa (geralmente mais pequena) mostrada durante o tempo que a verdadeira imagem leva para ser carregada pelo navegador
NAMEPermite definir um nome para a imagem. Este atributo é útil principalmente para a gestão das imagens em JavaScript
SRCURLURL da imagem
TITLETexto alternativo no caso de a imagem não aparecer
USEMAPURL ou nome da âncora que define a imagem recativa
VSPACENúmeros 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 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

Adicionar um texto na imagem

As imagens inserem-se no texto como um caractere, assim parece impossível mostrar-se texto ao longo de uma imagem. Existem várias maneiras de fazê-lo. Vamos ver duas: 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) 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.

O que são as imagens reativas - 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> indica 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
Retângulo (as suas coordenadas são: abcissa superior esquerda, ordenado 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)
HREFURL Link para o URL
COORDS"XX,XX,XX,XX"Contem as coordenadas da zona clicável, separadas por vírgulas


Eis abaixo um exemplo de imagem reativa:

<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="seguinte.html"
COORDS="60,50,80,30,100,40,50,100">
</MAP>

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
Última modificação: 3 de julho de 2017 às 16:00 por Pedro.CCM.
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.