Imagens

No Laboratório Belavista, cartazes e fotos de oficina são conteúdo — não só decoração. Imagem que informa entra no HTML; fundo decorativo fica para o CSS.

O exemplo deste capítulo é 13-imagens, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Usar img com src e alt obrigatórios na prática.
• Distinguir imagem de conteúdo e imagem só de apresentação.
• Conhecer figure/figcaption, width/height e carregamento preguiçoso.
• Ver o papel de srcset/sizes e de picture/source.
• Evitar caminhos quebrados e alt inútil.

src e alt

<img src="cartaz-aurora.jpg" alt="Cartaz Aurora vermelha em serigrafia sobre mesa de madeira">

src aponta o arquivo. Sem src, não há o que desenhar. alt descreve a imagem para quem não a vê (leitor de tela, imagem que falhou, busca). Se a imagem for só decorativa e o texto ao lado já diz tudo, alt="" pode ser adequado — nunca omita o atributo sem pensar.

Figure e legenda

figure agrupa mídia (ou código, citação) com figcaption. A legenda é o primeiro ou o último filho de figure.

<figure>
  <img src="prensa.jpg" alt="Prensa tipográfica do ateliê Belavista" width="640" height="400">
  <figcaption>Prensa usada nas oficinas de tipografia móvel.</figcaption>
</figure>

width e height no HTML ajudam o navegador a reservar espaço e reduzir salto de layout. O CSS ainda pode ajustar o tamanho visual.

Responsivo: srcset e picture

srcset (e sizes) oferece versões por largura ou densidade. picture + source escolhe arquivo por condição de mídia ou formato, com um img final como fallback:

<picture>
  <source srcset="cartaz-largo.webp" type="image/webp" media="(min-width: 700px)">
  <img src="cartaz.jpg" alt="Cartaz Tipos da Ribeira na vitrine" width="400" height="500">
</picture>

Neste volume, o essencial é: um img correto com alt bom. srcset/picture entram quando o projeto pedir várias resoluções.

Lazy e SVG

loading="lazy" adia imagens fora da tela. SVG pode ir em arquivo via img ou inline como markup — inline permite estilizar partes com CSS.

Erro comum: caminho errado (imagens/ vs ./imagens/) ou salvar a página e esquecer a pasta da imagem. Outro erro: alt genérico (“imagem1”) ou repetir o mesmo texto da figcaption sem necessidade.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Imagens — Belavista</title>
  </head>
  <body>
    <main>
      <h1>Cartazes em exposição</h1>
      <p>Fotos fictícias do ateliê. Troque o <code>alt</code> e recarregue.</p>
      <figure>
        <img
          src="cartaz-aurora.jpg"
          alt="Cartaz Aurora vermelha, tipografia grande em vermelho e creme"
          width="480"
          height="640"
          loading="lazy">
        <figcaption>Aurora vermelha — serigrafia, edição fictícia.</figcaption>
      </figure>
      <p>
        <img
          src="detalhe-tipo.jpg"
          alt="Detalhe de tipos móveis de madeira alinhados na caixa"
          width="320"
          height="240">
      </p>
    </main>
  </body>
</html>

Quebre de propósito o src de uma imagem e confira se o alt aparece ou se a página “some” o sentido.

O que não vai no img

Gradiente de botão, textura de fundo da seção, ícone puramente decorativo repetido — isso é CSS (ou SVG de apresentação). HTML img é para o que faz parte do conteúdo da página.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Qual a diferença entre imagem de conteúdo e imagem só de apresentação?
2. Para que servem width e height no img?
3. Quando alt="" pode fazer sentido?

Respostas comentadas

1. Conteúdo informa ou ilustra o assunto (vai no HTML com alt útil). Apresentação só enfeita (CSS ou alt vazio consciente).
2. Reservar a proporção no layout e reduzir salto quando a imagem carrega.
3. Quando a imagem é decorativa e o texto ao redor já transmite a informação; o atributo ainda existe, só fica vazio.