É raríssimo uma página Web constituida somente por textos. O uso de imagens quer sejam meramente decorativas tais como a imagem do topo deste Blog, ou aquelas que transmitem alguma informação tal como a imagem de um pequeno sol para indicar previsão de tempo bom e que "vai dar praia". Inserir imagens é uma prática quase que mandatória na construção das páginas. Imagens estão presentes na quase totalidade das páginas de um site.
Se você pretende servir seu documento em conformidade com as Web Standards precisa estar alerta para o fato de que o universo de usuários do seu site inclui pessoas e tecnologias que estão muito aquém de indivíduos em pleno gozo de saúde navegando com o último modelo de computador numa velocidade de 1GB em uma tela de monitor LCD 19". Mas, estas condicionantes não devem servir de pretexto para limitar sua imaginação e criatividade. O que poderá limitar você é a falta de conhecimento das alternativas disponíveis nas Recomendações do W3C.
Transcrevo a seguir trechos de textos (por mim traduzidos) extraidos das Recomendações do W3C:
- Para evitar problemas com navegadores de texto, bem como fazer com que as imagens sejam entendidas e navegáveis em agentes de usuário não visuais, você precisa fornecer uma descrição da imagem no atributo
ALTe evitar o uso de mapas de imagens no lado do servidor. _Nota do Maujor: Experimente o navegador de texto Lynx.
Digite a URL deste Blog na caixa de texto e clique no botão "view page". Se a URL digitada não estiver cadastrada no Lynx ele não vai funcionar! O site e o Blog do Maujor foram cadastrados. Fim da Nota- O elemento
IMGdefine e incorpora uma imagem no documento. O elementoIMGé vazio de conteúdo; ele usualmente destina-se a colocar uma imagem inline definida pelo atributoSRC, exceção faz-se para imagens alinhadas à direita e à esquerda que deixam de ser inline e passam a "flutuar". _Nota do Maujor: O atributo
ALIGNpara imagens com seus valoresleftcentererightestá em desuso. Evite este atributo, use CSS para alinhar imagens. Fim da Nota- O atributo
ALTdefine um texto alternativo que será renderizado quando a imagem não puder ser apresentada (ver abaixo um exemplo de código definindo um texto alternativo). Os agentes de usuário devem renderizar o texto alternativo quando não suportem imagens, quando não suportem um determinado tipo de imagem ou quando forem configurados para não renderizar imagens. _- Não especifique texto alternativo irrelevante para imagens que têm o propósito somente de formatar, por exemplo: alt=”bola vermelha” não é apropriado para uma imagem que destina-se a decorar um parágrafo ou um cabeçalho. Em tais casos o texto alternativo deverá ser uma string vazia (“”). Em todo caso, os autores devem evitar o uso de imagens para fins de formatação de suas páginas; use sim folhas de estilo. _
- Não especifique um texto alternativo que não tenha um sentido (ou seja,”texto xyz “). Isto frustará seus usuários e também não servirá adequadamente aos agentes de usuário que convertem textos em saídas de áudio ou braille. _
- O exemplo a seguir mostra como usar o atributo
LONGDESCpara fornecer uma descrição detalhada de uma imagem:<BODY> <P> <img src="sitemap.gif" alt="HP Labs Site Map" longdesc="sitemap.html"> </BODY>O atributo
ALTfornece uma descrição sumária da imagem. Esta descrição dá ao usuário a opção de decidir se segue ou não o link fornecido pelo atributoLONGDESC, no exemplo “sitemap.html”, onde encontrará uma descrição detalhada da imagem. _- Se a imagem contiver uma informação importante para o entendimento da página (isto é, se ao se retirar a imagem ficar comprometido o entendimento ou se perder uma informaação relevante), então você deverá fornecer uma descrição detalhada da imagem indo além do que o atributo
ALTfornece. O atributoLONGDESCfoi criado com a finalidade de fornecer esta descrição detalhada.
<IMG SRC="graph1.gif" LONGDESC="graph1.htm" ALT="3-d sales chart.">
No futuro os navegadores e outros agentes de usuário deverão prever uma maneira de acessar o link para o documento contendo a descrição detalhada da imagem, no exemplo acima, o documento “graph1.htm”._- Para agentes de usuário que não suportem o atributo “
longdesc“, deverá ser fornecido um link descritivo próximo a imagem:Nota do Maujor: Como mostrado no código abaixo está consagrado o uso de [D], uma letra D maiúscula entre colchetes colocada à direita da imagem, para identificar o link que leva ao documento que contém a descrição detalhada da imagem. Fim da Nota
Exemplo. <IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales.html"> <A href="sales.html" title="Description of 1997 sales figures">[D]</A>- Os atributos
WIDTHeHEIGHTquando definidos, fazem com que o agente de usuário renderize o obejeto com aquelas dimensões em lugar de adotar as dimensões reais. Quando o objeto é uma imagem ela será devidamente redimensionada. Cabe ao agente de usuário encontrar a melhor maneira de redimensionar um objeto ou imagem para as dimensões especificadas pelo autor. Notar que dimensões em percentagens baseiam-se nos espaços horizontais ou verticais disponíveis e não na dimensão real da imagem do objeto ou do applet. Os atributosWIDTHeHEIGHTinformam ao agente de usuário uma idéia do tamanho da imagem ou objeto e assim eles, agente de usuário, podem reservar um espaço para a imagem ou objeto e continuar renderizando o documento enquanto a imagem vai sendo baixada.
Vamos usar o logotipo da WasPedia para exemplificar o emprego dos conceitos acima.
Supor ainda que o conhecimento do desenho do logotipo seja importante para o entendimento da página.
Preparei uma página para você visualizar o nosso exemplo..
Abaixo o código para inserir o logotipo:
<img src="/blog/imagens/waspedia.gif" alt="Logo da WasPedia" width="122" height="122" longdesc="alt-longdesc-descricao.html" />
<a href="alt-londesc-descricao.html">[D]</a>Vamos examinar detalhadamente os atributos da tag <img>
<img src=”/blog/mat-img/waspedia.gif”
o atributo scr define o caminho para o arquivo da imagem inserida;
…alt=”Logo da WasPedia”…
o atributo alt fornece uma breve descrição da imagem;
…width=”122″ height=”122″…
os atributos width e height definem a largura e a altura da imagem em pixel.
Definir as dimensões da imagem agiliza a renderização.
…longdesc=”alt-longdesc-descricao.html” />
o atributo longdesc fornece uma descrição detalhada da imagem;
<a href=”alt-londesc-descricao.html”>[D]</a>
o link [D] é uma alternativa visual para acesso ao arquivo definido em longdesc;
ALTO navegador Internet Explorer, contrariando as recomendações do W3C apresenta o texto alternativo contido no atributo ALT em uma caixinha na tela em forma de uma dica de contexto (tool-tip) quando se coloca o mouse sobre a imagem. Isto não acontece com navegadores Mozilla por exemplo, que seguem as Web Standards.
Conforme visto acima, o comportamento do IE não é standard. Se o autor deseja a apresentação da dica, deverá usar o atributo TITLE e aí sim, os Mozillas apresentarão a dica na tela. Convém ainda ressaltar que se forem usados TITLE e ALT o Internet Explorer apresenta o texto contido em TITLE ignorando ALT. Faça suas experiências.
Ver outra vez a página do exemplo
Para a correta inserção de imagem em uma página Web é fundamental o conhecimento detalhado dos atributos para a tag IMG.
Somente o uso criterioso de tais atributos fará sua página acessível, incrementando usabilidade, otimizando carregamento e disponibilizando-a racional e logicamente às tecnologias assistivas, a softwares e aos demais agentes de usuário em geral.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
estou usando este site pela primeira vez,
e não estou entendendo sobre como coloca-lo a minha foto no meu ferfil.
necessito inserir url
Muito bem explicado, porém também não consegui inserir a imagem no meu site, de qualquer forma tentarei novamente e agradeço sempre o Maujor por todas as explicações em seu blog.
Parabens!
como excluir da web uma nota indesejada com meu email?
Olá Maujor!
Ótima dica sobre a utilização de atributo longdesc. Estive procurando grandes referências sobre o assunto pela internet e acabei vindo aqui, tendo todas minhas dúvidas respondidas!
Grande artigo. Abraços!
como eu faço pra atualizar meu produtos no meu site?
Por favor alguém sabe como inserir na parte da URL o logotipo....exemplo: Meu logotipo - http://www.logomarcasonline.com.br , entendeu....é como este site do MAUJOR quando vc entra aparece o (M) e depois a URL...quem poder mim ajudar meu email: sac@logomarcasonline.com.br
Obrigado
esta materia é muito importante para mim, visto que eu quero ampliar o meu nível de conhecimentos nesta materia
Olá Maujor,
Usei as informações fornecidas por vc para publicar algumas fotos no site do nosso time de futebol e os amigos não estão conseguindo visualizar. Aparece apenas um X vermelho.
Vc pode me dizer oq está acontecendo?
se vc visitar nossa página as fotos que estou falando eram para aparecer nas NOTICIAS (onde eu atualizo), pois, as demais são atualizadas pelo adiministrador do site.
Qualquer ajuda é bem vinda,
Obrigado,
Jairo.
até agora não conseguir inserir nenhuma imagem, já tentei varias veses e só aparece um quadrinho com um x.pode mim explicar o porque.