Image Replacement

Há diversas técnicas de substituir um texto por imagens através de Image Replacement, que é o nome pelo qual essa técnica ficou conhecida. Recentemente o Diego Eis do Tableless postou um ótimo vídeo tutorial ensinando como criar um image replacement sem usar a tag span, que é uma técnica, por incrível que pareça ainda utilizada até pelo Dave Shea no CSS Zen Garden. Claro que, eu imagino, que ele não deve ter trocado o layout do site até mesmo para não ter que modificar todos os layouts que já foram feitos até agora.

Eu estou colocando aqui três técnicas diferentes de image replacement aplicada em menus. A primeira (conteúdo indisponível) é o modelo antigo, que utiliza a tag span. Resolvi colocar aqui para ficar registrada a curiosidade para quem não conhece nenhuma das técnicas de substituição por CSS. Neste modelo você remove o conteúdo do span e coloca uma imagem no lugar. As outras duas técnicas (conteúdo indisponível) são parecidas e igualmente eficientes, não utilizando nem mais nem menos código CSS do que a outra. Ambas empurram o texto para fora da tag e o escondem utilizando overflow:hidden.

As vantagens desta técnica estão na acessibilidade e na indexação dos mecanismos de busca.

  • Flávio Theruo

    Parabéns Henrique, pois você esta sempre buscando construir sites focados na acessibilidade, e também para que sejamos encontrados pelos buscadores.

    O mais importante na minha opinião, é que você coloca todo este conhecimento ao alcance de todos, com exemplos fáceis de serem compreendidos.

    Viva o conhecimento livre. ;-)

  • http://marcogomes.com Marco Gomes
  • Pingback: Semântica de Títulos » Revolução()

  • Valério Faria

    Henrique sobre o exemplo menu2.htm que se inicia com o título:

    Image Replacement

    Depois segue com:

    Image Replacement Modelo 2

    A minha questão é: não ficaria melhor se ao invés do div

    usasse a tag de título classificando melhor

    a hierarquia da página?

    Essa pergunta é no intuito de discutir sobre o assunto da

    tag semanticamente adequada, não tenho objetivo nenhum de

    minimizar ou procurar contradições em uma página bem

    organizada e com conteúdo de qualidade como a sua.

  • Valério Faria

    Repetindo só que desta vez de forma legível :)

    Henrique sobre o exemplo menu2.htm que se inicia com o título:

    <h2>Image Replacement</h2>

    Depois segue com:

    <div class="tipo">Image Replacement Modelo 2</div>

    a minha questão é: não ficaria melhor se ao invés do div

    usasse a tag de título <h3></h3> classificando melhor

    a hierarquia da página?

    Essa pergunta é no intuito de discutir sobre o assunto da

    tag semanticamente adequada, não tenho objetivo nenhum de

    minimizar ou procurar contradições em uma página bem

    organizada e com conteúdo de qualidade como a sua.

  • Pingback: Lucrando na Rede » Aspectos a considerar sobre o MSN Search()

  • http://www.logosbr.com Pablo Esquivel

    Uma velha técnica utilizada por spammers consistia em ocultar texto e links nas páginas igualando o cor da fonte com o cor do background.

    Logo o Google criou metodos para banir essas páginas.

    Uma pergunta é: será que substituir texto por imagens não prejudica a indexação nos motores de busca?

    Alguém tem alguma informação ou links a respeito?

    Pablo Esquivel
    http://www.logosbr.com

  • Filype

    Henrique,

    Eu posso fazer um image replacement com link??

    Obrigado,

    Filype

  • Pingback: Netlus » Blog Archive » 5 Perguntas para 12 Designers()

  • http://avi.alkalay.net Avi Alkalay

    Henrique, os exemplos não funcionam.

  • Laís

    Ia comentar o mesmo que o Avi Alkalay. Os exemplos não estão funcionando, Henrique.

  • Joviniano

    Caro Henrique, sua solução de "image replacement" funciona realmente. Mas não é a forma mais correta.

    Na verdade não é nada grave, mas prejudica o SEO.

    Essa técnica de indentar textos com com margens kilométricas e fazer a imagem aparecer por cima do texto, prejudica o site no quesito SEO.

    Ao contrário do que muitos pensam, os motores de busca não levam em consideração apenas a marcação html/xhtml. A estilização também é avaliada, justamente para evitar que páginas de spammers e picaretas em geral façam a festa na web.

    O ideal é o desenvolvedor procurar seguir os padrões e entrar em acordo com o designer de sua equipe para que o resultado final seja uma página limpa e coerente com os padrões web standards.

    Mas muitos podem perguntar: por que o UOL usa image replacement na sua logo????

    Resposta: UOL não precisa de SEO, eles já tem mercado garantido para muitas décadas.

    Segundo Jacob Nielsen, as melhores páginas da web são aquelas que são as mais vistas, e não são as mais bonitas.

  • wdl

    Esconder o texto não seria uma técnica de black hat seo?