Image Replacement é uma técnica que permite substituir texto por imagem usando CSS. Existem diversas formas de se fazer isso, umas melhores que outras e cada uma delas com seus prós e contras. Eu já usei uma dessas técnicas por aqui em um artigo sobre menus com imagens e rollover (que, a propósito, precisa de algumas atualizações e correções).
Estas técnicas têm um apelo muito forte com relação à otimização para sites de busca mas, como tudo nessa vida, têm os lugares e situações certas para ser usadas.
A regra de ouro sobre imagens na web é: se a imagem é apenas decorativa, insira via CSS; se ela transmite algum significado não visual, ou seja, se é importante como conteúdo, insira via tag IMG no HTML.
Entrei agora há pouco no site da BlackBerry, famosa por seus smartphones, e me deparei, logo na home page, com uma situação onde uma técnica de image replacement foi usada de maneira equivocada.
A página mostra três aparelhos e, creio eu, quando queremos mostrar um produto, uma foto deste produto é algo extremamente importante, que devemos sempre tentar mostrar, não importa onde nem quando.
Se você for até a página e desabilitar o suporte a CSS vai ver apenas uma lista não ordenada com os nomes dos produtos em links para suas respectivas páginas. Limpo, leve e simples, mas, na minha opinião, errado.
Pelo menos eles não cometem o erro de usar image replacement no logo da empresa, que é um dos exemplos mais importantes de onde não se deve usá-lo. E nas páginas de cada produto, as imagens estão lá, no HTML, do jeito correto. Mas, sendo a home, geralmente, a página mais importante de um site, creio eu que deveriam dar um pouco mais de atenção à importância de mostrar seus produtos sempre, chova ou faça sol, calor ou frio, com ou sem CSS.
O que vocês acham? Alguém tem mais algum exemplo de mau uso de image replacement?
Leia também:
- Comprar: Acer Aspire One, Esteira Ergometrica, Notebook, Celular V3
Outubro 7th, 2007 at 9:42 pm
Talvez eles tenham feito isto afim de que quando a página fosse carregada via Blackberry, fosse aplicadas outras imagens de tamanho menor…
Outubro 8th, 2007 at 12:15 am
A regra é simples: não substitua todas as imagens por backgrounds. Informação? HTML Formatação? CSS
[]’s
Outubro 8th, 2007 at 10:39 am
Olá.
Acabo de terminar um curso de Tableless(na Visie). E Image replacement foi um dos tópicos abordados. Li agora no teu artigo que “usar image replacement no logo da empresa,(…) é um dos exemplos mais importantes de onde não se deve usá-lo”. Você poderia explicar por que?
Também vou perguntar a mesma coisa pra eles.
Obrigado desde já.
Outubro 8th, 2007 at 3:59 pm
@Sergio
Imagine alguém visitar um site de uma empresa por algum user agent que não tenha suporte a css. Essa pessoa não vai conseguir ver o logo, e não é isso que a empresa quer.
Belo artigo Bruno!
Outubro 9th, 2007 at 3:05 am
[...] meu último artigo, apresentei um exemplo onde image replacement foi usado de maneira inadequada. No exemplo em [...]
Junho 26th, 2008 at 5:04 pm
Amigo, falando no seu menu com imagens e rollover, ele não funciona no Opera 9.50. Você teria uma solução??
Muito obrigado e parabéns pelos excelentes artigos!!
Junho 26th, 2008 at 5:29 pm
Apenas uma correção: o mouse over não funciona no Opera 9.50, o resto funciona normalmente.
Grato!!
Outubro 28th, 2008 at 4:28 pm
You write very well.
Fevereiro 3rd, 2010 at 10:10 am
Eu uso css em logo. Faço o seguinte: coloco um div e ponho um ID nele. Nesse ID eu ponho o logo como background. Dentro desse div, coloco também o texto correspondente ao logo dentro de um a href. Só que esse a href não aparece visualmente na tela, pois está com text-indent: -9000px. Assim, os deficientes visuais conseguem ler também apesar de não aparecer na tela visualmente. Está errado fazer isso?