A tag HTML IMG controla a inserção de imagens e outros objetos gráficos estáticos em uma página da web. Essa tag comum oferece suporte a vários atributos obrigatórios e opcionais que adicionam riqueza à sua capacidade de criar um website atraente e focado na imagem.
Um exemplo de uma tag IMG HTML totalmente formada se parece com isso:
Atributos obrigatórios da etiqueta IMG
SRC.O único atributo que você precisa para obter uma imagem para exibir em uma página da web é o atributo SRC. Este atributo identifica o nome e a localização do arquivo de imagem a ser exibido.
ALTPara escrever XHTML e HTML4 válidos, o ALT atributo também é necessário. Este atributo é usado para fornecer navegadores não visuais com texto que descreve a imagem. Os navegadores exibem o texto alternativo de maneiras diferentes. Alguns o exibem como um pop-up quando você coloca o mouse sobre a imagem, outros o exibem em propriedades quando você clica com o botão direito do mouse na imagem e alguns não o exibem.
Use o texto alt para fornecer detalhes adicionais sobre a imagem que não sejam relevantes ou importantes para o texto da página da Web. Mas lembre-se de que, em leitores de tela e outros navegadores somente de texto, o texto será lido em linha com o restante do texto na página. Para evitar confusão, use um texto alternativo descritivo que diga (por exemplo), "Sobre o design da Web e HTML" em vez de apenas "logotipo".
Em HTML5, o ALT atributo nem sempre é necessário, porque você pode usar uma legenda para adicionar mais descrição a ele. Você também pode usar o atributo ARIA-DESCRIBEDBY para indicar um ID que contenha uma descrição completa.
O texto alternativo também não é necessário se a imagem for puramente decorativa, como um gráfico na parte superior de uma página da Web ou ícones. Mas se você não tiver certeza, inclua o texto alternativo apenas no caso.
Atributos IMG recomendados
LARGURA e ALTURA. Você deve adquirir o hábito de sempre usar o LARGURA e ALTURA atributos. E você deve sempre usar o tamanho real e não redimensionar suas imagens com o navegador.
Esses atributos aceleram a renderização da página porque o navegador pode alocar espaço no design da imagem e continuar baixando o restante do conteúdo, em vez de aguardar o download da imagem inteira.
Outros atributos IMG úteis
TÍTULO. O atributo é um atributo global que pode ser aplicado a qualquer elemento HTML. Além disso, o TÍTULO atributo permite adicionar informações extras sobre a imagem.
A maioria dos navegadores suporta TÍTULO atributo, mas eles fazem isso de maneiras diferentes. Alguns exibem o texto como um pop-up enquanto outros o exibem nas telas de informações quando o usuário clica com o botão direito na imagem. Você pode usar o TÍTULO atributo para escrever informações adicionais sobre a imagem, mas não conte com esta informação sendo escondida ou visível. Você definitivamente não deve usar isso para ocultar palavras-chave para os mecanismos de busca. Essa prática é agora penalizada pela maioria dos mecanismos de pesquisa.
USEMAP e ISMAP. Esses dois atributos definem os mapas de imagem do lado do cliente () e do lado do servidor (ISMAP) para suas imagens.
LONGDESC. O atributo suporta URLs para uma descrição mais longa da imagem. Esse recurso torna suas imagens mais acessíveis.
Atributos do IMG obsoletos e obsoletos
Vários atributos agora estão obsoletos em HTML5 ou preteridos em HTML4. Para melhor HTML, você deve encontrar outras soluções em vez de usar esses atributos.
FRONTEIRA. O atributo define a largura em pixels de qualquer borda ao redor da imagem. Ele foi substituído em favor do CSS em HTML4 e está obsoleto no HTML5.
ALINHAR. Esse atributo permite colocar uma imagem dentro do texto e fazer com que o texto flua ao redor dele. Você pode alinhar uma imagem à direita ou à esquerda. Ela foi reprovada em favor da propriedade CSS float em HTML4 e é obsoleta em HTML5.
HSPACE e VSPACE. o HSPACE e VSPACE atributos adicionam espaço em branco na horizontal (HSPACE) e verticalmente (VSPACE). O espaço em branco será adicionado aos dois lados do gráfico (superior e inferior ou esquerdo e direito), portanto, se você precisar apenas de espaço em um lado, deverá usar o CSS. Esses atributos foram preteridos em HTML4 em favor da propriedade CSS da margem e estão obsoletos em HTML5.
LOWSRC. o LOWSRC Um atributo fornece uma imagem alternativa quando a origem da imagem é tão grande que baixa muito lentamente. Por exemplo, você pode ter uma imagem de 500 KB que deseja exibir em sua página da Web, mas 500 KB levaria muito tempo para ser baixada. Então você cria uma cópia muito menor da imagem, talvez em preto e branco ou apenas extremamente otimizada, e coloca isso no LOWSRC atributo. A imagem menor será baixada e exibida em primeiro lugar, e quando a imagem maior aparecer, ela substituirá a de baixa origem.
o LOWSRC atributo foi adicionado ao Netscape Navigator 2.0 para o IMG tag. Era parte do nível 1 do DOM, mas foi removido do nível 2 do DOM. O suporte ao navegador foi esboçado para esse atributo, embora muitos sites afirmem que ele é suportado por todos os navegadores modernos. Não é obsoleto em HTML4 ou obsoleto em HTML5 porque nunca foi uma parte oficial de nenhuma das especificações.
Evite usar esse atributo e otimize suas imagens para que elas sejam carregadas rapidamente. A velocidade do carregamento da página é uma parte essencial do bom design da Web, e as imagens grandes diminuem as páginas consideravelmente - mesmo se você usar LOWSRC atributo.
