Tag HTML <img>

A tag <img> é usada para inserir uma imagem em um documento HTML. A imagem em si não é inserida diretamente no documento; o navegador exibe uma imagem HTML a partir da fonte especificada na tag <img>.

Há dois atributos obrigatórios para um elemento <img>: src, que indica a fonte da imagem, e alt, que define um texto alternativo para a imagem.

Para tornar imagens HTML clicáveis, coloque a tag <img> dentro da tag <a>, que é usada para inserir um link de imagem HTML.

Sintaxe

A tag <img> é vazia, o que significa que a tag de fechamento não é necessária. Ela contém apenas atributos. Porém, em XHTML, a tag <img> deve ser auto-fechada (<img />).

Exemplo da tag HTML `<img>`:

Um exemplo de como usar a tag HTML <img>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Experimente Você Mesmo »

Podemos usar CSS para alterar a aparência inicial de uma imagem.

Exemplo da tag `<img>` estilizada com CSS:

Como estilizar a tag HTML <img> usando as propriedades CSS vertical-align e padding?

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      border-radius: 50%;
      border: 4px dashed #077cb9;
      width: 300px;
      display: block;
      margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div>
     <img src="/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256" />
    </div>
  </body>
</html>

Experimente Você Mesmo »

Atributos Src e Alt

O atributo src (source) indica a fonte da imagem. Ele é obrigatório, pois define o caminho para a imagem. O valor do atributo src pode ser o nome do arquivo ou sua URL.

O atributo alt define um nome alternativo para a imagem. Ele também é obrigatório para a tag <img>. Seu valor é um texto descritivo exibido no navegador antes de a imagem ser carregada ou caso ela não consiga ser carregada.

Imagens decorativas vs. imagens significativas

Se alt deve ter texto depende da finalidade da imagem:

Imagens significativas (foto de produto, gráfico, logotipo que transmite informação) precisam de um alt curto e descritivo que comunique a mesma informação que a imagem transmite. Descreva o que ela mostra, não "imagem de".
Imagens decorativas (bordas, espaçadores, elementos visuais que nada acrescentam ao conteúdo) devem usar um alt="" vazio. Isso instrui os leitores de tela a ignorar a imagem. Não omita o atributo alt por completo — um alt ausente faz com que alguns leitores de tela anunciem o nome do arquivo.

<!-- Meaningful: describe the content -->
<img src="ararat.jpg" alt="Snow-capped Mount Ararat at sunrise" />

<!-- Decorative: empty alt so assistive tech skips it -->
<img src="divider.png" alt="" />

Dica

Para imagens significativas, inclua palavras-chave relevantes no texto alternativo onde se encaixem naturalmente. Um texto alt preciso beneficia tanto a acessibilidade quanto o posicionamento da imagem nos mecanismos de busca.

Usando "data:image/[type];base64,[base64-string]" para o atributo src

O formato data:image/[type];base64,[base64-string] pode ser usado como valor do atributo src de uma tag img para exibir uma imagem diretamente do código HTML, sem precisar carregá-la de um arquivo externo.

Veja um exemplo de como usar esse formato para exibir uma imagem em uma tag img:

Usando "data:image/[type];base64,[base64-string]" para o atributo src

<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
  alt="Tiny base64-encoded sample image"
  width="5"
  height="5">

Neste exemplo, image/png especifica o tipo MIME da imagem, e a longa string após base64, é o dado real da imagem codificado em base64. A string acima é uma PNG 5×5 completa (embora pequena).

Observe que o uso de imagens codificadas em base64 pode aumentar o tamanho do arquivo HTML e retardar o carregamento da página. Em geral, recomenda-se usar esse formato para imagens ou ícones pequenos, e arquivos externos para imagens maiores.

Exemplo da tag HTML `<img>` com os atributos src e alt:

Um exemplo da tag img com os atributos src e alt

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
  </body>
</html>

Experimente Você Mesmo »

Por que definir width e height

Sempre defina os atributos width e height (em pixels, sem unidades) para corresponder ao tamanho intrínseco da imagem. Isso permite que o navegador calcule a proporção da imagem e reserve o espaço correto antes que o arquivo termine de ser baixado. Sem esses atributos, a página é renderizada primeiro sem espaço para a imagem e depois salta quando ela chega — uma experiência ruim que prejudica o Cumulative Layout Shift (CLS), uma das Core Web Vitals do Google.

<!-- Browser reserves a 4:3 box immediately, so no layout shift -->
<img src="photo.jpg" alt="Mountain view" width="800" height="600">

