O Básico da web

Image Replacement (em português, algo como substituição por imagem), como já disse em alguns artigos por aqui, são técnicas empregadas para substituir texto por imagem, usando algumas artimanhas de CSS.

Existem diversas maneiras diferentes de se fazer Image Replacement e eu vou explicar para vocês algumas das mais famosas e interessantes, começando pela minha favorita. Além disso, vou mostrar as vantagens e desvantagens e quando devemos usar ou evitar o uso de image replacement.

A motivação

A motivação básica para o uso de image replacement é simples. Produzir texto — geralmente, mas não apenas, títulos — mais agradáveis visualmente, usando fontes mais bonitas, que componham melhor o layout da página, sem, com isso, ferir a semântica ou diminuir as chances de aparecer bem em sites de busca.

Alguns de vocês devem se perguntar: por que usar image replacement quando uma simples IMG em HTML resolveria o problema?

Posso dar duas respostas a essa pergunta:

1. Porque o elemento IMG deve ser usado apenas para imagens que carreguem um significado único, que só pode ser expressado totalmente pela imagem em si. Por melhor que seja, uma descrição textual é apenas isso, uma descrição. Imagine uma foto do seu filho jogando um beijo. Agora me diga se qualquer descrição textual no mundo poderia substituir a imagem. Então, é disso que estou falando.
2. Porque os mecanismos de busca dão mais valor para o conteúdo de elementos textuais — como títulos, parágrafos ou listas — do que para o conteúdo de uma imagem.

Ou seja, a primeira motivação é semântica e a segunda, marketeira. Ambas se completam e trazem benefícios tanto para o usuário quanto para o desenvolvedor.

Para entendermos melhor as motivações, vamos ao segundo ponto.

O uso

Como já vimos acima, image replacement é usada, em geral, para substituir um texto por uma imagem contendo o próprio texto, alterando apenas sua estética, sem alterar seu significado.

Um exemplo:

Texto normal:
Ao vencedor, as batatas

Texto em imagem:

Por mais que você não goste da fonte usada na imagem, é difícil não concordar que o visual é bem mais agradável que o texto puro, renderizado pelo browser.

Esse é o uso normal para image replacement. Não há problemas em decorar a imagem com bordas, sombras, cor de fundo ou qualquer outro efeito visual desejado. Mas a imagem deve conter sempre o mesmo texto que o elemento a ser substituído. Se não for esse o caso, simplesmente não use image replacement.

Por quê? Bem, por dois motivos:

1. Você estaria alterando o significado da página para um ou mais grupos de usuários. Estaria entregando versões diferentes de um mesmo conteúdo baseado apenas na capacidade do usuário (na verdade, de seu user-agent) de interpretar CSS e exibir imagens. Dessa forma, você estaria ferindo a semântica (a geral, não a do HTML) de forma mortal, algo que você não quer, não é mesmo?
2. Os buscadores poderiam entender esta “entrega diferenciada de conteúdo” como cloaking, uma técnica suja de otimização usada por spammers e outros tipos de desenvolvedores cuja figura materna exerce a profissão mais antiga do mundo, o que poderia lhe proporcionar uma penalização ou até mesmo, em casos extremos, fazer com que seja banido dos resultados de busca. E isso, com certeza, mais do que ferir a semântica, ninguém quer.

Portanto, resumindo, image replacement deve ser usado apenas para tornar uma página mais bonita, nunca para alterar seu conteúdo. Sugiro que você leia o meu artigo sobre desenvolvimento em camadas, para ajudar a entender melhor essas questões.

Image replacement é muito legal, muito bonito, mas, como não poderia deixar de ser, nem tudo são flores, continue lendo.

Os problemas

Para começar, nenhuma técnica de image replacement é perfeita. Cada uma delas tem seus prós e contras e escolher uma pra chamar de sua se resume a escolher a que te traz maior benefício com o menor custo.

Em geral, há dois problemas (isso está parecendo aquela propaganda do Discovery Channel, mas vamos lá):

