Imagem Destaque
Criado em

Imagens e Mídia no HTML

Imagens, vídeos, áudios e conteúdos incorporados fazem parte da maioria dos projetos modernos.
Neste post, você vai entender como usar os principais elementos de mídia do HTML com mais clareza, qualidade semântica, acessibilidade e performance.

O que são elementos de mídia no HTML?

Os elementos de mídia são as tags usadas para inserir, organizar, descrever e controlar conteúdos visuais e sonoros dentro de uma página.

Entre os principais, estão:

Esses elementos não servem apenas para “mostrar arquivos”.
Eles ajudam a definir:

Por que a mídia no HTML merece atenção especial?

Mídia costuma impactar diretamente várias áreas do projeto.

Experiência visual?

Imagens e vídeos costumam ser protagonistas da interface.

Performance?

Arquivos pesados podem prejudicar carregamento, responsividade e Core Web Vitals.

Acessibilidade?

Sem descrições corretas, boa parte do conteúdo pode se tornar difícil ou impossível de entender para algumas pessoas.

SEO?

Imagens e vídeos bem estruturados ajudam mecanismos de busca a entender melhor o conteúdo da página.

Conversão?

Banners, vídeos demonstrativos, imagens de produto e materiais visuais influenciam diretamente percepção de valor e decisão.

O que é a tag <img>?

A tag <img> insere uma imagem no documento HTML.

Ela é uma das tags mais usadas da web.

Exemplo básico

<img src="/images/produto.jpg" alt="Produto placeholder em fundo branco" />

O que cada parte significa?

Quando usar?

Use img para:

Por que o atributo alt é tão importante?

O atributo alt é uma das partes mais importantes do uso de imagens em HTML.

Ele serve como texto alternativo da imagem.

Para que o alt é usado?

Ele é útil em situações como:

Exemplo bom

<img
  src="/images/cadeira.jpg"
  alt="Cadeira de escritório preta com apoio de braço"
/>

Exemplo ruim

<img src="/images/cadeira.jpg" alt="imagem" />

Por que esse exemplo é ruim?

Porque não descreve o que importa.

Como escrever um bom alt?

Pense no alt como uma descrição funcional e objetiva do que a imagem comunica.

Perguntas úteis?

Boas práticas?

Exemplo contextual?

Se a imagem estiver em uma página de produto:

<img
  src="/images/tenis.jpg"
  alt="Tênis esportivo branco com detalhes em azul"
/>

Se a mesma imagem estiver em matéria sobre composição visual, talvez outra descrição faça mais sentido.

Toda imagem precisa de alt?

Na prática, quase sempre você deve pensar no alt.

Mas existem dois cenários principais.

Imagem informativa?

Precisa de alt descritivo.

<img
  src="/images/grafico.png"
  alt="Gráfico de crescimento de vendas entre janeiro e março"
/>

Imagem decorativa?

Pode usar alt="".

<img src="/images/detalhe-ornamental.svg" alt="" />

Por que alt="" em imagem decorativa?

Porque, nesse caso, a imagem não acrescenta informação relevante ao conteúdo. Assim, leitores de tela não precisam anunciar algo inútil.

Regra prática?

Quais atributos úteis existem em <img>?

Além de src e alt, alguns atributos são muito comuns.

width e height?

Ajudam o navegador a reservar espaço para a imagem e reduzem mudanças bruscas de layout.

<img
  src="/images/produto.jpg"
  alt="Produto placeholder"
  width="800"
  height="600"
/>

loading="lazy"?

Ajuda a adiar o carregamento de imagens fora da área inicial da tela.

<img src="/images/galeria-1.jpg" alt="Imagem da galeria" loading="lazy" />

decoding="async"?

Pode ajudar em alguns cenários de performance.

<img src="/images/banner.jpg" alt="Banner promocional" decoding="async" />

Regra prática?

Para muitas imagens abaixo da dobra, loading="lazy" costuma fazer sentido.

O que é a tag <picture>?

A tag <picture> permite trabalhar com múltiplas versões de uma imagem.

Ela é especialmente útil em cenários como:

Exemplo

<picture>
  <source media="(max-width: 768px)" srcset="/images/banner-mobile.webp" />
  <source media="(min-width: 769px)" srcset="/images/banner-desktop.webp" />
  <img src="/images/banner-desktop.jpg" alt="Banner principal da campanha" />
</picture>

O que isso resolve?

Permite entregar imagens diferentes conforme o contexto.

Quando usar <picture> em vez de apenas <img>?

Use picture quando você precisar de controle extra.

Casos comuns?

Exemplo de art direction?

No desktop, você pode mostrar uma imagem horizontal. No mobile, uma versão vertical mais adequada.

