Inserir imagens em páginas web
Publicado em: 2006-06-1 — 62.634 visualizacoes
É 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.
O que diz o W3C sobre imagens em documentos
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.
Juntando tudo
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>Detalhando o código
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;
O Internet Explorer e o atributo ALT
O 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
Conclusão
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.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2006-06-1 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2006/06/01/inserir-imagens/trackback no seu site.
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.
Tem algum problema de usar o longdesc e o alt juntos?
é bom usar um ou outro ou usar os dois ?
Olá maujor!
Quero parabenizá-lo por todo seu trabalho junto à comunidade web. É realmente fantástico! Eu estou iniciando no mundo do webdesign e tenho aprendido muito tendo toda sua obra à disposição. Concordo plenamente com a busca da “standardização” dos websites, pois assim será muito mais fácil de se desenvolver e usufruir dos benefícios dela decorrente.
É legal mais gostaria de saber mais informações, como por exemplo:
– Como alinhar uma imagem no centro da tela de um texto?No CSS é claro!
será que dá pra coloca sem essas paradas de logodesc, e do link ali?
tem como coloca uma imagem em um recado do orkut?
Cara , meus sinceros parabéns por este site . É de alto nivel , estou iniciando nesta área e creio que terei muitas informações por meio dele. Ainda tem pessoas que optam por fazer o melhor e com seriedade, continue assim.
Caro Maujor,
Tenho uma dúvida, eu alterei a imagem do topo do meu blog, ficou legal, mas como fazer com que a imagem inteira seja um link “home” e não apenas o nome do meu blog (como está no seu, por exemplo)?
Desde já agradeço e muito obrigado. (utilizo o wordpress)
Muito legal.. assim dá pra usar as imagens e não cometer gafes na web.
Poxa maujor show de bola o artigo.
Consegui ler finalmente…andei meio sem tempo…tive de terminar mais dois sites….web standards é claro 🙂
Terminei e finalmente pude visiter meus bloglines para ler os artigos.
Abraços
Parabéns, como sempre, conteúdo altamente relevante e instrutivo. 🙂
Não conhecia o atributo longdesc, fiz um teste, mas não entendi… Aonde aparece essa descrição? Tipo um tolltip?
Parabéns pélo artigo Maurício!
Boa noite!
Nossa, perfeito!
Não tinha ciência do longdesc
Obrigado!
Abraços!
Muito boa a matéria. Desconhecia o longdesc, atributo muito bom para desenvolver sites acessíveis. Como o Bruno disse, sou um desses viciados em usar alt (risos) e pretendo perder esse vício o quanto antes.
Abraços Maurício e muito obrigado pelas suas matérias!
Então usamos o
longdesc="poagina.htm"só para imagem inportantes no conteudo, porque se fossemos colocar para as imagem do site, seria um trabalho quase que impossivel ne.Mais é isso, nunca tinha usado este atributo, vou começar a usa-lo nas imagem mais importantes.
Abraços Maurício.
Bem legal as dicas, eu já uso longdesc em meu site a algum tempo, acabei decobrindo o uso desse atributo no site: http://www.accesible.com.ar/examinator/index.php. Ele mede o nível de acessibilidade do seu site, bem interessante ele.
Mais uma ótima aula pelo Maujor.Fico agradecido.
Muito bom… eu num sabia em relação ao longdesc…
boa maurício… essa da longdesc eu não sabia muito sua informação mesmo não, bom saber.
essa parte do alt no i.e. eh mto escroto… pq viciou os desenvolvedores, principalmente q naum trabalham com o firefox, opera, mozilla, etc… e pensa q o alt eh para aparecer o tooltip…
akele abraço
Muito bom!!
Não sabia muito bem a utilidade do longdesc, agora já deu pra saber mais!
Parabéns, seus artigos são ótimos =)