Imagens: as capturas dos seus projetos

A tag da imagem

<img src="imagens/retrato.jpg" alt="Marina Sales, de camisa azul, num laboratório de informática" />

<img> não tem conteúdo e não fecha. Dois atributos importam:

• src; o caminho do arquivo
• alt; a descrição, para quem não vê a imagem

No portfólio, as imagens são três tipos: o seu retrato, a captura de cada projeto e os enfeites. Cada um pede um alt diferente, e um deles pede nenhum.

O alt não é opcional

Ele existe para duas situações reais:

1. A pessoa usa um leitor de tela. O programa lê o alt em voz alta. Sem ele, anuncia "imagem": e mais nada.
2. A imagem não carregou. Conexão instável, dado acabando, servidor fora do ar. No lugar da foto aparece o texto do alt.

A segunda situação é comum por aqui, e não é hipotética.

<!-- Ruim: não informa nada -->
<img src="projeto1.png" alt="imagem" />
<img src="projeto1.png" alt="projeto1.png" />

<!-- Bom: descreve o que se vê -->
<img
  src="imagens/feira.png"
  alt="Página inicial do site da feira, com a tabela de horários das bancas"
/>

O alt de uma captura de tela

É o caso mais difícil do portfólio, e o mais mal resolvido. A captura mostra uma página inteira; o alt cabe numa frase. A regra que funciona: descreva o que aquela tela faz, não o que ela tem.

<!-- Fraco: lista elementos -->
<img src="imagens/feira.png" alt="Site com cabeçalho, menu, tabela e rodapé" />

<!-- Forte: diz o que a tela entrega -->
<img
  src="imagens/feira.png"
  alt="Página do site da feira mostrando os horários das bancas por dia da semana"
/>

Se a captura for só ilustrativa e o texto ao lado já contar tudo, alt="" é defensável - mas confira antes se o texto realmente conta.

Quando o alt deve ficar vazio

Se a imagem é decoração; uma onda, uma linha, um ícone ao lado de um texto que já diz a mesma coisa -, o alt vazio é o certo:

<img src="imagens/traco.svg" alt="" />

Vazio diz ao leitor de tela: pule isto, não há informação aqui. Diferente de omitir o atributo, que faz o programa ler o nome do arquivo em voz alta.

É o caso dos ícones do GitHub e do LinkedIn no seu rodapé, quando o link já tem o nome escrito ao lado.

O cartão de projeto

Cada projeto do portfólio é uma imagem com legenda, um título, uma descrição, a ficha técnica da aula 4 e os links da aula 6. Junto, fica assim:

<figure>
  <img
    src="imagens/feira.png"
    alt="Página do site da feira mostrando os horários das bancas por dia da semana"
    width="1200"
    height="750"
  />
  <figcaption>Feira do produtor, 2026.</figcaption>
</figure>

<h3>Feira do produtor</h3>
<p>
  Uma página que responde à pergunta mais feita no grupo do bairro: que dia abre
  e a que horas. Foi o meu primeiro site publicado.
</p>

<dl>
  <dt>Ano</dt>
  <dd>2026</dd>
  <dt>Papel</dt>
  <dd>Estrutura, estilo e publicação</dd>
  <dt>Situação</dt>
  <dd>No ar</dd>
</dl>

<p>
  <a href="https://marinasales.github.io/feira/">Abrir o site da feira</a>
</p>

<figcaption> é a legenda que aparece na tela, para todo mundo. O alt continua sendo necessário: os dois fazem trabalhos diferentes - um descreve a imagem para quem não a vê, o outro comenta a imagem para quem a vê.

Reserve o espaço

<img src="imagens/feira.png" alt="..." width="1200" height="750" />

Declarar as medidas faz o navegador reservar o retângulo antes de a imagem chegar. Sem elas, o texto abaixo pula para baixo no instante em que a imagem carrega: e numa conexão lenta isso acontece depois de a pessoa já ter começado a ler, ou pior, na hora em que ela ia tocar num link.

Num portfólio com seis capturas, isso é seis saltos.

Áudio e vídeo

Quase nenhum portfólio precisa, e é bom que seja assim - mas quando o projeto é som ou movimento, a alternativa a uma captura parada é esta:

<video controls width="640" poster="imagens/capa.jpg">
  <source src="demonstracao.mp4" type="video/mp4" />
  <track kind="captions" src="legendas.vtt" srclang="pt-BR" label="Português" />
  Seu navegador não reproduz vídeo.
  <a href="demonstracao.mp4">Baixar o arquivo</a>
</video>

• controls mostra os botões de play, pausa e volume. Sem ele, não há como tocar.
• poster é a imagem que aparece antes de o vídeo começar.
• <track> carrega as legendas: e legenda serve para quem não ouve, para quem está num lugar barulhento e para quem está sem fone.
• O texto solto no meio aparece só em navegador que não suporta a tag.

No portfólio

Hoje a página portfolio.html ganha conteúdo:

• <h1> "Projetos que já estão no ar" e um parágrafo de abertura;
• um bloco por projeto, com <figure> + <img> + <figcaption>, <h2>, parágrafo, a <dl> da ficha e o link para abrir;
• pelo menos três projetos - os exercícios do curso valem;
• todas as imagens dentro de imagens/, com caminho relativo, width, height e alt escrito de verdade;
• no index.html, os dois ou três projetos mais recentes repetidos na seção "Projetos selecionados", cada um com link para portfolio.html.

E o retrato: uma foto sua em sobre.html, com alt que descreva a pessoa, não o arquivo. Se você não quiser aparecer, não ponha - portfólio sem foto funciona; portfólio com foto de banco de imagens, não.

Exercícios

1. Capture a tela de três projetos seus, reduza cada uma para 1200 pixels de largura e guarde em imagens/.
2. Escreva o alt das três, descrevendo o que a tela entrega.
3. Monte o cartão completo de um projeto: <figure>, título, descrição, <dl> e link.
4. Adicione width e height em todas as imagens e observe que o texto não pula mais ao recarregar.
5. Escreva o alt de: o seu retrato, o ícone do GitHub ao lado da palavra "GitHub", e um traço decorativo. Um deles deve ficar vazio: qual, e por quê?
6. Desligue as imagens no navegador (ou renomeie a pasta imagens/) e leia a página. Ela ainda faz sentido?

Referências

• Imagens em HTML - MDN - alt, figure e os casos de uso
• Como escrever um bom alt - W3C - a árvore de decisão para cada tipo de imagem
• Áudio e vídeo - MDN - <video>, <audio> e legendas