<picture>
  <source media="(max-width: 768px)" srcset="/images/hero-mobile.jpg" />
  <img
    src="/images/hero-desktop.jpg"
    alt="Equipe reunida em ambiente corporativo"
  />
</picture>

Regra prática?

Se a mesma imagem, com o mesmo enquadramento, já resolve, talvez img seja suficiente. Se você precisa de variações reais, picture pode ser melhor.

O que é a tag <source>?

A tag <source> define uma fonte alternativa de mídia.

Ela é usada principalmente dentro de:

Exemplo em picture

<picture>
  <source srcset="/images/imagem.webp" type="image/webp" />
  <img src="/images/imagem.jpg" alt="Imagem placeholder" />
</picture>

Exemplo em video

<video controls>
  <source src="/videos/apresentacao.mp4" type="video/mp4" />
  <source src="/videos/apresentacao.webm" type="video/webm" />
</video>

Qual é a vantagem?

O navegador pode escolher a fonte mais adequada entre as disponíveis.

O que é a tag <figure>?

A tag <figure> agrupa um conteúdo autônomo ilustrativo ou referenciável.

Ela é muito útil quando uma mídia possui significado próprio dentro do conteúdo.

O que pode existir dentro de figure?

Exemplo

<figure>
  <img src="/images/dashboard.png" alt="Painel com métricas de vendas" />
</figure>

Quando usar?

Use figure quando aquele item visual funcionar como unidade semântica própria.

O que é a tag <figcaption>?

A tag <figcaption> representa a legenda da figure.

Ela adiciona contexto ao conteúdo visual.

Exemplo

<figure>
  <img src="/images/dashboard.png" alt="Painel com métricas de vendas" />
  <figcaption>
    Painel principal com indicadores de conversão e receita.
  </figcaption>
</figure>

Quando usar?

Use quando a imagem ou mídia precisar de uma explicação, identificação ou contexto adicional.

Casos comuns?

Qual é a diferença entre alt e figcaption?

Essa diferença é muito importante.

alt?

Serve como texto alternativo da imagem.

figcaption?

Serve como legenda visível para contextualizar a figura.

Exemplo?

<figure>
  <img
    src="/images/grafico.png"
    alt="Gráfico de barras com crescimento de vendas no trimestre"
  />
  <figcaption>
    Comparação de vendas entre janeiro, fevereiro e março.
  </figcaption>
</figure>

Regra prática?

Um não substitui automaticamente o outro.

O que é a tag <audio>?

A tag <audio> incorpora áudio à página.

Exemplo básico

<audio controls>
  <source src="/audio/entrevista.mp3" type="audio/mpeg" />
  Seu navegador não suporta áudio.
</audio>

Quando usar?

Use audio para:

O que o atributo controls faz?

Ele exibe os controles nativos do navegador para reprodução, pausa, volume e navegação.

Quais cuidados tomar com <audio>?

Forneça formato compatível?

O ideal é usar formatos amplamente reconhecidos.

Use fallback textual?

Caso o navegador não suporte o elemento.

Pense em acessibilidade?

Se o áudio tem conteúdo importante, pode ser útil oferecer também transcrição ou resumo textual.

Exemplo com texto complementar?

<section>
  <h2>Entrevista em áudio</h2>

  <audio controls>
    <source src="/audio/entrevista.mp3" type="audio/mpeg" />
    Seu navegador não suporta áudio.
  </audio>

  <p>
    A entrevista aborda performance, acessibilidade e semântica em projetos
    front-end.
  </p>
</section>

O que é a tag <video>?

A tag <video> incorpora vídeo no HTML.

Exemplo básico

<video controls>
  <source src="/videos/apresentacao.mp4" type="video/mp4" />
  Seu navegador não suporta vídeo.
</video>

Quando usar?

Use video para:

Quais atributos comuns existem em <video>?

controls?

Exibe os controles nativos.

<video controls></video>

poster?

Define uma imagem de capa antes da reprodução.

<video controls poster="/images/capa-video.jpg"></video>

autoplay?

Tenta reproduzir automaticamente, mas deve ser usado com muito cuidado.

muted?

Deixa o vídeo mudo.

loop?

Reinicia automaticamente.

playsinline?

Importante em alguns contextos mobile.

Exemplo completo?

<video controls poster="/images/capa-video.jpg" width="960" height="540">
  <source src="/videos/demo.mp4" type="video/mp4" />
  Seu navegador não suporta vídeo.
</video>

Quando usar autoplay em vídeo?

Na maioria dos casos, com muito cuidado.

Por quê?

Porque autoplay pode:

Quando às vezes aparece?

Em vídeos de fundo ou elementos promocionais, normalmente combinados com:

Exemplo?

<video autoplay muted loop playsinline>
  <source src="/videos/bg.mp4" type="video/mp4" />