Você ainda pode redimensionar a imagem com CSS. Um padrão comum e seguro é definir os atributos width e height para a proporção e depois deixar o CSS torná-la fluida:

img {
  height: auto;   /* preserve aspect ratio */
  max-width: 100%; /* never overflow its container */
}

Os atributos loading e decoding

O atributo loading adia o carregamento de imagens (e iframes) até que o recurso esteja próximo de ser exibido. É um recurso padrão suportado por todos os navegadores modernos.

Valores suportados para o atributo loading:

lazy — adia o carregamento até que a imagem alcance um limite de distância do viewport. Use para imagens fora da tela / abaixo da dobra.
eager (o padrão) — carrega o recurso imediatamente.

<img src="defer.png" loading="lazy" alt="Gallery thumbnail" width="500" height="400">

Aviso

Não aplique lazy loading à sua imagem mais importante acima da dobra (frequentemente o elemento Largest Contentful Paint, ou LCP). O lazy loading atrasa sua requisição e torna a página mais lenta. Para essa imagem, use loading="eager" ou simplesmente omita o atributo.

O atributo relacionado decoding indica ao navegador como deve decodificar a imagem. decoding="async" permite que o navegador decodifique a imagem fora da thread principal, sem bloquear a renderização do conteúdo ao redor:

<img src="photo.jpg" alt="Landscape" width="800" height="600"
     loading="lazy" decoding="async">

O lazy loading adia o carregamento de recursos até que sejam necessários, em vez de carregar tudo antecipadamente. Isso melhora o desempenho e reduz o consumo desnecessário de dados no dispositivo do usuário.

Imagens responsivas com srcset e sizes

Uma única imagem de tamanho fixo ou desperdiça largura de banda em telas pequenas ou parece borrada em telas grandes. Os atributos srcset e sizes permitem que o navegador escolha o melhor arquivo para o tamanho de tela e a densidade de pixels do dispositivo, enquanto você mantém um único elemento <img>.

srcset lista os arquivos de imagem candidatos, cada um marcado com um descritor de largura (a largura real da imagem em pixels, ex.: 480w).
sizes informa ao navegador qual será a largura de exibição da imagem em diferentes breakpoints, para que ele possa escolher antes de o layout ser calculado.

<img
  src="photo-800.jpg"
  srcset="photo-480.jpg 480w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1000px) 50vw,
         800px"
  alt="Coastline at sunset"
  width="800" height="600">

Aqui o navegador lê sizes, calcula quantos pixels CSS a imagem precisa, multiplica pela proporção de pixels do dispositivo e baixa a correspondência mais próxima do srcset. O src simples permanece como fallback para navegadores que não suportam srcset.

Quando você precisa servir recortes diferentes para layouts diferentes (direcionamento de arte) ou oferecer formatos modernos com fallback (como AVIF/WebP com backup em JPEG), use o elemento <picture>.

Formatos de Imagem Suportados

Os formatos de arquivo de imagem são meios padronizados de organizar e armazenar imagens digitais. Um formato de arquivo de imagem pode armazenar dados em formato não comprimido, em formato comprimido (que pode ser com ou sem perdas) ou em formato vetorial. (Wikipedia).

Cada agente de usuário suporta diferentes formatos de imagem. Veja a lista dos formatos de imagem comuns:

Abreviação	Formato de arquivo	Tipo MIME	Extensão(ões) de arquivo	Compatibilidade com navegadores
APNG	Animated Portable Network Graphics	image/apng	.apng	Chrome, Edge, Firefox, Opera, Safari
AVIF	AV1 Image File Format	image/avif	.avif	Chrome 85+, Firefox 93+, Safari 16+, Opera
GIF	Graphics Interchange Format	image/gif	.gif	Chrome, Edge, Firefox, Opera, Safari
ICO	Microsoft Icon	image/x-icon	.ico, .cur	Chrome, Edge, Firefox, Opera, Safari
JPEG	Joint Photographic Expert Group image	image/jpeg	.jpg, .jpeg, .jfif, .pjpeg, .pjp	Chrome, Edge, Firefox, Opera, Safari
PNG	Portable Network Graphics	image/png	.png	Chrome, Edge, Firefox, Opera, Safari
SVG	Scalable Vector Graphics	image/svg+xml	.svg	Chrome, Edge, Firefox, Opera, Safari
WebP	Web Picture format	image/webp	.webp	Chrome, Edge, Firefox, Opera, Safari 14+

JPEG e PNG são universalmente suportados e continuam sendo as opções mais seguras. WebP e AVIF são formatos modernos que produzem arquivos notavelmente menores com qualidade similar — AVIF geralmente comprime melhor, WebP tem o suporte mais amplo. Como alguns navegadores mais antigos ainda não suportam AVIF, sirva esses formatos por meio do elemento <picture> com um fallback em JPEG ou PNG, em vez de colocá-los diretamente em <img src>.

