Inserindo imagens

1.1 Elemento <img>

Multimídia em HTML é super importante para melhorar a experiência visual das páginas web. Inserir imagens é um dos aspectos chave da multimídia em HTML. O elemento que mais usamos pra isso é o <img>. Vamos dar uma olhada mais de perto:

O elemento <img> é feito pra inserir imagens na página web. É um elemento vazio: não tem uma tag de fechamento, e só inclui atributos.

Sintaxe

    <img src="URL_da_imagem" alt="Descrição" width="Largura" height="Altura">
  

    
      <img src="images/photo.jpg" alt="Descrição da imagem" width="500" height="300">
    
  

Vamos ver os atributos do elemento <img> com mais detalhes

1.2 Atributo src

O nome completo do atributo src é source (fonte).

O atributo src especifica o caminho para o arquivo de imagem que deve ser exibido na página. Pode ser um caminho absoluto ou relativo.

Exemplos:

URL Absoluto:

    
      <img src="https://example.com/images/photo.jpg">
    
  

Caminho Relativo:

    
      <img src="images/photo.jpg">
    
  

A URL Absoluta tem o endereço completo até a imagem, incluindo o protocolo (http ou https), domínio e caminho. O caminho relativo indica a localização do arquivo em relação ao documento atual, o que é conveniente quando se trabalha com arquivos locais.

1.3 Atributo alt

Nome completo: alternative text (texto alternativo)

O atributo alt fornece uma descrição textual da imagem. Esse texto é exibido se a imagem não puder ser carregada, e é usado para melhorar a acessibilidade, porque leitores de tela usam ele para descrever a imagem para usuários com deficiência visual.

Exemplos:

    
      <img src="images/sunset.jpg" alt="Foto de um lindo pôr do sol">
    
  

Um texto alternativo bem feito ajuda os usuários a entenderem o conteúdo da imagem se ela estiver indisponível, e também melhora o SEO (otimização para motores de busca) da página.

1.4. Atributo width

O atributo width define a largura da imagem em pixels. Se o atributo height não estiver especificado, a imagem mantém suas proporções ao mudar a largura.

Exemplos:

    
      <img src="images/photo.jpg" width="500">
    
  

Usar uma largura fixa pode ser útil para controlar o tamanho da imagem, mas é importante considerar a responsividade do design.

1.5 Atributo height

O atributo height define a altura da imagem em pixels. Se o atributo width não estiver especificado, a imagem mantém suas proporções ao mudar a altura.

Exemplos:

    
      <img src="images/photo.jpg" height="300">
    
  

De forma semelhante ao atributo width, usar uma altura fixa pode ser útil, mas é necessário considerar a responsividade.

Exemplo de uso dos atributos juntos

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
  

    
      <img src="images/sunset.jpg" alt="Foto de um lindo pôr do sol" width="500" height="300">
    
  

Neste exemplo, a imagem será carregada do arquivo images/sunset.jpg, exibida com uma largura de 500 pixels e altura de 300 pixels, e se a imagem não carregar, o texto "Foto de um lindo pôr do sol" será mostrado.