Inserindo imagens com a tag img: src e alt

Imagens são um dos elementos mais presentes em qualquer página web — de fotos de produtos a ícones de interface, de ilustrações em artigos a avatares de perfil. A tag responsável por todas elas é a <img>, e entender seus atributos com profundidade é essencial para qualquer desenvolvedor front-end.

A tag img: uma tag void

<img src="foto.jpg" alt="Descrição da imagem">

A tag <img> é uma tag void — assim como <br> e <hr>, ela não tem conteúdo nem tag de fechamento. Ela é substituída diretamente pela imagem que referencia.

Dois atributos são fundamentais e devem sempre estar presentes:

• src → define o caminho da imagem (source = fonte)
• alt → define o texto alternativo (alternative text)

O atributo src: de onde vem a imagem

O src define o endereço da imagem — que pode ser um caminho relativo, absoluto ou uma URL externa.

Caminho relativo

Aponta para uma imagem dentro do próprio projeto:

meu-projeto/
├── index.html
├── sobre.html
└── imagens/
    ├── foto-perfil.jpg
    └── logo.png

<!-- Estando em index.html -->

<!-- ✅ Imagem na mesma pasta -->
<img src="banner.jpg" alt="Banner principal">

<!-- ✅ Imagem em subpasta -->
<img src="imagens/foto-perfil.jpg" alt="Foto de perfil">

<!-- ✅ Subindo um nível de pasta -->
<img src="../imagens/logo.png" alt="Logotipo da empresa">

Caminho absoluto com URL

Aponta para uma imagem hospedada em outro servidor:

<!-- Imagem de outro domínio -->
<img
  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png"
  alt="Logotipo oficial do HTML5"
>

⚠️ Cuidado ao usar imagens de outros servidores: a imagem pode ser removida ou alterada sem aviso, o site pode bloquear requisições externas (hotlinking), e você pode estar infringindo direitos autorais. Sempre que possível, hospede as imagens no seu próprio servidor.

O atributo alt: muito mais que uma descrição

O atributo alt é um dos mais importantes e mal compreendidos do HTML. Ele define o texto alternativo que é exibido ou lido quando a imagem não está disponível ou quando o usuário usa um leitor de tela.

Quando a imagem não carrega

Se a imagem não for encontrada ou falhar ao carregar, o navegador exibe o texto do alt no lugar dela — informando ao usuário o que deveria estar ali:

<img src="foto-que-nao-existe.jpg" alt="Foto do produto em uso">
<!-- Exibe: [Foto do produto em uso] -->

Para leitores de tela

Usuários com deficiência visual usam softwares que leem o conteúdo da página em voz alta. Quando encontram uma <img>, leem o texto do alt — é a única forma de comunicar o conteúdo visual para esses usuários.

Para mecanismos de busca

O Google e outros buscadores não enxergam imagens — eles analisam/interpretam o alt para indexar a imagem corretamente nas buscas.

Como escrever um bom alt

A qualidade do texto alt depende do contexto e da função da imagem na página. Não existe uma regra única — mas existem princípios claros:

Imagens informativas: descreva o conteúdo relevante

<!-- ✅ Descreve o que a imagem comunica -->
<img
  src="grafico-vendas.png"
  alt="Gráfico de barras mostrando crescimento de 40% nas vendas do terceiro trimestre de 2026"
>

<!-- ✅ Foto de produto -->
<img
  src="tenis-azul.jpg"
  alt="Tênis esportivo azul com solado branco, modelo AirRun Pro"
>

<!-- ✅ Foto de pessoa em contexto profissional -->
<img
  src="ana-souza.jpg"
  alt="Ana Souza, diretora de tecnologia, sorrindo em frente a um computador"
>

Imagens funcionais: descreva a ação, não a aparência

Quando uma imagem tem uma função — como um botão ou um link —, o alt deve descrever o que o elemento faz, não como ele parece:

<!-- ✅ Logo clicável que leva à página inicial -->
<a href="/">
  <img src="logo.png" alt="Ir para a página inicial — Logo da Empresa">
</a>

<!-- ✅ Ícone de botão com função -->
<button>
  <img src="icone-busca.svg" alt="Buscar">
</button>

<!-- ✅ Ícone de ação em uma lista -->
<img src="icone-excluir.svg" alt="Excluir item">

Imagens decorativas: alt vazio

Quando uma imagem é puramente decorativa — não adiciona nenhuma informação ao conteúdo, existe apenas por razões estéticas —, o alt deve ser uma string vazia "":

<!-- ✅ Separador decorativo -->
<img src="divisor-ondas.svg" alt="">

<!-- ✅ Padrão de fundo decorativo -->
<img src="textura-fundo.png" alt="">

