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:
- Pesquisa de Preços: TV LCD, Celular Samsung, Notebook HP, Jogos de Computador, Computador Positivo, Notebook Rosa
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!!