Inserir imagens é uma parte fundamental do desenvolvimento web, tornando as páginas mais visuais e atraentes. HTML utiliza a tag <img> para embutir imagens em uma página web. Esta tag é auto-fechada, o que significa que não precisa de uma tag de fechamento. A seguir, será explorado como usar a tag <img>, incluindo atributos importantes e dicas para otimização.

Básico da Inserção de Imagens

O atributo mais importante da tag <img> é o src (source), que especifica o caminho para a imagem que você deseja exibir. Outro atributo essencial é o alt (alternative text), que fornece uma descrição da imagem para leitores de tela e em situações onde a imagem não pode ser carregada.

Exemplo Básico:

<img src="imagem.jpg" alt="Descrição da imagem">

Este código HTML insere a imagem localizada em "imagem.jpg" na página, com uma descrição alternativa.

Caminhos Relativos e Absolutos

• Caminho Absoluto: Especifica a localização exata da imagem, incluindo o protocolo e o domínio. Útil para imagens hospedadas em outros sites.

  <img src="<https://www.exemplo.com/imagens/imagem.jpg>" alt="Descrição">
  

• Caminho Relativo: Relaciona a localização da imagem com a localização do arquivo HTML atual. Preferível para imagens que residem no mesmo servidor do site.

  <img src="/pasta/imagens/imagem.jpg" alt="Descrição">
  

Atributo title

O atributo title pode ser adicionado para fornecer informações adicionais sobre a imagem quando o mouse está sobre ela.

<img src="imagem.jpg" alt="Descrição" title="Informação Adicional">

Dimensionando Imagens

É possível especificar a largura (width) e a altura (height) da imagem diretamente na tag <img>, mas é recomendado fazer isso através de CSS para uma melhor prática de design responsivo.

HTML:

<img src="imagem.jpg" alt="Descrição" style="width: 100px; height: 100px;">

CSS:

img {
    width: 100px;
    height: 100px;
}

Imagens Responsivas

Para tornar uma imagem responsiva, permitindo que ela se ajuste ao tamanho do contêiner sem perder as proporções, use o seguinte estilo CSS: