Tag img

A tag img cria uma imagem. O caminho para a imagem é especificado no atributo src. Não requer tag de fechamento.

Atributos

Atributo	Descrição
src	Define o caminho para a imagem. Atributo obrigatório.
alt	Texto alternativo que será exibido no lugar da imagem, se ela não for encontrada (por exemplo, se o caminho para ela estiver incorreto). Atributo obrigatório. Na sua ausência, o validador (programa que verifica a correção do HTML ou CSS) irá reclamar.
width	Largura da imagem, em pixels (neste caso, as unidades de medida não são especificadas) ou em percentual do elemento pai da imagem.
height	Altura da imagem, em pixels (neste caso, as unidades de medida não são especificadas) ou em percentual do elemento pai da imagem.

Nuances

Se nem a largura nem a altura forem definidas para uma imagem - a imagem terá seu tamanho real. Se a altura for definida - a imagem terá a altura especificada, e a largura se ajustará para que suas proporções não sejam distorcidas.

Se apenas a largura for definida - similarmente, a imagem se ajustará na altura para manter as proporções.

Se both largura e altura forem definidas - as proporções da imagem podem ser distorcidas (ou não, dependendo do caso). Se a largura ou a altura (ou ambas) forem maiores que a real - a imagem aumentará, mas perderá qualidade.

Recomenda-se definir a largura e a altura das imagens nos atributos (e não via CSS) - neste caso, o navegador carregará as imagens mais rapidamente - ele não precisa calcular o tamanho de cada imagem após obtê-la.

Não é recomendado reduzir os tamanhos reais da imagem sem necessidade. Por exemplo, o tamanho real da imagem é 1000 por 1000 pixels, e você define uma largura de 100px. Neste caso, a imagem na tela parecerá ter 100 pixels, mas terá o tamanho de mil pixels inteiros e, consequentemente, carregará muito mais lentamente.

Exemplo

Vamos adicionar uma imagem ao site e não definir os atributos height e width. A imagem terá seu tamanho real:

:

Exemplo

Vamos tentar adicionar largura à imagem usando o atributo width; a altura deve se ajustar para manter as proporções da imagem:

:

Exemplo

E agora vamos adicionar altura à imagem usando o atributo height; a largura se ajustará para manter as proporções da imagem:

:

Exemplo

Vamos adicionar both altura e largura à imagem simultaneamente. As proporções da imagem devem ficar distorcidas (não necessariamente, mas neste caso a altura e a largura foram escolhidas para distorcer as proporções):

:

Exemplo

Vamos definir um caminho incorreto para a imagem (por simplicidade, vamos deixá-lo vazio). No lugar da imagem, veremos o conteúdo do atributo alt (parece texto comum - mas tente copiá-lo - você não conseguirá, ele se comportará como uma imagem):

:

Veja também