</video>

Regra prática?

Se o vídeo for importante como conteúdo, normalmente é melhor deixar o usuário iniciar a reprodução.

O que é a tag <track>?

A tag <track> adiciona trilhas auxiliares a um áudio ou vídeo.

Ela é muito importante para acessibilidade e suporte multilíngue.

Tipos comuns de track?

Exemplo

<video controls>
  <source src="/videos/aula.mp4" type="video/mp4" />
  <track
    src="/tracks/aula-pt.vtt"
    kind="subtitles"
    srclang="pt"
    label="Português"
  />
</video>

Por que isso importa?

Porque ajuda pessoas que:

Regra prática?

Se o vídeo contém informação relevante por áudio, considere fortemente oferecer legendas.

O que é a tag <iframe>?

A tag <iframe> incorpora outro documento dentro da página atual.

Exemplo

<iframe
  src="https://www.google.com/maps?q=placeholder&output=embed"
  title="Mapa de localização"
  loading="lazy"
></iframe>

Quando usar?

Casos comuns:

Atenção?

Como o iframe traz outro contexto de conteúdo, ele deve ser usado com critério.

Quais boas práticas existem para <iframe>?

Use title?

Isso ajuda acessibilidade, descrevendo o conteúdo incorporado.

<iframe
  src="https://www.youtube.com/embed/xxxx"
  title="Vídeo de apresentação da plataforma"
></iframe>

Use loading="lazy" quando fizer sentido?

Pode ajudar performance em conteúdos fora da dobra.

Evite excesso?

Muitos iframes podem pesar bastante o carregamento.

Pense em segurança e dependência externa?

Conteúdo incorporado depende do provedor externo e do comportamento daquele recurso.

O que é a tag <map>?

A tag <map> define um mapa de imagem clicável.

Ela permite transformar regiões específicas de uma imagem em áreas interativas.

Exemplo

<img
  src="/images/planta.jpg"
  alt="Mapa interativo do ambiente"
  usemap="#mapa-ambiente"
/>

<map name="mapa-ambiente">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="/sala-1"
    alt="Ir para a sala 1"
  />
</map>

Quando usar?

É uma solução mais específica e hoje menos comum em interfaces modernas, mas ainda válida em alguns casos:

O que é a tag <area>?

A tag <area> define cada área clicável dentro de um map.

Exemplo

<map name="mapa-exemplo">
  <area
    shape="circle"
    coords="120,120,40"
    href="/setor-a"
    alt="Acessar setor A"
  />
</map>

O que os atributos comuns significam?

O que é a tag <embed>?

A tag <embed> incorpora recursos externos diretamente.

Exemplo

<embed src="/arquivos/manual.pdf" type="application/pdf" />

Quando usar?

Hoje ela aparece menos em projetos modernos do que outras soluções, mas ainda existe para casos específicos de incorporação.

Observação?

Em muitos cenários, iframe ou object podem ser escolhas mais previsíveis.

O que é a tag <object>?

A tag <object> incorpora um recurso externo em um container.

Exemplo

<object
  data="/arquivos/manual.pdf"
  type="application/pdf"
  width="100%"
  height="600"
>
  <p>Seu navegador não suportou a visualização do PDF.</p>
</object>

Quando usar?

Pode ser usada para:

Vantagem?

Ela permite fornecer conteúdo alternativo dentro do elemento.

Qual é a diferença entre <img>, <figure> e <picture>?

Essa dúvida é comum.

<img>?

Mostra uma imagem.

<figure>?

Agrupa uma mídia ou item ilustrativo com significado próprio.

<picture>?

Controla múltiplas versões de uma imagem.

Exemplo combinado?

<figure>
  <picture>
    <source media="(max-width: 768px)" srcset="/images/equipe-mobile.webp" />
    <img
      src="/images/equipe-desktop.jpg"
      alt="Equipe reunida em reunião estratégica"
    />
  </picture>
  <figcaption>Equipe durante reunião de planejamento.</figcaption>
</figure>

Regra prática?

Como trabalhar com imagem responsiva?

Existem algumas estratégias principais.

1. Ajustar via CSS?

A mais comum em muitos casos.

2. Definir dimensões proporcionais?

Ajuda layout e estabilidade visual.

3. Usar picture com fontes específicas?

Bom para art direction.

4. Usar formatos otimizados?

Como WebP, quando fizer sentido.

Exemplo simples responsivo?

<img
  src="/images/banner.jpg"
  alt="Banner institucional"
  width="1600"
  height="900"
  loading="lazy"
/>

Com CSS, essa imagem pode se adaptar ao container.

Como melhorar performance com mídia?

Mídia costuma ser um dos pontos mais sensíveis de performance.

Boas práticas?

Regra prática?

A melhor mídia não é só bonita. Ela também precisa ser leve, adequada e bem entregue.

Como melhorar acessibilidade em imagens e vídeos?

Para imagens?

Para vídeos?

Para iframes?

Para áudio?

Como estruturar uma mídia de forma mais semântica?

Exemplo com figura e legenda?

<figure>
  <img
    src="/images/grafico-conversao.png"
    alt="Gráfico mostrando aumento de conversão ao longo de três meses"
    width="1200"
    height="800"
  />
  <figcaption>
    Evolução da taxa de conversão no primeiro trimestre de 2026.
  </figcaption>
</figure>

Exemplo com vídeo acessível?

<section aria-labelledby="video-demo-titulo">
  <h2 id="video-demo-titulo">Vídeo demonstrativo</h2>

  <video controls poster="/images/capa-demo.jpg" width="1280" height="720">
    <source src="/videos/demo.mp4" type="video/mp4" />
    <track
      src="/tracks/demo-pt.vtt"
      kind="subtitles"
      srclang="pt"
      label="Português"
    />
    Seu navegador não suporta vídeo.
  </video>

  <p>
    Neste vídeo, mostramos a navegação principal da plataforma e os recursos
    mais importantes.
  </p>
</section>

Exemplo com iframe?

<section aria-labelledby="mapa-titulo">
  <h2 id="mapa-titulo">Como chegar?</h2>

  <iframe
    src="https://www.google.com/maps?q=placeholder&output=embed"
    title="Mapa de localização da empresa"
    loading="lazy"
  ></iframe>
</section>

Quais são os erros mais comuns com mídia no HTML?

Esquecer o alt?

Esse é um dos erros mais frequentes.

Usar alt genérico demais?

Descrições vagas prejudicam compreensão.

Colocar imagem informativa como decorativa?

Isso esconde informação relevante.

Não definir dimensões quando necessário?

Pode causar layout shift.

Usar imagens pesadas demais?

Impacta performance e UX.

Incorporar vídeos sem legenda?

Prejudica acessibilidade.

Usar iframe sem title?

Reduz clareza para tecnologias assistivas.

Carregar tudo sem necessidade?

Pode piorar muito o desempenho.

Usar autoplay sem critério?

Pode incomodar e até afastar o usuário.

Como escolher a tag certa para mídia?

Faça perguntas simples?

É uma imagem simples?

Use img.

A imagem precisa de variações por contexto?

Use picture.

A mídia precisa de legenda ou contexto visível?

Use figure + figcaption.

É um áudio?

Use audio.

É um vídeo?

Use video.

Precisa de legendas ou trilhas?

Use track.

Vai incorporar conteúdo externo?

Use iframe, e em alguns casos específicos object ou embed.

A imagem precisa de áreas clicáveis?

Use map + area.

Subgrupo prático das principais variações de mídia

Imagem simples?

<img src="/images/produto.jpg" alt="Produto placeholder" />

Imagem decorativa?

<img src="/images/detalhe.svg" alt="" />

Imagem responsiva com picture?

<picture>
  <source media="(max-width: 768px)" srcset="/images/mobile.jpg" />
  <img src="/images/desktop.jpg" alt="Equipe da empresa" />
</picture>

Figura com legenda?

<figure>
  <img src="/images/grafico.png" alt="Gráfico de crescimento" />
  <figcaption>Comparativo de crescimento trimestral.</figcaption>
</figure>

Áudio?

<audio controls>
  <source src="/audio/episodio.mp3" type="audio/mpeg" />
</audio>

Vídeo?

<video controls poster="/images/capa-video.jpg">
  <source src="/videos/demo.mp4" type="video/mp4" />
</video>

Vídeo com legenda?

<video controls>
  <source src="/videos/aula.mp4" type="video/mp4" />
  <track
    src="/tracks/aula-pt.vtt"
    kind="subtitles"
    srclang="pt"
    label="Português"
  />
</video>

Conteúdo externo via iframe?

<iframe
  src="https://www.youtube.com/embed/xxxx"
  title="Vídeo incorporado"
  loading="lazy"
></iframe>

Resumo prático sobre imagens e mídia

Imagens?

Contexto semântico?

Áudio e vídeo?

Conteúdo incorporado?

Interação em imagem?

Regras mais importantes?

Checklist rápido para revisar mídia em uma página

Antes de publicar, vale conferir?

Conclusão

Trabalhar bem com mídia no HTML vai muito além de “colocar imagem na página”.

Quando você usa os elementos corretos, melhora:

Imagens, áudios, vídeos e embeds bem estruturados tornam o projeto mais profissional, mais compreensível e muito mais preparado para uso real.

Depois desse tema, o próximo passo natural costuma ser aprofundar em: