Skip to content

Atributos de tag HTML IMG

11 de abril de 2021

Neste artigo

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 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 nas 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. 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 este atributo para indicar um ID que contém uma descrição completa: aria-describeby = “Descrição da imagem”

type = “code”> Texto alternativo também não é necessário se a imagem for puramente decorativa, como um gráfico no topo 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, usando o
altura e
width type = “code”> Geralmente, você deseja 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 elemento HTML. Além disso, o
title type = “code”> 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 mapas de imagem do lado do cliente () e do lado do servidor (ISMAP) type = “code”> longdesc = “Uma descrição mais detalhada de sua imagem”

O
longdesc type = “code”>

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”

type = “code”> align = “left”

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. Foi descontinuado em favor da propriedade CSS float type = “code”> hspcace = “10”

e vspace = “10”

O
hspace e
vspace atributos adicionar espaço em branco horizontalmente (
hspace) e verticalmente (
vspace type = “code”> lowsrc = “/ path / to / 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 apenas extremamente otimizada, e a coloca no
lowsrc type = “code”> O lowsrc atributo foi adicionado ao Netscape Navigator 2.0 para o marcação. Fazia parte do DOM nível 1, mas foi removido do DOM nível 2. O suporte do navegador foi 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.