1. A técnica exclui algum grupo de usuários, geralmente aqueles que navegam, por algum motivo, com suporte a CSS mas sem suporte a imagens
2. A técnica traz algum “lixo semântico”, algum elemento HTML que não precisaria estar ali se você não quisesse embelezar sua página.

Nenhuma técnica resolve os dois problemas de uma vez só, mas algumas têm os dois.

Mas, um problema — e um grande problema, diga-se de passagem — é comum a todas as técnicas de image replacement: a forma do texto não pode ser modificada pelo usuário. Ou seja, nada de redimensionamento ou mudança de cores para aumentar contraste.

Isso é algo que vai contra a acessibilidade e pode fazer com que, por exemplo, pessoas com baixa visão não consigam ler seu texto. Infelizmente, se você quiser usar image replacement, vai ter que conviver com isso. Ou melhor, seus usuários vão ter que conviver com isso. A escolha é sua.

Onde não usar

Em meu último artigo, apresentei um exemplo onde image replacement foi usado de maneira inadequada. No exemplo em questão, uma empresa estava apresentando seus produtos na home page do site e as fotos dos produtos eram inseridas na página via CSS, usando image replacement.

Como já vimos lá em cima, devemos usar image replacement apenas quando queremos substituir um texto por uma imagem contendo este mesmo texto. Qualquer outro uso deve ser evitado. Porém, há um caso clássico e muito comum de uso de image replacement que, na minha opinião, é totalmente equivocado: O logotipo do site/produto/empresa.

A princípio é tentador usar image replacement para colocar a imagem do seu logo em uma página web, já que, dessa forma, é possível colocar o seu nome e, em alguns casos, seu slogan, em um elemento com alta relevância para sites de busca (como H1, por exemplo), ajudando seu site a se posicionar melhor nas páginas de resultado.

Isto seria muito bom, se não fosse por um simples motivo: O seu logo é uma informação visual importantíssima e deve estar presente em sua forma completa, inalterada, sempre que possível.

Convenhamos, em alguns casos — provavelmente na maior parte deles — um logo é muito mais importante que o próprio nome da empresa. Imagine que você entra em um site e vê, no topo, em letras garrafais, o texto “Elma Chips”, mas não vê, em lugar algum, a carinha sorridente, presente em todos os pacotes de biscoitos desta marca? Seria, no mínimo, estranho, não?

Portanto, leve isso em conta. Se a imagem transmite, por si só, um significado único, use IMG. Dessa forma qualquer usuário que possa exibir imagens poderá ver esta imagem e os que não puderem, verão o texto contido no atributo ALT.

E agora, o momento que todos esperavam.

Técnicas de Image Replacement

Antes de mostrar as técnicas, devo dizer a vocês que estas e outras técnicas podem ser achadas facilmente pela web. Particularmente gosto dos artigos do Dave Shea (Revised Image Replacement, em inglês) e do Maujor (Técnicas CSS para image replacement, em português), tanto que vou me basear neles.

Primeiro, minha técnica favorita e a que uso sempre que necessário:

Técnica de Gilder/Levin

Criada por Tom Gilder e Levin Alexander, esta técnica usa um SPAN vazio para conter a imagem e, usando posicionamento absoluto, sobrepõe o texto com a imagem.

Esta técnica tem dois problemas (dois, de novo? Fala sério…)

1. Usa um SPAN vazio. Isto pode ou não ser considerado um problema. Um elemento vazio é, de certa forma, algo que não deveria ser usado nunca. Porém isto não traz nenhum problema prático, portanto eu acredito que não devamos nos preocupar. Se você for um purista (xiita para os íntimos) e os pêlos do seu braço se arrepiarem só de pensar em usar um elemento vazio, pule para a próxima técnica. Caso contrário, continue lendo e veja o benefício trazido por esse SPAN vazio e decida-se por usar ou não.
2. Impossibilita o uso de imagens transparentes. Portanto, se você precisa usá-las, essa técnica não vai te servir, infelizmente.

Porém tem um grande benefício: funciona perfeitamente para usuários com CSS habilitado e imagens desabilitadas.

Vejamos a técnica:

HTML:
<h1 id="titulo"><span></span>Ao vencedor, as batatas</h1>