<!-- ✅ Ícone puramente estético sem função -->
<img src="estrela-decorativa.svg" alt="">

💡 alt="" — com aspas vazias — é muito diferente de omitir o alt. Com alt="", o leitor de tela ignora a imagem completamente — o comportamento correto para decoração. Sem alt, o leitor de tela lê o nome do arquivo — como "estrela-decorativa-svg" —, o que polui a experiência de leitura com informação irrelevante.

O que NÃO fazer no alt

<!-- ❌ Começar com "imagem de" ou "foto de" —
     o leitor de tela já anuncia que é uma imagem -->
<img src="cachorro.jpg" alt="Imagem de um cachorro">

<!-- ❌ Repetir o texto que já está ao lado da imagem -->
<img src="icone-email.svg" alt="E-mail">
<span>E-mail</span>

<!-- ❌ Usar o nome do arquivo como alt -->
<img src="img_0042_final_v3.jpg" alt="img_0042_final_v3">

<!-- ❌ Alt genérico que não descreve o conteúdo -->
<img src="grafico.png" alt="imagem">

<!-- ❌ Omitir o alt completamente -->
<img src="produto.jpg">

Dimensões: width e height

Os atributos width e height definem as dimensões da imagem em pixels:

<img
  src="foto.jpg"
  alt="Descrição da foto"
  width="800"
  height="600"
>

Por que informar width e height?

Esses atributos não são obrigatórios, mas têm um impacto real na experiência do usuário chamado de layout shift — o "pulo" que acontece na página quando uma imagem carrega e empurra o conteúdo abaixo.

Quando o navegador conhece as dimensões antecipadamente, ele reserva o espaço na página antes mesmo de carregar a imagem, evitando esse deslocamento indesejado.

💡 Os valores de width e height no HTML devem corresponder às dimensões reais da imagem — não ao tamanho em que você quer exibi-la. O tamanho de exibição deve ser controlado com CSS. Isso permite que o navegador calcule corretamente a proporção da imagem (aspect ratio) mesmo que o CSS altere as dimensões.

Formatos de imagem na web

Escolher o formato certo é tão importante quanto escrever o alt correto:

<!-- Fotografia: JPEG -->
<img src="paisagem.jpg" alt="Vista aérea da cidade de São Paulo ao entardecer">

<!-- Logo com transparência: PNG ou SVG -->
<img src="logo.svg" alt="Logo da empresa">

<!-- Ícone inline: SVG ou PNG -->
<img src="icone-config.svg" alt="Configurações">

Exemplos práticos completos

Imagem em um artigo

<article>
  <h1>Como o HTML funciona</h1>

  <img
    src="imagens/diagrama-html.png"
    alt="Diagrama mostrando a relação entre HTML, CSS e JavaScript: HTML define a estrutura, CSS a aparência e JavaScript o comportamento"
    width="800"
    height="450"
  >

  <p>O HTML é a base de toda página web...</p>
</article>

Logo clicável

<header>
  <a href="/">
    <img
      src="imagens/logo.svg"
      alt="Semeando Devs — Ir para a página inicial"
      width="160"
      height="48"
    >
  </a>
</header>

Galeria de produtos

<section>
  <h2>Nossos produtos</h2>

  <div>
    <img
      src="imagens/produto-1.jpg"
      alt="Cadeira ergonômica preta com apoio lombar ajustável"
      width="400"
      height="400"
    >
    <p>Cadeira Ergonômica Pro</p>
    <p>R$ 899,00</p>
  </div>

  <div>
    <img
      src="imagens/produto-2.jpg"
      alt="Mesa de escritório em madeira clara com 160cm de comprimento"
      width="400"
      height="400"
    >
    <p>Mesa Home Office</p>
    <p>R$ 1.299,00</p>
  </div>

</section>

Imagem decorativa

<header>
  <!-- Imagem de banner decorativo sem informação adicional -->
  <img src="banner-decorativo.jpg" alt="" width="1200" height="200">
  <h1>Bem-vindo ao nosso site</h1>
</header>

Checklist do img perfeito

Antes de publicar qualquer <img>, verifique:

• O src aponta para o arquivo correto e o caminho está certo
• O alt está presente em todas as imagens
• O alt descreve o conteúdo e função da imagem — não começa com "imagem de" ou "foto de"
• Imagens decorativas têm alt=""
• width e height estão definidos com as dimensões reais da imagem
• O formato da imagem é adequado ao tipo de conteúdo
• A imagem está hospedada no próprio servidor (quando possível)

Resumindo

Regras de ouro:

• Nunca omita o alt
• Use alt="" para imagens decorativas
• Defina width e height com as dimensões reais
• Descreva a função em imagens clicáveis, não a aparência
• Não comece o alt com "imagem de" ou "foto de"