Erros de Carregamento de Imagem

Podem ocorrer erros durante o carregamento de uma imagem. Se um manipulador de evento onerror tiver sido definido para o evento de erro, esse manipulador será chamado. Veja as situações em que isso pode acontecer:

O atributo src está vazio ("") ou é null.
A URL do src e a URL da página em que o usuário se encontra são iguais.
Alguma corrupção da imagem impede que ela seja carregada.
Os metadados da imagem estão corrompidos de forma a tornar impossível recuperar suas dimensões, e nenhuma dimensão está especificada nos atributos da tag <img>.
O formato não é suportado pelo agente de usuário.

Você pode ouvir esse evento error com o atributo onerror e substituir por uma imagem de fallback, para que os usuários vejam um placeholder em vez de um ícone de imagem quebrada:

<img
  src="profile.jpg"
  alt="User profile photo"
  width="200" height="200"
  onerror="this.onerror=null; this.src='fallback.png';">

Definir this.onerror=null primeiro é importante: remove o manipulador antes de alterar src, para que, se a imagem de fallback também falhar ao carregar, o manipulador não seja acionado novamente e não cause um loop infinito.

Atributos

Estes são os atributos atuais e padrões do elemento <img>. Os atributos obsoletos estão listados separadamente abaixo.

Atributo	Valor	Descrição
alt	texto	Define o texto alternativo para a imagem. Use `alt=""` para imagens puramente decorativas.
crossorigin	`anonymous` \| `use-credentials`	Define se CORS é usado ao carregar a imagem. Imagens carregadas via CORS podem ser usadas no elemento `<canvas>` sem limitar sua funcionalidade.
decoding	`sync` \| `async` \| `auto`	Indica ao navegador como deve decodificar a imagem. `async` decodifica fora da thread principal.
height	pixels	Define a altura da imagem. Defina junto com `width` para reservar espaço e evitar mudança de layout.
ismap	ismap	Especifica que o conteúdo da tag é um mapa de imagem do lado do servidor.
loading	`eager` \| `lazy`	Controla se a imagem é carregada imediatamente ou adiada até próxima ao viewport.
sizes	condições de mídia + comprimentos	Informa ao navegador a largura de exibição da imagem por breakpoint, usado junto com `srcset`.
src	URL	Define a fonte da imagem.
srcset	URL + descritores	Uma lista separada por vírgulas de imagens candidatas e seus descritores de largura (`w`) ou densidade (`x`).
usemap	#mapname	Especifica um link para o elemento `<map>`, que contém as coordenadas para o mapa de imagem do lado do cliente.
width	pixels	Define a largura da imagem. Defina junto com `height` para reservar espaço e evitar mudança de layout.

A tag <img> também suporta os Atributos Globais e os Atributos de Evento.

Atributos Obsoletos

Esses atributos são obsoletos no HTML5. Use as alternativas CSS.

Atributo	Valores	Descrição	Alternativa
align	left right top bottom middle	Define o alinhamento da imagem em relação aos elementos ao redor. Centraliza a imagem HTML em relação aos elementos ao redor.	As propriedades CSS float e/ou vertical-align.
border	pixels	Define a largura da borda ao redor da imagem.	A propriedade CSS border.
hspace			A propriedade CSS margin.
name		Especifica um nome para o elemento.	O atributo id.
vspace	pixels	Define espaços no topo e na parte inferior da imagem.	Use a propriedade CSS margin.

Prática

Qual é a forma correta de marcar uma imagem puramente decorativa para que os leitores de tela a ignorem?

Dar a ela um atributo alt vazio: alt='' .Omitir o atributo alt completamente.Definir alt com o nome do arquivo de imagem.Usar o atributo title em vez de alt.

Sintaxe

Exemplo da tag HTML <img>:

Exemplo da tag <img> estilizada com CSS:

Atributos Src e Alt

Imagens decorativas vs. imagens significativas

Usando "data:image/[type];base64,[base64-string]" para o atributo src

Exemplo da tag HTML <img> com os atributos src e alt:

Por que definir width e height

Os atributos loading e decoding

Imagens responsivas com srcset e sizes

Formatos de Imagem Suportados

Erros de Carregamento de Imagem

Atributos

Atributos Obsoletos

Prática

Exemplo da tag HTML `<img>`:

Exemplo da tag `<img>` estilizada com CSS:

Exemplo da tag HTML `<img>` com os atributos src e alt: