Técnicas CSS para image replacement

Publicado em: 10/07/2006

O que é image replacement?

"Image replacement" pode ser traduzido para "Substituição por imagem". É o termo usado para designar a técnica CSS de escrever um texto usando uma imagem. Isto amplia as possibilidades de uso de fontes decorativas para escrita, uma vez que o designer não fica restrito às fontes instaladas no dispositivo do usuário, podendo compor seus textos com imagens ao seu inteiro gosto. Na prática a substituição se faz para pequenos textos, em sua grande maioria para o nome ou a designação do site.
Não se vai projetar um texto longo em uma imagem pois isto demandaria um tempo de carregamento da página infinitamente superior ao tempo requerido pelo texto escrito com fonte Arial, Times, Verdana ou seja lá a que for.

No exemplo abaixo o nome do meu site está escrito de duas formas. A primeira usando texto puro e a segunda usando uma imagem. A técnica se propõe a substituir o texto puro pela imagem. Estamos buscando servir a imagem via as folhas de estilo, sem uso to elemento IMG na marcação estrutural, como foi feito no exemplo mostrado a seguir.

CSS para Web Design

imagem: cwd.gif de 270px x 40px

Os objetivos a alcançar

Neste tutorial abordarei 6 das inúmeras técnicas existentes para image replacement. Não há preocupação de advogar esta ou aquela como a melhor de todas, e nem mesmo listar as 6 escolhidas como as melhores ou mais indicadas. A finalidade deste tutorial é a de indicar o caminho geral a seguir para esconder o texto e mostrar a imagem em navegadores gráficos. Cabe exclusivamente a você decidir qual delas empregar, pois é você quem conhece as condicionantes do seu projeto.

Ultimamente tenho notado uma espécie de 'patrulhamento web standards' normalmente adotado por pseudo-entendidos que tendem a contestar tudo quanto é código em nome da semântica, palavra que ouviram falar e nem sabem direito o que significa. Semântica é muito bonito, mas não deve servir de freio ao projeto Web.
Uma DIV ou um SPAN extra resolve um problema intricado no seu projeto?
Vá em frente! Use-a sem medo de ser feliz! Danem-se os xiitas!

A substituição de um texto por uma imagem com uso de CSS deve ser feita de modo a não bloquear a acessibilidade ao texto substituido. Assim é preciso considerar basicamente as seguintes situações em que o texto deverá estar legível:

• CSS desabilitada;
• imagens desabilitadas;
• CSS e imagens desabilitadas;
• navegação com leitor de tela.

Nota importante: Para melhor visualizar as vantagens e desvantagens de renderização de cada uma das técnicas mostradas neste tutorial, sugiro que você simule no seu navegador as condições acima (desabilitando/habilitando imagens e/ou CSS) e constate o que acontece em cada técnica.

Fahrner Image Replacement (FIR)

Todd Fahrner membro do W3C, colaborador da WaSP, desenvolvedor e autor consagrado no universo Web Standards é inventor da técnica de substituir texto por imagem. A técnica inventada por Fahrner recebeu seu nome e é conhecida pelo acrônimo FIR iniciais para Fahrner Image Replacement.

O código FIR:

<h1 id="topo">
	<span>CSS para Web Design</span>
</h1>

h1#topo {
	width: 270px;
	height: 40px;
	background-image: url(cwd.gif);
	}
h1#topo span {
	display: none;
	}

A renderização:

CSS para Web Design

Radu Darvas <img> Replacement

A técnica de Radu Darvas propõe o uso do elemento IMG na marcação estrutural, para abrigar uma imagem GIF transparente de um pixel com o atributo "alt" definido com o texto da informação passada pela imagem.

O código de Radu Darvas:

<h1 id="topo">
    <img src="spacer.gif" alt="CSS para Web Design!" />
    <span>CSS para Web Design</span>
</h1>

h1#topo {
	width: 270px;
	height: 40px;
	background-image: url(cwd.gif);
}
h1#topo span { display: none;}
h1#topo img {
	width: 0px;
	height: 0px;
}

A renderização:

CSS para Web Design

Stuart Langridge Image Replacement

A técnica de Stuart não usa o elemento extra SPAN e esconde o texto declarando padding igual a altura da imagem e height igual a zero. Devido ao box model quebrado do IE são acrescidas algumas regras CSS extras para aquele navegador.

<h1 id="topo">
	CSS para Web Design
</h1>

h1#topo {
    padding: 40px 0 0 0; /* padding-top=altura imagem */
    overflow: hidden;
    background: url(cwd.gif) no-repeat;
    height: 0 !important;
    height /**/:40px; /* height=altura imagem - hack IE5's */
}

CSS para Web Design

Malarkey Image Replacement (MIR)

Na técnica de Malarkey também não aparece elemento extra SPAN e o texto é escondido com uso de letter-spacing muito grande e negativo.
É necessário um 'hack' para o Ópera que interpreta erroneamente a declaração letter-spacing.

<h1 id="topo">
	CSS para Web Design
</h1>

h1#topo { 
	letter-spacing : -1000em; 
	width:270px; 
	height: 40px; 
	background-image: url(cwd.gif);
}
	/* Hack para Opera, esconde do MacIE */
	/*\*/html>body #topo { 
	letter-spacing : normal; 
	text-indent : -999em; 
	overflow : hidden;
}/* Fim do hack */

CSS para Web Design

Lindsay Image Replacement

Nesta técnica o texto é escondido declarando-se um tamanho de fonte muito pequeno, igual a 1px e fazendo a cor do texto igual a cor do fundo.

<h1 id="topo">
	CSS para Web Design
</h1>

h1#topo {
	background: url(cwd.gif) no-repeat;
	width: 270px;
	height: 40px;
	font-size: 1px; 
	color: #xxx; /* cor do fundo */
}

CSS para Web Design

Dave Shea Image Replacement

Dave Shea usando a técnica original com um elemento SPAN extra, proposta por Fahrner desenvolveu uma versão usando o atributo title para fornecer um toltip quando o ponteiro do mouse passa sobre a imagem e deixando o elemento SPAN vazio! (para desespero dos xiitas).

<h1 id="topo" title="CSS para Web Design">
    <span></span>
    CSS para Web Design
</h1>

h1#topo {
	position: relative;
	width: 270px;
	height: 40px;
}	
h1#topo span {
	background: url(cwd.gif) no-repeat;
	position:absolute;
	width: 100%;
	height: 100%;
}

CSS para Web Design

Conclusão

Substituir um texto por uma imagem é uma tarefa bem simples com uso de CSS e impossível com uso de marcação HTML.

Desde a invenção da técnica no ano de 2003, por Todd Fahrner muitas variantes têm sido propostas. As 6 técnicas mostradas neste tutorial visam a dar o ponta-pé inicial para suas pesquisas futuras.
Quer saber mais? Uma busca no Google por "image replacement" retorna zilhões de páginas.