Etiqueta <img> do HTML

Definição e uso

<img> A tag é usada para embedding de imagens em páginas HTML.

Tecnicamente, na verdade não inserimos a imagem na página da web, mas linkamos a imagem ao site.<img> A tag cria um contêiner para referenciar a imagem.

<img> A tag tem dois atributos necessários:

  • src - Defina o caminho da imagem
  • alt - Se a imagem não puder ser exibida por algum motivo, especifique o texto alternativo da imagem

Atenção:Além disso, sempre especifique a largura e a altura da imagem. Se não especificar a largura e a altura, a página pode piscar ao carregar a imagem.

Dica:Para linking a imagem a outro documento, basta usar <img> A tag está aninhada em <a> Dentro da tag (veja o exemplo abaixo).

Veja também:

Tutorial de HTML:Imagem HTML

Manual de referência do DOM HTML:Objeto Image

Tutorial de CSS:Configurar o estilo da imagem

Leia mais:Como usar corretamente a imagem

Exemplo

Exemplo 1

Nos exemplos a seguir, inserimos uma foto de tulipas tirada pelo engenheiro da CodeW3C.com no Porto Maravilhoso:

<img src="tulip.jpg" alt="Porto Maravilhoso - Tulipa" />

Experimente você mesmo

Porto de flores de Xangai - Tulipa

Exemplo 2

Outro exemplo de como inserir uma imagem:

<img src="dancer.png" alt="Dançarino" width="500" height="749">

Experimente você mesmo

Dica:Mais exemplos no rodapé da página.

Atributo

Atributo Valor Descrição
alt Texto Define o texto alternativo da imagem.
crossorigin
  • anonymous
  • use-credentials
 Permite usar imagens de sites de terceiros que permitem acesso cruzado de domínio juntamente com o canvas (canvas).
height pixels Define a altura da imagem.
ismap ismap Define a imagem como um mapeamento de imagem do lado do servidor.
loading
  • eager
  • lazy
 Especifica se o navegador deve carregar imediatamente a imagem ou a adiar até que sejam atendidas algumas condições.
longdesc URL Define a URL que aponta para a descrição detalhada da imagem.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Define as informações de referência a serem usadas ao obter a imagem.
sizes Tamanho Define o tamanho da imagem para diferentes layouts de página.
src URL Define o caminho da imagem.
srcset URL-list Define a lista de arquivos de imagem a serem usados em diferentes situações.
usemap #mapname Define a imagem como um mapa de imagem do cliente.
width pixels Define a largura da imagem.

Atributos globais

<img> Os tags também suportam Atributos globais no HTML。

Atributos de evento

<img> Os tags também suportam Atributos de evento no HTML。

Mais exemplos

Exemplo 3

Alinhar a imagem (usando CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Experimente você mesmo

Exemplo 4

Adicionar borda à imagem (usando CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Experimente você mesmo

Exemplo 5

Adicionar margem esquerda e direita à imagem (usando CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Experimente você mesmo

Exemplo 6

Adicionar margem superior, inferior e externa à imagem (usando CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Experimente você mesmo

Exemplo 7

Como inserir uma imagem de outro diretório ou de outro site:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

Experimente você mesmo

Exemplo 8

Como adicionar hiperligações a imagens:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Experimente você mesmo

Exemplo 9

Como criar um mapa de imagem com áreas clicáveis. Cada área é um link de hiperligação:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Experimente você mesmo

Leitura adicional - Como usar corretamente imagens

Uma das características mais notáveis do HTML e do XHTML é a capacidade de incluir imagens no texto do documento, seja como objeto interno do documento (imagem em linha) ou como um documento separado que pode ser baixado por meio de um link de hiperligação ou como pano de fundo do documento.

Incluir imagens de maneira razoável no conteúdo do documento (ícones, fotos, legendas, pinturas, etc., estáticos ou animados) tornará o documento mais vívido e atraente, mais profissional em aparência e mais informativo e fácil de navegar. Também é possível tornar uma imagem um guia visual para um link de hiperligação.

No entanto, se usar imagens em excesso, o documento se tornará fragmentado, confuso e impossível de ler, aumentando ainda mais o tempo de espera para os usuários baixarem e visualizarem a página.

Leia o artigo a seguir para aprender sobre os dois principais formatos de imagens na Web: GIF e JPEG, e como usá-las corretamente:

Configurações CSS padrão

A maioria dos navegadores exibirá os seguintes valores padrão <img> Elemento:

img {
  display: inline-block;
}

Experimente você mesmo

Suporte a navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte