Cuando lees el título lo primero que te preguntas y ¿por qué deberia cambiar un texto por una imagen mejor inserto directamente una imagen?, viéndolo así parece más práctico pero si lo vemos desde la óptica de SEO (Optimizacion de nuestro sitio para buscadores) nos damos cuenta que es importante hacer nuestra página semánticamente correcta por ejemplo que nuestro logo no sea simplemente una imagen sino un H1 osea el titulo principal eso lo hace más «apetitoso» nuestro contenido para google.
Veamos algunas técnicas para lograr esto
Reemplazo clásico
Aqui lo que hacemos es agregar a nuestro titulo una etiqueta span que ocultaremos usando CSS, lo malo es que aunque el titulo es semanticamente correcta span no lo es.
[cc lang=»html»]
Revised Image Replacement
[/cc]
[cc lang=»css»]
#header {
width: 329px;
height: 25px;
background-image: url(sample-opaque.gif);
}
#header span {
display: none;
}
[/cc]
Usando margen
En este método no hace falta agregar etiquetas HTML adicionales lo que hacemos es enviar nuestro texto muy lejos de tal forma que no sea visible. El problema es que si la imagen faltara no se marcará, bueno tampoco es tan grave de hecho en todos los casos ocurre eso.
[cc lang=»html»]
Revised Image Replacement
[/css]
[cc lang=»css»]
#header {
background: url(sample-opaque.gif) no-repeat top right;
width: 2329px;
height: 25px;
margin: 0 0 0 -2000px;
}
[/cc]
Usando indentación
Este método es muy similar al anterior lo que hace es enviar nuestro texto lejos pero no usando un margen sino indentación, el problema es que según parece genera problemas en IE5 si es que aún alguien lo usa claro esta.
[cc lang=»html»]
Revised Image Replacement
[/cc]
[cc lang=»css»]
#header {
text-indent: -5000px;
background: url(sample-opaque.gif);
height: 25px;
}
[/cc]
Existen algunos otros métodos más pero la verdad son sólo ligeras variantes de los anteriores.