CSS:
#titulo{
  width:238px;
  height:26px;
  position:relative;
  overflow:hidden;
}
#titulo span{
  position:absolute;
  width:100%;
  height:100%;
  background:#fff url(/i/ao-vencedor.gif) no-repeat;
}

Resultado:

Imagem com fundo branco:

Ao vencedor, as batatas

Imagem com fundo transparente:

Ao vencedor, as batatas

O que a técnica faz é estabelecer as dimensões do “container”, no caso o H1, exatamente iguais às da imagem, posicioná-la com posicionamento relativo (leia meu artigo sobre posicionamento, no brunotorres.net) e definir overflow hidden, para que o texto não extrapole os limites, caso o usuário o redimensione pelo browser. Depois coloca o SPAN com posicionamento absoluto e com as mesmas dimensões do “container”, com a imagem de fundo.

Note que o SPAN fica acima do H1, por causa do posicionamento absoluto. Não é necessário usar z-index.

Acho essa técnica genial e vou usá-la até que apareça algo melhor.

FIR - Fahrner Image Replacement

Esta foi a primeira técnica de image replacement, criada por Todd Fahrner, famoso desenvolvedor e membro do W3C.

Esta técnica também usa um elemento a mais, um SPAN, porém não vazio, mas seu maior problema é o uso de display:none, que pode impossibilitar que alguns leitores de tela leiam o conteúdo do elemento (Aparentemente há solução para isso, mas eu não testei com todos os leitores de tela e gente muito mais esperta que eu continua dizendo que o problema acontece, então é melhor não usá-la). Mostro-a aqui apenas por sua importância histórica.

A técnica:

HTML:
<h1 id="titulo"><span>Ao vencedor, as batatas</span></h1>

CSS:
#titulo{
  width:238px;
  height:26px;
  position:relative;
  background:url(/i/ao-vencedor.gif) no-repeat;
}
#titulo span{
  display:none;
}

Resultado:

Ao vencedor, as batatas

Técnica Phark

Esta é uma técnica bastante interessante, simples e criativa, usando text-indent muito grande e negativo para joga o texto “para fora da tela”.

Tem a vantagem de ser muito simples e não requerer nenhuma marcação HTML extra e a desvantagem de não funcionar com CSS habilitado e imagens desabilitadas.

A técnica:

HTML:
<h1 id="titulo">Ao vencedor, as batatas</h1>

CSS:
#titulo{
  width:236px;
  height:26px;
  text-indent:-9999px;
  overflow:hidden;
  background:url(/i/ao-vencedor.gif) no-repeat;
}

Resultado:

Ao vencedor, as batatas

Se não existisse a técnica de Gilder/Levin, esta seria a minha escolha, com certeza. Inclusive já a usei em diversos projetos.

Existem algumas outras técnicas (você pode encontrá-las nos artigos linkados no início desta seção), porém, embora o título deste texto seja “Tudo sobre image replacement”, não vou mostrá-las pois acredito que estas mostradas acima são essencialmente as mais importantes. Se vocês, no entando, encherem meu saco nos comentários, posso incluir as outras aqui.

Além das técnicas puramente de HTML/CSS, existem outras que usam PHP, Flash e JavaScript. Prefiro deixá-las para um futuro artigo, pois pertencem a uma classe diferente de image replacement.

Conclusão

Image replacement não é a panacéia do desenvolvimento web, mas pode ajudar a tornar suas páginas mais bonitas, sem afetar o conteúdo do site, embora cause alguns problemas de acessibilidade e semântica.

Use por sua conta e risco, pese os prós e contras antes de usar e nunca esqueça: seu bom senso é mais importante que qualquer regra.

Qualquer dúvida, a caixa de comentários está aí pra isso.

Leia também:

• Image Replacement: use com sabedoria
• Menu com imagens e rollover - Exemplo de HTML e CSS
• Protocolo HTTP: códigos de resposta mais comuns e seus significados
• Introdução ao protocolo HTTP
• Padrões web: Desenvolvimento em camadas
• Hospedagem de sites Dreamhost: 50% de desconto