Imagens e texto alternativo

Um elemento img precisa de dois atributos para ser útil: src, que diz onde está a imagem, e alt, que diz o que ela mostra quando não pode ser vista.

O elemento img

As imagens não ficam guardadas dentro do arquivo HTML. A página aponta para elas, e o navegador busca cada uma como um arquivo separado. Quem aponta é o elemento <img>. Ele é um elemento vazio, então não tem tag de fechamento, e o atributo src guarda o endereço da imagem, absoluto ou relativo, igual ao href de um link. Imagens são elementos substituídos: o navegador troca o elemento pela imagem, e a imagem decide o próprio tamanho, a menos que você diga outra coisa.

<img src="images/sourdough.jpg"
     alt="A round sourdough loaf with a dark, cracked crust"
     width="400" height="300">

Os atributos width e height dão o tamanho da imagem em pixels, sem unidade. Use o tamanho real do arquivo. O HTML costuma chegar antes das imagens, então, sem esses números, o navegador monta o texto primeiro e depois o empurra para baixo quando cada imagem termina de carregar, o que incomoda quem já começou a ler. Com eles, o navegador reserva o espaço certo desde o início. Para mostrar uma imagem menor ou maior, use CSS em vez de mudar esses números.

Como escrever o texto alternativo

O atributo alt guarda uma alternativa em texto. Um leitor de tela o lê em voz alta, o navegador o mostra quando o arquivo não carrega, e os buscadores o leem para entender a imagem. O MDN sugere um teste simples: o que se perderia se a imagem não aparecesse? Escreva isso, de forma breve. Para a foto de um produto, descreva o que alguém precisaria saber para escolhê-lo. Para um gráfico, diga a conclusão que ele mostra, como As vendas triplicaram de janeiro a março, em vez de Gráfico de barras.

• Não comece com Imagem de ou Foto de. Os leitores de tela já anunciam que é uma imagem.
• Imagens decorativas, como uma linha divisória ondulada, recebem um alt="" vazio. Assim os leitores de tela as pulam. Deixar o alt de fora é diferente: alguns leitores de tela leem o nome do arquivo no lugar.
• Se uma imagem é o único conteúdo de um link, o texto alternativo dela é o texto do link, então descreva para onde o link vai (Início), não a imagem (Logo do pão).
• Se a mesma informação já está no texto ao lado da imagem, alt="" evita dizê-la duas vezes.

Figuras e legendas

Quando uma imagem vem com legenda, envolva as duas em <figure> e coloque a legenda em <figcaption>. Isso liga a legenda à imagem para as tecnologias assistivas, o que um simples parágrafo embaixo da imagem não faz. Legenda e texto alternativo têm funções diferentes: a legenda é lida por todos, enquanto o alt substitui a imagem quando ela falta. Um não deve só repetir o outro. Uma figura não precisa conter uma imagem; um trecho de código, uma tabela ou um poema também podem ser figuras.

Formatos, data URLs e SVG embutido

Fotografias costumam ser JPEG ou WebP, gráficos planos com bordas nítidas são PNG, e desenhos feitos de formas muitas vezes são SVG, um formato de texto que fica nítido em qualquer tamanho. Uma imagem pequena pode até ser escrita direto no src como uma data URL que começa com data:image/svg+xml,; os exercícios abaixo usam isso para que nada seja carregado de outro site. Um SVG também pode ser escrito direto no HTML com um elemento <svg>. Dê a ele role="img" e um filho <title> para que os leitores de tela tenham um nome para ele. Por fim, loading="lazy" nas imagens bem no fim de uma página longa diz ao navegador para esperar até o leitor rolar para perto delas.

Mais uma regra do MDN: use só imagens que você tem o direito de usar. As imagens que você encontra na internet são protegidas por direitos autorais, a menos que a licença diga outra coisa, e apontar seu src para o servidor de outra pessoa sem permissão, o chamado hotlinking, ainda faz essa pessoa pagar pelo seu tráfego.