Image Replacement o cómo reemplazar contenido por imagen

Con este artículo atacaremos directamente la semántica para mejorar la gráfica de nuestro sitio. O sea, no la atacaremos, trabajaremos en conjunto con ella. Si, así queda mejor. La idea de esto, es (en este caso) reemplazar el tag H1 (pueden ser otros, tienes hasta el H6) que sería el título de nuestro sitio (eso es un H1, el título más importante. Así lo entiende Google) por una imagen más atractiva, que destaque más nuestro sitio y que no pierda la importancia o significado del H1. Además de eso, no dejaremos de lado el texto que sería la descripción del H1, así los buscadores sabrán:

1. Es un titulo importante.
2. El nombre de este título es el que está escrito ahi.

El punto es que el nombre del H1 estará escondido, y será reemplazado por la imagen más bonita que cada uno diseñará para su sitio. Comencemos:

El código HTML es muy simple y conocido por todos:

<h1>CSSLab – otro laboratorio de ideas, pero en español.</h1>

Y la imagen que utilizaremos para reemplazar ese texto es la siguiente:

Bien, lo que haremos serán principalmente 2 cosas: primero, le daremos ancho, alto y un background-image (con por supuesto nuestra composición) linkeando adonde esté nuestra imagen. Luego, esconderemos el texto que contiene H1, dándole text-indent de -9999px (text-indent mueve nuestro texto, en este caso negativo llevándolo más allá de nuestros márgenes) y luego escondiéndolo con overflow: hidden; (esto esconde cualquier elemento que no está suscrito dentro de nuestros márgenes, evitando un scrollbar horizontal gigante). Sigue el código CSS:

h1 {
background-image: url(header_csslab.gif);
background-repeat: no-repeat;
text-indent: -9999px;
width: 500px;
height: 130px;
overflow: hidden;
}

Ver ejemplo final

Bastante simple, no? Embellecemos nuestro sitio y aún así lo hacemos relevante para los buscadores.

  1. aguayoki

    ¿Y no es mejor aplicar display: none; al elemento?

    Al menos así lo hago yo… Es compatible con todos los navegadores, y degrada perfecto al quitar las hojas de estilo. Especial para las arañas de búsqueda.

    Saludos!
  2. CSSLab Admin

    si, tb es válido, pero oculta toda la información, inclusive la imagen misma. la idea es q solo el titulo del elemento este oculto, y este sea reemplazado por una imagen como la q compuse.
  3. morris

    muy buen tutorial, no me sabia esa del overflow, lo voy a aplicar, porque con IE uno nunca sabe.. espero que escribas posts mas seguido, muy buen blog. saludos desde Mexico
  4. josé luis báez

    y justo que buscaba reemplazar el título de una página con una imagen y no podía hacerlo. de cajón. muchas gracias
  5. seba

    bueno bueno bueno!
  6. Bane

    Un metodo para lo mismo pero por ejemplo multiples titulos es usar lo siguiente:

    titulo
    titulo 2

    Luego en el CSS le das al span propiedad none, o sea span { display: none;} y al h3 especifico la imagen que quieres que reemplace el texto.

    En todo caso muy güeno este sitio. Felicitaciones
  7. luis

    ¿¿ es posible poner la etiqueta alt en la imagen ??
  8. CSSLab Admin

    una etiqueta alt no va a poder verse ya que la imagen estará como background.
  9. Alvaro Farfan

    Antes que todo, debo decir que es agradable encontrar muy buen contenido chileno, que hable de desarrollo web… al igual que “Estado Beta”, siempre resulta escencial pasearse por aquí…

    Ahora bien, al reemplazo de contenido por una imagen, lo que yo utilizo es “display: none;” para el elemento que quiero “ocultar”… otro metodo igualmente efectivo…

    HTML:

    Título

    ———————————————

    CSS:

    #header{

    background: url(LaImagen.png) center top no-repeat;
    height: 130px;
    }

    #header h1{
    display: none;
    }
  10. CSSLab Admin

    Alvaro, gracias por tu comentario. existen en realidad varios métodos para resolver este mismo tema, el q mencionas es el llamado Fahrner, ya q estas utilizando 2 tags para realizar el ocultamiento del texto. El método q uso yo, y es el q publiqué, se denomina Phark y para mí ha sido el más efectivo. Cosa de gustos. Saludos!
  11. Mario

    No conviene usar display: none; porque algunos lectores de pantalla hacen caso y lo omiten.
  12. Bernardo

    Cómo hago para sustituir un link <a> por una imagen y que IE lo interprete correctamente?, básicamente he probado lo mismo que tu y firefox me lo reconoce bien, pero en IE se ve la imagen de fondo pero no responde como un link al haber movido el texto fuera del área visible.
    Un saludo y muchas gracias.
  13. CSSLab Admin

    bernardo, puedes publicar tu codigo en los foros? generalmente no he tenido problemas con esto en IE,, menos con links… asi podria ayudarte mas facilmente, sin adivinar. salu2
  14. Bernardo

    Resuelto!!, el problema era que no estaba aplicando los atributos para el cambio de imagen por texto a la etiqueta <a> sino a la que la contiene dentro del código html, y como el firefox lo reconocía y hacía lo que yo quería, creía que se trataba de un error del IE (que es lo que pensamos siempre primero, debido a que los chicos de bill gates se han pasado los standars css por el forro). Para la próxima investigaré más antes de colgar dudas en la webe, y en caso necesario, publicaré el código en discordia. Gracias de todos modos y felicitaciones por tu webe, que me está siendo de inestimable ayuda. Sigue así!!!!
  15. CSSLab Admin

    como dato, IE6 no soporta las pseudo-classes en tags q no sean links. a:hover, a:active…… por ej. podrias haber usado li:hover q en FF si funciona pero no en IE6. q bueno q pusdiste solucionarlo . salu2
  16. Andros

    Muy Interesante.
    Se podria hacer para un .swf?
    Seria una buena manera de no perder posicionamiento en una web hecha enteramente en Flash no?
  17. CSSLab Admin

    Andros, no funciona este metodo para SWF ya q no los puedes cargar como fondo de imagen.
  18. Andros

    Ya.
    Lo pensé mientras apretaba en enviar.
    Me dejé llevar por el enfasis.
    :P

  19. Luis

    No sé si existe la solución perfecta que sea semántica y accesible a la vez.
    La que yo propongo tampoco es perfecta. ¿Qué les parece?

    CSS:

    div {
    text-indent: -9999px;
    margin-bottom: -1em;
    }

    XHTML:

    CSSLab – Otro laboratorio de ideas, pero en español
  20. Luis

    Vuelvo a enviar el comentario anterior, que no ha salido completo:

    No sé si existe la solución perfecta que sea semántica y accesible a la vez.
    La que yo propongo tampoco es perfecta. ¿Qué les parece?

    CSS:

    div {
    text-indent: -9999px;
    margin-bottom: -1em;
    }

    XHTML:

    CSSLab – Otro laboratorio de ideas, pero en español
  21. francisco arenas

    yo normalmente lo que hago es crear un texto en un span utilizando la clase accesibility:

    .accesibility {
    display:none;
    }

    el h1 quedaría así: el gran titulo
  22. Esteban

    Y enfocandome en SEO/Robots, me imagino que el robot al leer la etiqueta h1 pero con texto oculto (overflow: hidden;), no sera una forma de penalizar el sitio para sus resultados en google?

    Que opinas Admin?
  23. Jorge Epuñan

    Esteban: la tecnica es muy limpia ya q usa text-indent para esconder el elemento, overflow: hidden cumple solo la funcion de no desplegar un scroll horizontal al elemento. asi q para el robot, el txt aun esta ahi pero corrido ‘levemente’ 9999px hacia la izquierda, no hay cambio de contenido donde los robots si pueden penalizrte (por ejemplo con visibility: hidden).
  24. Julien

    perdón, no entiendo bien…
    ¿overflow:hidden esta o no penalizado por google si esta aplicado a un bloque conteniendo texto?
    No se porque pregunto ya que comprobe que si..
    ¿y visibility:hidden?
  25. rené

    excelente blog¡¡

    quiero hacer lo mismo pero para un menu con comportamiento de roll over..alguna técnica o tuto que me recomienden?
  26. Jorge Epuñan

    Julien: la verdad tu duda me intrigó y tras leer bastante, encuentro respuestas contradictorias y poco claras (es normal dado q los buscadores tampoco son muy transparentes con sus tecnicas de indexacion y rankeado). Dicen algunos q no hay problemas de usar tecnicas como text-indent junto a overflow:hidden en archivos CSS linkeados externos, ya q los spiders no llegan a ellos tan frecuentemente; por otro lado Google indica q algunas tecnicas son penalizadas pero no especifica cuales ni como aplica ese criterio; enfin lo q presento en este articulo esta probado y utilizado por muchos desde hace mucho y no ha tenido problemas tales.

    Exito.
  27. Jorge Epuñan

    rené: podrías facilmente implementarlo con un menu horizontal con rollover. saludos.
  28. Miguel Flores

    Yo suelo utilizar el siguiente HTML:
    Titular con reemplazo de imagen

    Y el CSS:
    h2#ejemplo span{
    display: none;
    }
    h2#ejemplo {
    height: 35px;
    background:url(../images/titular.jpg) no-repeat;
    background-repeat: no-repeat;
    }

    Es accesible y es estándard.
  29. Miguel Flores

    Yo suelo utilizar el siguiente HTML:
    h2 id=”ejemplo”>Titular con reemplazo de imagen</h2

    (Lo puse así por que de otro lado no me muestra el código)
    Y el CSS:
    h2#ejemplo span{
    display: none;
    }
    h2#ejemplo {
    height: 35px;
    background:url(../images/titular.jpg) no-repeat;
    background-repeat: no-repeat;
    }

    Es accesible y es estándard.
  1. [...] Si los enlaces son con imágenes usa técnicas de reemplazo para mejorar la accesibilidad y la semántica, más info ...
    SEO para desarrolladores y programadores | Alex Mozo
  2. [...] Image Replacement o cómo reemplazar contenido por imagen [...]
    » Pronto… | CSSLab
  3. [...] Una de las grandes limitaciones de diseño web está en el manejo tipográfico, ya que tenemos una escasa gama ...
    CSSLab » Más tipografías con sIFR