Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Inserir imagens em páginas web

Publicado em: 2006-06-1 — 46.095 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 ALT e 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 IMG define e incorpora uma imagem no documento. O elemento IMG é vazio de conteúdo; ele usualmente destina-se a colocar uma imagem inline definida pelo atributo SRC, exceção faz-se para imagens alinhadas à direita e à esquerda que deixam de ser inline e passam a "flutuar". _

    Nota do Maujor: O atributo ALIGN para imagens com seus valores left center e right está em desuso. Evite este atributo, use CSS para alinhar imagens. Fim da Nota

  • O atributo ALT define 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 LONGDESC para 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 ALT fornece 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 atributo LONGDESC, 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 ALT fornece. O atributo LONGDESC foi 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 WIDTH e HEIGHT quando 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 atributos WIDTH e HEIGHT informam 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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 http://www.maujor.com/blog/2006/06/01/inserir-imagens/trackback no seu site.

28 comentários na matéria: “Inserir imagens em páginas web”

  1. camilla werpp FerreiraNo Gravatar disse:

    estou usando este site pela primeira vez,
    e não estou entendendo sobre como coloca-lo a minha foto no meu ferfil.

  2. Marta Alves FerreiraNo Gravatar disse:

    necessito inserir url

  3. Marcel SampaioNo Gravatar disse:

    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!

  4. fioreavante teganiNo Gravatar disse:

    como excluir da web uma nota indesejada com meu email?

  5. Rodrigo TeixeiraNo Gravatar disse:

    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!

  6. juliana gomesNo Gravatar disse:

    como eu faço pra atualizar meu produtos no meu site?

  7. EduardoNo Gravatar disse:

    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

  8. gonçalves zacariasNo Gravatar disse:

    esta materia é muito importante para mim, visto que eu quero ampliar o meu nível de conhecimentos nesta materia

  9. JairoNo Gravatar disse:

    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.

  10. crisNo Gravatar disse:

    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.

  11. André Sam!No Gravatar disse:

    Tem algum problema de usar o longdesc e o alt juntos?
    é bom usar um ou outro ou usar os dois ?

  12. DenesNo Gravatar disse:

    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.

  13. ElianeNo Gravatar disse:

    É 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!

  14. JuniorNo Gravatar disse:

    será que dá pra coloca sem essas paradas de logodesc, e do link ali?
    tem como coloca uma imagem em um recado do orkut?

  15. luiz carlosNo Gravatar disse:

    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.

  16. JuniorNo Gravatar disse:

    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)

  17. Erik MarquesNo Gravatar disse:

    Muito legal.. assim dá pra usar as imagens e não cometer gafes na web.

  18. Lucas AlvesNo Gravatar disse:

    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

  19. GibaPhpNo Gravatar disse:

    Parabéns, como sempre, conteúdo altamente relevante e instrutivo. 🙂

  20. RafaelNo Gravatar disse:

    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!

  21. Marcelo AriattiNo Gravatar disse:

    Boa noite!

    Nossa, perfeito!
    Não tinha ciência do longdesc
    Obrigado!

    Abraços!

  22. Erick M SantosNo Gravatar disse:

    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!

  23. Osny Santos NettoNo Gravatar disse:

    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.

  24. Pedro RogérioNo Gravatar disse:

    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.

  25. junioNo Gravatar disse:

    Mais uma ótima aula pelo Maujor.Fico agradecido.

  26. JoaresNo Gravatar disse:

    Muito bom… eu num sabia em relação ao longdesc…

  27. Bruno DulcettiNo Gravatar disse:

    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

  28. Carlos EduardoNo Gravatar disse:

    Muito bom!!

    Não sabia muito bem a utilidade do longdesc, agora já deu pra saber mais!

    Parabéns, seus artigos são ótimos =)

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo