Curso de HTML / Inserir imagens com img: texto alternativo e dimensões

Para adicionar uma imagem a um documento HTML, coloque sua URL de arquivo no atributo src do elemento img e descreva seu conteúdo relevante em alt. Defina width e height para as dimensões intrínsecas da imagem para que o navegador possa reservar espaço antes que o arquivo seja carregado.

Inserir uma imagem com img

O elemento img incorpora uma imagem e não possui tag de fechamento. Use a imagem de exemplo representando um lago e uma árvore para testar o seguinte código. Resolva o endereço do arquivo usando os exemplos de caminho relativo em Links: Caminhos, Fragmentos de página e Email.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="Uma árvore em um ilhote no meio de um lago, com montanhas ao fundo"
     width="1600" height="900">

1. Faça o download da imagem de exemplo e salve-a ao lado do arquivo HTML que você está editando, por exemplo, index.html.
2. Insira o código acima dentro do elemento body do arquivo HTML e salve o arquivo.
3. Abra ou atualize o arquivo HTML em um navegador. Você deve ver a foto do lago exibida abaixo.

src identifica o arquivo em relação ao local do arquivo HTML. O código acima procura a imagem na mesma pasta. Se você a salvou em uma subpasta images, altere o atributo para src="images/html-image-sample-lake-tree-1600-v1.webp". O nome do arquivo e a extensão também devem corresponder ao arquivo real.

Clicar na imagem aqui abre o arquivo original. Colocar uma imagem dentro de um link é uma funcionalidade distinta de inseri-la com img.

O que deve dizer o atributo alt?

alt é um texto alternativo. Ele fornece aos leitores que não podem ver a imagem, ou cujo navegador não consegue carregá-la, a informação que a imagem transmite no contexto. Descreva esse papel brevemente em vez de escrever “imagem” ou uma lista de palavras-chave para pesquisa. Para uma legenda visível por todos, compare a explicação em Agrupar Imagens e Legendas com figure e figcaption.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="Uma árvore em um ilhote no meio de um lago, com montanhas ao fundo"
     width="1600" height="900">

Se uma imagem é puramente decorativa e repete uma informação próxima, um alt="" vazio pode ser apropriado. O valor vazio a identifica como não essencial; omitir o atributo alt não comunica essa intenção. Se a imagem transmitir uma informação essencial, explique-a no texto alternativo ou no texto adjacente. O fluxograma de decisão W3C WAI sobre texto alternativo ajuda nos casos ambíguos.

O que fazem a largura e a altura?

O arquivo de exemplo tem 1600×900 pixels. Seus valores width="1600" e height="900" ajudam o navegador a calcular a proporção de aspecto antecipadamente. Esses atributos não reduzem o tamanho em bytes do arquivo de imagem nem o número de pixels. Teste a seleção do tamanho do arquivo separadamente das alterações de corte em Imagens responsivas: srcset, sizes e picture.

Se a imagem for mais larga que a área de conteúdo, o CSS pode limitar sua largura exibida mantendo a proporção de aspecto.

img {
  max-width: 100%;
  height: auto;
}

Em um arquivo HTML autônomo, coloque este CSS em um elemento style dentro do head ou em uma folha de estilo vinculada. As dimensões da imagem descrevem a proporção do arquivo; o CSS controla seu tamanho exibido atual.

Para enviar um arquivo menor, você precisa de uma imagem redimensionada separadamente. O tutorial sobre imagens responsivas explica como srcset e sizes permitem que o navegador escolha entre os arquivos de imagem.

Se a imagem não aparecer

• Verifique o nome exato do arquivo e a extensão em src.
• Verifique a pasta da imagem em relação ao arquivo HTML.
• Abra a URL da imagem diretamente em um navegador para ver se o arquivo está disponível.
• Não presuma que dimensões exibidas menores significam um arquivo baixado menor.

A referência do elemento img em MDN descreve os atributos disponíveis e seu comportamento.