O HTML A tag 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 site atraente e focado em imagens.
Um exemplo de uma tag HTML IMG totalmente formada tem a seguinte aparência:
Atributos de tag IMG obrigatórios
src = "/ caminho / para / imagem.jpg"
O único atributo de que você precisa para que uma imagem seja exibida em uma página da web é o src atributo. Este atributo identifica o nome e a localização do arquivo de imagem a ser exibido.
alt = "Descrição da imagem"
Para escrever XHTML e HTML4 válidos, o alt atributo também é obrigatório. Este atributo é usado para fornecer aos navegadores não visuais um texto que descreva a imagem. Os navegadores exibem o texto alternativo de maneiras diferentes. Alguns o exibem como um pop-up quando você passa o mouse sobre a imagem, outros o exibem em propriedades quando você clica com o botão direito do mouse na imagem e alguns nem sequer o exibem.
Use o texto alternativo 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 Web Design e HTML” em vez de apenas “logotipo”.
O alt o texto também é essencial para SEO (Search Engine Optimization). Os bots que os mecanismos de pesquisa, como o Google, usam para explorar o conteúdo dos sites não podem "ver" as imagens. Eles contam com o alt texto para determinar o que está na página.
Dentro HTML5, a alt atributo nem sempre é obrigatório, porque você pode usar um rubrica para adicionar mais descrição a ele. Você também pode usar este atributo para indicar um ID que contém uma descrição completa:
aria-describeby = "Descrição da imagem"
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 para o caso.
Atributos de dimensionamento
largura = "500"e.
altura = "500"Dependendo do seu projeto, use o. altura e. largura
Geralmente, você vai querer que o tamanho da imagem seja definido em seu CSS. Na maioria das vezes, isso será o resultado das dimensões do contêiner pai de uma imagem. Essa abordagem permite maior flexibilidade ao se adaptar a diferentes tamanhos de tela. No entanto, ainda existem casos em que você pode querer especificar as dimensões da imagem como atributos HTML.
Outros atributos IMG úteis
title = "Nome descritivo da imagem"O atributo é um atributo global que pode ser aplicado a qualquer um. Elemento HTML. Além disso, o. título
A maioria dos navegadores suporta o título atributo, mas eles o fazem de maneiras diferentes. Alguns exibem o texto como um pop-up, enquanto outros o exibem em telas de informações quando o usuário clica com o botão direito do mouse na imagem. Você pode usar o título atributo para escrever informações adicionais sobre a imagem, mas não conte com essas informações sendo ocultadas ou visível. Definitivamente, você não deve usar isso para ocultar palavras-chave para mecanismos de pesquisa. Essa prática agora é penalizada pela maioria dos mecanismos de pesquisa.
usemap = ""e.
ismap = ""Esses dois atributos definem o lado do cliente () e o lado do servidor (ISMAP) mapas de imagens
longdesc = "Uma descrição mais detalhada de sua imagem"O. longdesc
Atributos IMG obsoletos e obsoletos
Vários atributos estão obsoletos em HTML5 ou descontinuados em HTML4. Para obter o melhor HTML, você deve encontrar outras soluções em vez de usar esses atributos.
border = "3"
alinhar = "esquerda"Este atributo permite colocar uma imagem dentro do texto e fazer com que o texto flua ao seu redor. Você pode alinhar uma imagem à direita ou à esquerda. Ele foi preterido em favor do. propriedade CSS float
hspcace = "10"e.
vspace = "10"O. hspace e. vspace atributos adicionar espaço em branco horizontalmente ( hspace) e verticalmente ( vspace
lowsrc = "/ caminho / para / lowres.jpg"O. lowsrc atributo fornece uma imagem alternativa quando a fonte da imagem é tão grande que o download é extremamente lento. Por exemplo, você pode ter uma imagem de 500 KB que deseja exibir em sua página da web, mas o download de 500 KB levaria muito tempo. Então você cria uma cópia muito menor da imagem, talvez em preto e branco ou simplesmente extremamente otimizada, e a coloca no. lowsrc
O lowsrc atributo foi adicionado ao Netscape Navigator 2.0 para a tag. Fazia parte do DOM nível 1, mas foi removido do DOM nível 2. O suporte do navegador tem sido incompleto para este atributo, embora muitos sites afirmem que ele é compatível com todos os navegadores modernos. Não está obsoleto em HTML4 ou obsoleto em HTML5 porque nunca foi uma parte oficial de nenhuma das especificações.
Evite usar este atributo e, em vez disso, otimize suas imagens para que carreguem rapidamente. A velocidade de carregamento da página é uma parte crítica de um bom design da web, e imagens grandes tornam as páginas muito lentas - mesmo se você usar o lowsrc atributo.