A tag <img> em HTML é usada para incorporar imagens em uma página da web. Ela suporta várias propriedades que permitem controlar o comportamento e a apresentação da imagem. Aqui estão algumas das propriedades mais comuns usadas na tag <img>:
src: Esta é a propriedade obrigatória que especifica o caminho (URL) para a imagem que você deseja exibir. Por exemplo:
<img src="imagem.jpg" alt="Descrição da imagem">
alt: Esta propriedade fornece um texto alternativo para a imagem, que é exibido quando a imagem não pode ser carregada ou quando um leitor de tela está sendo usado. É uma boa prática incluir um texto descritivo e significativo aqui. Por exemplo:
<img src="imagem.jpg" alt="Uma bela paisagem natural com montanhas e um lago">
width e height: Essas propriedades especificam a largura e a altura da imagem em pixels. Elas podem ser usadas para dimensionar a imagem para o tamanho desejado na página. Por exemplo:
<img src="imagem.jpg" alt="Descrição da imagem" width="300" height="200">
title: Esta propriedade fornece um texto de título que é exibido quando o usuário passa o mouse sobre a imagem. Pode ser usado para fornecer informações adicionais sobre a imagem. Por exemplo:
<img src="imagem.jpg" alt="Descrição da imagem" title="Clique para ampliar">
loading: Esta propriedade permite especificar como a imagem deve ser carregada. As opções incluem "auto" (o navegador decide), "eager" (carregar imediatamente) e "lazy" (carregar apenas quando a imagem estiver visível na tela). Exemplo:
<img src="imagem.jpg" alt="Descrição da imagem" loading="lazy">
decoding: Esta propriedade permite especificar como a imagem deve ser decodificada. As opções incluem "async" (assíncrona) e "sync" (síncrona). Exemplo:
<img src="imagem.jpg" alt="Descrição da imagem" decoding="async">
sizes e srcset: Essas propriedades são usadas para fornecer várias versões da imagem com diferentes tamanhos e resoluções, permitindo que o navegador escolha a melhor imagem para exibir com base no dispositivo e nas condições de visualização. Exemplo:
<img srcset="imagem-480w.jpg 480w, imagem-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="imagem-800w.jpg" alt="Descrição da imagem">
crossorigin: Esta propriedade é usada quando se carregam imagens de origens diferentes (domínios). Pode ser definida como "anonymous" ou "use-credentials" para controlar a política de segurança de carregamento de imagens.
usemap: Esta propriedade permite associar uma imagem a um mapa de imagem criado com a tag <map> para criar áreas clicáveis na imagem.
ismap: Esta propriedade indica que a imagem é um mapa de imagem sensível a cliques.